2021/09/03の勉強会で発表されたものです。

1. HTMLの「空白」を描画する方法まとめ
執筆者：トビウオ

2. HTMLで要素間に「空白」を設けるには
半角空白、全角空白、タブ、改行文字を挿入する (非推奨)
CSSでmarginやpaddingを設定する
CSSでletter-spacingやword-spacingを設定する
CSSでtext-alignなどで位置決めする
CSSでfloatやflexで位置決めする

3. 空白・タブ・改行文字は使いづらい
半角空白・タブ・改行文字といった文字のことをホワイトスペースと呼ぶ
HTMLの仕様上、表示する際にこうした文字達は無視され、ほぼ反映されない
インデント設定したものがそのまま反映されたら不便ですし……
反映されるケースもある。どういったルールで処理されるかは次スライドに

4. ホワイトスペースの処理方法
1. 改行文字の前後にある、1つ以上の空白・タブ文字は無視される
2. タブ文字や改行文字が、空白文字として変換される
3. 空白Aの直後に空白Bがある場合は、空白Bが無視される
1. 空白Aと空白Bの間にインライン要素がある場合も「直後」に含む
4. 描画した際、行頭と行末の空白が無視される

5. つまりどういったことなのか
• HTMLにおける改行文字やインデントは表示に反映されない
• そういうのは<br>タグや<pre>タグなどでやれ、ということ
• 空白文字を複数入れても1個分しか間隔が空かない
• letter-spacingやword-spacingを使えば目的が果たせる
• 行頭や行末に空白文字を入れていても無視される

6. CSSでマージン・パディングを使おう
要素間の間隔を調整するには、
margin・paddingを使うのがベター
次の4種類の「領域」を把握しよう

7. 4種類の「領域」とは？
Content Edge……文字列や画像などのコンテンツを表示する領域の大きさ
Padding Edge……Content Edgeの周囲をPaddingで覆った領域の大きさ
Border Edge……Padding Edgeの周囲を境界線 (Border) で覆った領域の大き
さ
Margin Edge……Border Edgeの周囲をMarginで覆った領域の大きさ
Marginは隣り合ったエレメントで相殺されるので注意 (後述)

8. マージンの相殺とは？
例えば隣り合ったエレメント同士など、特定の状況でMarginが相殺される
そうなると、見かけ上のMarginが、より大きい片方のみになる

9. 文字や単語のスペーシングについて
letter-spacingプロパティ……文字の間の間隔を設定する
「H T M L 5」などといったレイアウトが簡単に作れる
word-spacingプロパティ……単語の間の間隔を設定する
「What time is it now ?」などといったレイアウトが簡単に作れる
挙動としては、半角スペースで区切られていれば日本語などでもOKな模様

10. 左寄せ、右寄せなどについて
text-alignプロパティ……横方向のレイアウトを設定する
“start”で左寄せ、”end”で右寄せ、”center”で中央寄せになる
(アラビア語、ヘブライ語などのRTL環境では左右が逆になる)
“justify”だと両端揃え(右端と左端以外は単語を均等に配置する)
vertical-alignプロパティだと、縦位置を制御する。”top”で上寄せ、など

11. FLOAT、FLEXについて
displayプロパティでflexを指定すれば、短い記述でレイアウトを組むことができる
昔はflexが使えなかったので、floatプロパティで代用していた
MDNのサンプルより引用。→
各要素を「均等な間隔で」
横に並べる設定にしている

12. FLOAT、FLEXについて
displayプロパティでflexを指定すれば、短い記述でレイアウトを組むことができる
MDNのサンプルより引用。→
最後の要素だけ、他要素から
大きく離した配置にしている

13. FLOAT、FLEXについて
displayプロパティでflexを指定すれば、短い記述
でレイアウトを組むことができる
MDNのサンプルより引用。→
flexを活用すれば、簡単に
縦の中央寄せも可能

14. 参考資料
MDN