⚛️
フロントを極める.CSS編｜第1章｜ブロックレベル要素
今回の記事では、CSSの中でも
ブロックレベル要素（Block-level content）について解説します。
ブロックレベル要素（以下”ブロック要素”と呼ぶ）
1. 概要
ブロックレイアウトでは、要素のボックスは包含ブロックの上から下へ垂直に配置される。各ボックスの左端は包含ブロック[1]の左端に揃う。また、ブロック要素は必ず新しい行から始まり、横書きの場合、親要素の水平方向の幅（↔️）全体と、内容に応じた垂直方向の高さを持つ「ブロック」を形成する。
2. ポイント（デフォルトのCSSなどを含む）
- 要素前後に改行が行われる
- 子要素である場合、親要素の水平方向に膨らむ（width: auto;）
- margin（外側の余白）やpadding（内側の余白）を適用できる
- デフォルトのCSSだと、widthにpadding、border、marginは含まれない（box-sizing: content-box;が適用されているため）
3. 注意事項！
- 包含ブロックの書字方向（例：縦書きや右から左）が異なる場合レイアウトの動作が変わる
- 何の中身もない隣接するブロック要素（padding、borderやcontent[2]がない場合）との垂直marginは大きい方に吸収される
- インライン要素にブロック要素を含めるのはブラウザの解釈が異なる場合があり、予期しないレイアウトを引き起こす可能性がある
- 横並びにさせたい際はなるべくflexを使い、floatは使わない
- floatにした際は親要素には高さが伝わらないため、clearfix や display: flow-root を使って回避する
この記事の背景
｜フロントエンジニアの先輩｜
私の先輩は輝いて見える、私が聞いたことは何でも答えてくれる。
一年でここまで成長できるのかが不思議なほどである。
ある日私は、フロント技術になぜそこまで詳しいのか教えてもらった。
曰く、
「自分の書くタグ一つ一つ理解してからでないと、次に行けない性格だから」
曰く、
「私は、全て書き終えてからプレビューしていた」と。
私は驚いた。自分の中には、常に確認しながら物事を進めることが普通だと思っていたからだ。
私は、それを聞いてこう思った。
「自分もいつかこうなりたい」
参考文献
- https://developer.mozilla.org/ja/docs/Glossary/Block-level_content
- https://developer.mozilla.org/ja/docs/Web/CSS/display
Discussion