Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSSレイアウト再入門:完全に理解してCSSを記述するために

berlysia
August 24, 2024
7.5k

 CSSレイアウト再入門:完全に理解してCSSを記述するために

berlysia

August 24, 2024
Tweet

Transcript

  1. お品書き 1. はじめに:このトークについて 2. 整形コンテキスト / Formatting context a. ボックスモデル

    b. 通常フロー、またはフローレイアウト c. displayプロパティ d. その他のレイアウトモデル 3. ほかのやつ
  2. このトークの前提となること • 「計算値 / Computed value」が定まっているところからスタートします ◦ カスケーディング、継承、詳細度の話をしません • どんな道具を使ってもCSSを扱う人間が決して逃げられない話をします

    ◦ CSSを管理する道具、周辺のツールの話をしません ◦ 全部自前でCanvasにレンダリングしたら逃げられるかもしれない • 最低限言及に必要な範囲にとどめ、メンタルモデルの再構築に努めます ◦ CSSの特定モジュールの詳細には必要以上に分け入りません • 一般的な「Webブラウザ」上での視覚的なレイアウトの話をします ◦ 「視覚整形モデル」のもと、特に「連続メディア」について扱います ◦ 印刷用のような「ページメディア」の場合でもほとんど共通しています
  3. このトークが主に参照する文書 • CSS Snapshot 2023 ◦ https://www.w3.org/TR/css-2023/ ◦ 仕様の言葉はこの文書の索引から追いかけたものを示します •

    CSS: カスケーディングスタイルシート | MDN ◦ https://developer.mozilla.org/ja/docs/Web/CSS ◦ 訳語はMDNに(あれば)合わせるようにしています このトークでよくわからなかったら MDNなどにもだいたい書いてあります! ゆっくり自分のペースで咀嚼してみてください
  4. Original image from Understanding the critical path | web.dev by

    Google / CC-BY 4.0 このあたりの話をします このトークはだいたい
  5. 整形コンテキスト Formatting context CSS Display Module Level 3 整形コンテキストの紹介 -

    CSS: カスケーディングスタイルシート | MDN これがわかるとレイアウトはたちどころにわかる
  6. ブロックとインライン フローレイアウトにおけるボックスは大別して2種類 • ブロックレベルのボックス、ブロックレベルボックス ◦ フローレイアウトにおいて、段落のような振る舞いをする ◦ ブロックレベルボックスは「ブロック 整形コンテキスト 」に参加する

    • インラインレベルのボックス、インラインレベルボックス ◦ フローレイアウトにおいて、行の中に現れる振る舞いをするボックス ◦ インラインレベルボックスは「インライン 整形コンテキスト 」に参加する 各「整形コンテキスト」がボックスの並びを制御する
  7. ブロック整形コンテキスト 前提 • ページのルート要素の主ボックスはブロック整形コンテキストをなす ◦ ページのルート要素の主ボックスはブロックレベルボックスである ◦ ブロックレベルボックスは通常フローではほとんどの場合ブロックコンテナボックスでもある ◦ ブロックコンテナボックスは自分がブロック整形コンテキストにいないとき、新たに生成する

    • 参加するボックスはすべてブロックレベルボックスである ◦ インラインレベルボックスが現れた場合は無名ブロックレベルボックスで囲むことで達成 次のようにレイアウトする • 「包含ブロック」の中に、ブロックフロー方向の順にボックスを並べる ◦ 包含ブロックは後述。初期値ではブロック整形コンテキストをなすブロックと一致する • ボックス間の距離はブロックフロー方向のmarginによって定める ◦ このときmarginの相殺が起きる。相殺の挙動はブロック整形コンテキストの仕業である • 包含ブロックのインラインベース方向の始点側の辺に接するように配置する ◦ ブロックフロー方向の寸法の初期値は autoなので、何もしなければ終点側までを占める
  8. インライン整形コンテキスト 前提 • 参加するボックスはすべてインラインレベルボックスである ◦ テキストノードは無名インラインレベルボックスで囲まれる ◦ ブロックコンテナボックスがインラインレベルボックスのみを含むとき生成される 次のようにレイアウトする •

    「包含ブロック」の中に、インラインベース方向の順にボックスを並べる ◦ 行に対応する「行ボックス」が生成され、その中にボックスが並べられていく ◦ 複数行に渡る場合は行ボックスも複数生成される ◦ インラインレベルボックスが途中で行ボックスを跨ぐ場合は断片化する (いい感じに改行する) • 行ボックスは個別のブロックフロー方向の寸法を持ちうる ◦ 一部の文字がデカくてもちゃんと行がいい感じに大きくなってくれるあの動作 • など、他にも細かい挙動がたくさんあります
  9. ところで:display: flex; な要素を作るとどうなるか • 生成されるボックスはブロックレベルなのかインラインレベルなのか ◦ ブロックレベル。インラインレベルにするなら display: inline-flex; と書く。

    • ブロック整形コンテキストとは全然動作が違う ◦ flex-directionプロパティの初期値 rowはフレックスアイテムをインラインベース方向に並べる flex-wrapプロパティでアイテムの並びがおさまらなかったら折り返すこともできる ◦ ブロック整形コンテキストはブロックフロー方向に並べる ブロックレベルボックスの折り返しの機能はない display: block; を display: flex; にしたらこうなるわけです
  10. ほかの整形コンテキストをもつレイアウトモデル • フレックスボックスレイアウト / Flexible Box Layout ◦ displayプロパティの値がflex, inline-flexであるならば、フレックスコンテナボックスを成す

    ◦ フレックスコンテナボックスはフレックスボックス整形コンテキストを成す • グリッドレイアウト / Grid Layout ◦ displayプロパティの値がgrid, inline-gridであるならば、グリッドコンテナボックスを成す ◦ グリッドコンテナボックスはグリッド整形コンテキストを成す • テーブル ◦ displayプロパティの値がtable, inline-tableであるならば、テーブルラッパーボックスを成す ◦ テーブルラッパーボックスを主ボックスとして、直下にテーブルボックスを成し、 テーブルボックスはテーブル整形コンテキストを成す • ルビ ◦ displayプロパティの値がrubyであるならば、ルビコンテナボックスを成す ◦ ルビコンテナボックスはルビ整形コンテキストを成す
  11. 独自の整形コンテキストを伴わないレイアウト • floatプロパティにnone以外が与えられた浮動要素 ◦ フローレイアウト のもとで、通常フローから「浮動」して配置する動作をする ◦ floatプロパティがnone以外の値を持つ場合、 displayプロパティの計算値が調整される ▪

    が、フローレイアウトのもとでなければ浮動は起きない • positionプロパティによる位置指定レイアウト / Positioned Layout ◦ 値がstatic, relative, stickyの場合は属する整形コンテキストのレイアウトに従う ▪ stickyの場合はそこから粘着の動作をする ◦ 値がabsolute, fixedの場合は属する整形コンテキストの「フローから除外 / out-of-flow」、 その上で包含ブロックに対して絶対位置での配置が行われる ▪ fixedの場合、ビューポート上で最初に描画された位置に固定される 何かしらの形で整形コンテキストに依存している
  12. 包含ブロック / Containing block 何に影響するか • width, height, margin, paddingのパーセント値の基準

    ◦ min/max-width/heightや、block-size, inline-sizeのほか、flex-basisなども同様 ◦ 100%が思った通りの値になったりならなかったりするときに思い出したい • position: absolute;指定時の絶対配置の基準 識別するには • 最寄りの祖先のブロックコンテナを成す要素のコンテンツボックス • 最寄りの祖先の整形コンテキストを成す要素のコンテンツボックス • position: absoluteのとき、position: staticでない最寄りの祖先のパディングボックス • position: fixedのとき、ビューポート(ブラウザ上でページが見えている領域) • ほか、一部プロパティの指定により異なる場合がある
  13. 重ね合わせコンテキスト / Stacking context 何に影響するか • 重ね合わせの動作 ◦ z-indexをめちゃめちゃ大きくしても勝てないときに裏にかならずいる ◦

    z-indexを与えてない場合は positionプロパティで重ね合わせのルールがあることに注意 いつ生成されるか • 文書のルート要素 • positionがabsoluteかrelativeで、かつz-indexがautoでない要素 • positionがfixedかstickyの要素 • フレックスアイテム、グリッドアイテムでz-indexがautoでない要素 • container-typeがsizeまたはinline-sizeの要素 • ほか、レンダリング系や描画結果を使うプロパティの指定があるとき
  14. で、誰だったの • berlysia (べるりしあ、と読む) ◦ Webとアイマスが両本業 • 株式会社ドワンゴ 教育事業 ◦

    Webフロントをやる人 ◦ Webフロントのためにいろいろやる人 ▪ フロントエンド周り採用中です! • TSKaigiコアスタッフ ◦ TSKaigiは2025も企画中! ◦ 11/16に京都でTSKaigi Kansai 2024があります ▪ 9/17までCfPを募集しています