今さら聞けないHTML 2021年08月15日

今さら聞けないHTML 2021年08月15日

【cssメモ】cssで中央揃え

#◇本日のメモ#
cssにて、中央にする方法

①文字を中央揃え

“`perl:css
{text-align: center;}
“`

②要素を中央揃え

“`perl:css
{margin:0 auto;}
“`

③display: flexにて中央揃え
こちらは記述した【子要素】が横並びになる。
なので、横並びにしたいものからみて、その親要素に記述
例えば親要素のdiv内にで3つの子要素があれば、親要素にdisplay: flexを記述して、その3つを横並ぶにする

“`perl:css
{
display: flex;
}
“`

◇おまけ
display: flexのオプション。下記記述で縦並びに上下左右中央になる

“`perl:css
{
display: flex;
flex-direction: column; /* 横要素にしたのを、縦並びに*/
justify-content: center; /* 左右中央に*/
align-items: center;/* 上下中央に*/
}
“`

ありがとうございました!

元記事を表示

HTMLの主なタグと用途(3) テーブル

本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。

#目次
[1.はじめに](#1-はじめに)
[2.テーブルの概要](#2-テーブルの概要)
[3.テーブル作成の例](#3-テーブル作成の例)
[4.ヘッダーのあるテーブル](#4-ヘッダーのあるテーブル)
[5.thead・tbody・tfoot](#5-thead・tbody・tfoot)
[6.キャプション](#6-キャプション)
[7.セルの結合](#7-セルの結合)
[8.おわりに](#8-おわりに)

##1. はじめに
HTMLの学習内容は広大なので、本記事では「テーブル」を記載する。

##2. テーブルの概要
:::note info
・テーブルとは?
→表を作成するタグで、身近なもので例えるとExcelで作成する表。
・タグは<table>で表記。
・横一行の記載法として<table>〜</table>内に<tr>〜</tr>で記載。
・<tr>〜</tr>タグ中に&

元記事を表示

【HTML/CSS】右側に余白ができている

#◇本日の困ったこと#

*・「発覚の経緯」と「エラー内容」*
HTML/CSSにて実装後、ローカルブラウザにて確認すると、右側に余白ができてる、、、、

#◇解決#
bodyの中身をすべてwrapで囲み、CSSにてwrapにoverflow: hidden;を記述でかいけつ!!

“`perl:html

〜元々の記述してあるのを囲むだけ〜

“`

“`perl:css
.wrap {
overflow: hidden;
}
“`

#参考にしたもの#
とても助かりました!

http://bashalog.c-brains.jp/15/06/26-170500.php

元記事を表示

THMLメールをスマホで見たら横幅が指定できなかった話

HTMLメールの基本はテーブルレイアウトだ。と言うことは調べたら出てきます。
でも画像を入れると横並びで幅が指定できないなんて聞いてないよ!?
と言う訳で実際にできなかった事をメモメモします。

####↓こんな感じにしたかった↓
![スクリーンショット 2021-08-13 15.43.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565886/087e3c7e-02be-952c-04f3-e292fe103d0a.png)
画像が左にあって最大の横幅は200pxで右側に文章が入る
そんな風にしたかった・・・

実際にテスト送信を行ってみたところ・・・
PCのgmailでは大丈夫。
PCのyahooでも大丈夫。
スマホのyahooでも大丈夫。

スマホのgmailは・・・
####こんな感じになってしまった↓
![スクリーンショット 2021-08-13 15.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.c

元記事を表示

HTMLの主なタグと用途(2) 見出し・属性・リンク・著作権表記・情報のグループ化

本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。

#目次
[1.はじめに](#1-はじめに)
[2.見出し](#2-見出し)
[3.属性](#3-属性)
[4.リンク](#4-リンク)
[5.著作権表記](#5-著作権表記)
[6.情報のグループ化](#6-情報のグループ化)
[7.おわりに](#7-おわりに)

##1. はじめに
HTMLの学習内容は広大なので、本記事では「見出し・属性・リンク・著作権表記・情報のグループ化」を記載する。

##2. 見出し
・Headingの略で、見出しを意味する。
・<h1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となる。
・<h6>が最下位の見出し

【サンプル】

“`index.html

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6


“`

元記事を表示

[JavaScript]fetch メソッド

#### コード
“`sample.html