Skip to content

DNET_CSSLayout

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

CSSのレイアウト

概要

CSSのレイアウトって難しいですね。

というか専門的にやったことなかったので、
この際、色々と調べてみました。

基本

ボックスモデル

コンテンツ（content）

  • コンテンツ自体。
  • コンテンツのwidth, height (= ボックスサイズ)は、
    下記のボーダー（border）と、余白（padding、margin）を含まない。

ボーダー（border）

  • 境界線の太さを指定する。
  • borderプロパティにて指定。

内容とボーダーの間の余白（padding）

  • 境界線とコンテンツの間の余白を指定する。
  • paddingプロパティにて指定。

ボーダーと他のボックスとの間の余白（margin）

  • 境界線と包含ブロックの間の余白を指定する。
  • marginプロパティにて指定。
  • marginの重ね合わせ。
    • 上下の要素間でmarginの重ね合わせが起きる。
    • 親子の要素間でも、marginの重ね合わせが起きる。
      • ただし、親要素にborderを指定すると重ね合わせは起きない。
      • ただし、親要素にpaddingを指定すると重ね合わせは起きない。

包含ブロック（コンテナブロック）

最も近い祖先の要素にあたるブロックボックスを形成する要素の内容領域

子要素の位置と大きさは、包含ブロックに依存

  • 位置：
    自要素のposition プロパティに依存。

  • 自要素の大きさ：width、height などの プロパティに依存。

    • 子要素に width、height を指定してない場合、
    • 子要素に width、height に % 指定をしている場合

子要素の位置の基準点 ≠ 包含ブロックのケース

  • 基本的に、子要素の位置の基準点は ≒ 包含ブロックだが、
  • 自要素のposition プロパティがstaticの場合は、
    子要素の位置の基準点は包含ブロック内の左上の要素になる。
    （通常フロー：左上から右下にスタックしていく）。

ブロックボックスとインラインボックス

包含ブロック内に配置されるボックスは、
ブロックボックスとインラインボックスのふたつに分けられる。

ブロックボックス

  • 行を専有して、下にスタックされていく。
  • width や height を指定できる。
  • ブロックレベル要素はブロックボックスを生成する。

インラインボックス

  • 行内に、どんどん右・下にスタックされていく。
  • 以下を指定できない（img、input、textareaを除く）
    • width や height (line-heightで代替)。
    • margin、paddingの上下
  • インラインレベル要素はインラインボックスを生成する。

displayプロパティ

  • ブロックレベル要素にdisplay: inline を指定すれば、インラインボックスとして表示
  • インラインレベル要素にdisplay: block を指定すれば、ブロックボックスとして表示
    これにより、単なるリンクをボタンのように表示することができる。

配置方法（position プロパティ）

  • ボックスの配置位置を決めるためのボックスの配置方法を指定
  • 指定できる値には、static、relative、absolute、fixed がある。

static（静的配置）

  • 既定値（position プロパティを指定しないとき）
  • 包含ブロックの左上 or スタック対象ブロックの右下が起点となる。
  • 起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式

relative（相対配置）

  • 包含ブロックの左上 or スタック対象ブロックの右下が起点となる。
  • 起点をtop、left、right、bottom プロパティの相対位置指定で変更可能。
  • 変更後の起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式

absolute（絶対配置）

  • 包含ブロックの左上から、
    左上座標の絶対配置をtop、left、right、bottom プロパティで指定可
  • この場合、起点となるのは、
    • static 以外の値が指定されているボックスの左上になる。
    • 起点となるボックスがない場合、"HTMLの描画領域"が配置位置の基準点になる。
  • これはスタックしないので、フローではない（Z軸で重なる）。

fixed（固定配置）

  • absolute を指定したときと同じ様な仕組みで配置
  • absolute と異なる点、
    • 配置位置の基準点が"画面表示領域"に固定される点。
    • 従って、スクロールしても、常に同じ位置に表示され固定される。
  • 同様に、これはスタックしないので、フローではない（Z軸で重なる）。

スタック方向（floatプロパティ）

position プロパティ（float との関係）

  • absolute（絶対配置）・fixed（固定配置） に設定されている場合、

    • スタックしない。

  • static（静的配置）・relative（相対配置）に設定されている場合、

    • ブロックボックスがスタックされる方向を
      float: left; or float: right;によって、垂直方向から水平方向の左・右どちらかに変更する。
    • これにより、ブロックボックスを右から左 or 左から右にスタックさせるフローの実装が可能になる。

float プロパティのフロート解除

  • 子ブロックボックスがfloatプロパティで浮いて、親ブロックボックスが高さを認識できなくなる。

  • これにより、高さによって決まる親ブロックボックスの描画領域が表示されなくなる。

  • 以下の方法でfloatプロパティのフロートを解除することでこの問題にも対応できる。

  • 解除方法

    • clear プロパティ
      フロートしている子ブロックボックスの後続のブロックボックスに指定する。
      子ブロックボックスの後続のブロックボックスが存在しない場合、空のdivを置いてコレに適用する。

      • clear: left; 左側フロート要素の回り込み解除
      • clear: right; 右側フロート要素の回り込み解除
      • clear: both; 両側すべてのフロート要素の回り込み解除

    • clearfix という手法

      • after擬似要素のセレクタを使用して、親ブロックボックスの後続のブロックボックスにclear プロパティを指定する手法。
      • clearfix手法は、親ブロックボックスの後続のブロックボックスが存在しない場合でも適用可能。

    • overflow: hidden
      後続のブロックボックスではなく、親ブロックボックスにoverflow: hiddenを指定する。
      （autoまたはscrollでも解除可能だがスクロールバーが表示されるので問題）

  • 参考

個別

tableタグ

古の方法。

メリット

CSSのレイアウトより簡単なので、

  • 初心者でも使いやすい。
  • 難しいことをしないのでブラウザ間の差異が無い。

デメリット

以下の理由で、コンテンツのメンテナンス性の低下、レイアウト変更の手間が増加。

  • HTMLとデザインを切り離せない（CSSなら切り離すことができる）。
  • 文章構造の論理性・汎用性が確保できなくなる。
  • 複雑化し易い（エクセル方眼紙 in Webみたいなことに）

参考（tableタグ）

横並べ

以下の2つの方法がある。

中央揃え

text-align:center; vertical-align:middle;

  • インラインレベル要素を上下・左右の中央揃えにする最も一般的な方法。
  • ブロックレベル要素は中央寄せにならないので、
    • display:inline-block;でインラインレベル要素にする。
    • もしくは、display:table-cell;を使用する。

line-height:heightの値px

  • インラインレベル要素を上下中央揃えにするハック的な方法。
  • heightの値と、line-heightの値を同じにして上下中央揃え。
  • 2行以上になると、2行目以降が要素からはみ出してしまう。

padding: xx px yy px;

  • 自要素に、高さ、幅の指定が無い（サイズが可変の）場合のみ有効。
  • この場合、paddingは、記述した順に[上下][左右]のパディングとなる。
  • この2つの値を指定したpaddingにより上下・左右の中央揃えになる。

marginを使う。

応用して、右寄せ・左寄せ、上寄せ・下寄せなどもできる。

  • margin:auto

    • 上下・左右の中央揃えにする。
    • 自要素に、高さ、幅の指定が有るブロックボックスの場合のみ有効。
    • 自要素に、高さ、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。

  • margin:auto 0;

    • 上下の中央揃えにする。
    • 自要素に、高さの指定が有るブロックボックスの場合のみ有効。
    • 自要素に、高さの指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。

  • margin:0 auto;

    • 左右の中央揃えにする。
    • 自要素に、幅の指定が有るボックスの場合のみ有効。
    • 自要素に、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。

補足：通常フロー（position: static / relative）では margin-top / margin-bottom の auto は 0 として扱われるため、 margin:auto や margin:auto 0; で上下方向が中央揃えになるのは Flexbox・Grid のアイテムか、position: absolute で上下を 0 に 指定した場合に限られる。左右方向（margin:0 auto;）は通常フローでも有効。

positionを使う。

高さ、幅の指定が無いブロックボックスを上下・左右の中央揃えにする。

  • 包含ブロック（コンテナブロック）からの絶対座標配置（position:absolute;）を使用する。
  • 左上を、包含ブロック（コンテナブロック）中央に合わせる（top:50%; left:50%;）
  • そこからCSS3の transform: translate(-50%,-50%);で左上を中央に調整する

display:table; と display:table-cell;

  • 親要素に「display:table;」と子要素に「display:table-cell;」を指定する。

  • display:table;

    • table要素のようになる。

  • display:table-row;

    • tr要素のようになる。
    • 子要素の高さが同じになる。

  • display:table-cell;

    • td要素のようになる。
    • td要素は均等に配置される。
    • td要素にtext-align:center; vertical-align:middle;を指定すると、
      td要素の子要素に、これらが適用され、上下・左右の中央揃えにする。
    • td要素の子要素がブロックレベル要素の場合、td要素ではなく、
      子要素に「margin: 0 auto;」を指定することで左右の中央揃えにする。

  • 参考

参考（中央揃え）

その他

  • CSS3のレイアウト（CSS3の「レイアウト」の該当節を参照）
  • Bootstrapのレイアウト（Bootstrapの「レイアウト」の該当節を参照）

移行メモ

  • 「親ブロックボックスの描写領域」→「描画領域」に修正した。
  • 「スタックさせるフローを実装が可能になる」→「フローの実装が可能になる」に修正した。
  • 見出し「display: table-cell;、display:table-cell;」は同じ値が 2 回 書かれていたが、本文が「親要素に display:table; と子要素に display:table-cell; を指定する」であることから 「display:table; と display:table-cell;」の誤記と判断して修正した。
  • margin による上下中央揃えの記述は、通常フローでは成立しないため補足を加えた。
  • 本文の無い見出し（「横並べ」配下の「floatプロパティ」「display: inline」、 「その他」配下）は箇条書きにまとめた。
  • 同名の見出し（「参考」「position プロパティ」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, CSS, レイアウト, ボックスモデル, position, float, clearfix, 中央揃え, display

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally