📝書籍「作って学ぶ HTML+CSSグリッドレイアウト」のメモ

投稿日: 2024.12.07

書籍情報

書名：作って学ぶ　HTML+CSSグリッドレイアウト
著者：エビスコム

Amazon.co.jp: 作って学ぶ　HTML+CSSグリッドレイアウト eBook : エビスコム: Kindleストア

https://www.amazon.co.jp/%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6-HTML-CSS%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-%E3%82%A8%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0-ebook/dp/B0CSXWCF2T/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3SR9U0H2LN3JQ&dib=eyJ2IjoiMSJ9.pUxh22hzQfProNwaGwFeC4vVJJvlg8LNfBuJLb7d3ZCJPu2ofBqqwlm0h0zzGD9g.Bv8l8YPpx9S2svHQIx74QpMbPDIHVSb5SggB2X7oIJg&dib_tag=se&keywords=%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6+%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89&qid=1733541588&s=digital-text&sprefix=%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AD%A6%E3%81%B6+%E3%82%B0%E3%83%AA%E3%83%83%E3%83%89%2Cdigital-text%2C173&sr=1-1

フローレイアウト

フローレイアウトのルール（視覚整形モデル）

ブロックレベル要素の場合（display: block や table が適用された要素）

隣り合う要素の上下マージンは相殺（結合、重ね合わせ）される
親と子孫の要素の間にパディングなどが入らない場合、上下マージンは相殺される
要素の中身が空でパディングなどが入らない場合、自身の上下マージンは相殺される
横幅が auto の場合、コンテナブロック（親）の幅に合わせてサイズが決まる
高さが auto の場合、中身に合わせてサイズが決まる
左右マージンが auto でコンテナブロック内に余剰スペースがある場合、中央に配置される（余剰スペース分のサイズが auto に割り振られる）
上下マージ

など

インラインレベル要素の場合（display: inline や inline-blockが適用された要素）

display が「inline」の場合、横幅と高さの指定は適用されない
display が「inline-block」の場合、横幅と高さの指定が適用される
隣り合う要素の間にはそれぞれの左右マージン、ボーダー、パディングが入る
左右マージンが auto の場合、0で処理される
上下マージンは相殺されない
1行の高さはテキストや各要素の line-height や height で決まる
display が「inline-block」の場合、上下マージン、ボーダー、パディングが1行の高さに影響する

など

浮動要素（float: left または right が適用された要素）の場合

通常フローに従って垂直方向の配置が決まる
水平方向はコンテナブロックの左右に揃えた配置になる
フロー外の要素として扱われるが、後続のテキストやインラインレベル要素は回り込む

絶対位置指定された要素（position: absolute または fixed が適用された要素）の場合

フロー外の要素として、通常フローから独立して扱われる
position が「static」以外の直近のコンテナブロックが位置指定の基準（包含ブロック）となる
横幅や高さが auto の場合、中身に合わせたサイズとなる

など

フローレイアウトの特徴

フローレイアウトでは下記の2点が求められているため、自由にレイアウトを制御するのは難しい

すべての要素のスタイルを把握すること
要素の相互関係でレイアウトを組むこと

など

フローレイアウトの拡張

フローレイアウトと同じように要素の設定と相互関係で制御する「フレックスボックス」や「テーブル」などは、フローレイアウトを拡張するものと考えることができる

フレックスボックスのルール（整形コンテキスト）

display: flex を適用した要素がフレックスコンテナとなり、フレックスボックスを構成する
フレックスコンテナ直下の子要素がフレックスアイテムとして扱われ、並べられる
フレックスアイテムの間でマージンは相殺されない
フレックスコンテナとフレックスアイテムの間でマージンは相殺されない
フレックスコンテナに適用した::first-line、::first-letter は機能しない
フレックスアイテムに適用したfloat、clear、vertical-align は機能しない

フローレイアウトの課題

フローレイアウトでレイアウトを制御するためには、「すべての要素のスタイルを把握すること」「要素の相互関係でレイアウトを組むこと」が必要となる。しかし、複雑なレイアウトではこれらが足かせとなってしまう。

フレックスボックスはさまざまな用途に適しており、さらに強化してより優れたものにするつもりですが、ページレイアウトには適切な解決策ではありません。テンプレートレイアウトが適しています。

Why Flexboxes Aren’t Good for Page Layout ― Tab Completion （2010年）
https://www.xanthir.com/blog/b4580

フレックスボックスは非常にシンプルなページレイアウトには適していますが、より複雑なレイアウトには適していません。複雑な2次元のレイアウトには、テーブルレイアウトを彷彿とさせる酷い構造のネストされたフレックスボックスがたくさん必要になります。それは良いことではありません。 …レイアウトのわずかな変更のために文書をかなり大幅にアレンジすることになり、良い構造も幸せなコーダーも生み出しません。

CSS For Real Pages and Apps with Flexbox, Tab Atkins （2013年）
https://youtu.be/FKfNbqqeGi4

グリッドレイアウト

CSSグリッドのルール（整形コンテキスト）

display: grid を適用した要素がグリッドコンテナとなり、グリッドを構成する
グリッドコンテナ直下の子要素がグリッドアイテムとして扱われ、グリッドに配置される
グリッドアイテムの間でマージンは相殺されない
グリッドコンテナとグリッドアイテムの間でマージンは相殺されない
グリッドコンテナに適用した::first-line、::first-letter は機能しない
グリッドアイテムに適用したfloat、clear、vertical-align は機能しない