2.3 Computed・Layout

Computed Styles and Layout Tools

Computedタブでは、すべてのCSSルールが適用された後の最終的な計算済みスタイルを確認できる。また、DevToolsにはFlexboxやCSS Gridのレイアウトをデバッグするための専用ツールが用意されている。

Computedタブ

Elementsパネルの「Computed」タブでは、選択した要素に実際に適用されている最終的なスタイル値を確認できる。

Stylesタブとの違い

Stylesタブ Computedタブ
適用されているCSSルールを表示 計算後の最終値を表示
カスケード順に並ぶ アルファベット順に並ぶ
上書きされたルールも表示 有効な値のみ表示
ルールの編集が可能 表示のみ（編集不可）

フィルタリング

Computedタブ上部のフィルタ入力欄で、プロパティ名を検索できる。

Show all

「Show all」にチェックを入れると、すべてのCSSプロパティ（デフォルト値を含む）が表示される。特定のプロパティがなぜ適用されないかを調べる際に便利。

値のソースを確認

プロパティ値をクリックすると、その値を設定しているCSSルールがStylesタブでハイライトされる。

ボックスモデル

Computedタブの上部には、選択要素のボックスモデルが視覚的に表示される。

構成要素（外側から）

領域 色 説明
margin オレンジ 外側の余白
border 黄色 境界線
padding 緑 内側の余白
content 青 コンテンツ領域

値の確認

各領域にマウスを乗せると、ページ上で対応する領域がハイライトされる。

値の編集

ボックスモデル内の数値をダブルクリックすると、直接編集できる。margin、padding、borderの値を素早く調整可能。

position: fixedの確認 ボックスモデルの右上に「position」ボタンが表示されることがある。これにより、固定配置要素の位置を視覚的に確認できる。

Flexboxデバッグ

DevToolsには、Flexboxレイアウトを理解・デバッグするための専用ツールがある。

Flexバッジ

display: flexが設定された要素には、Elementsパネルで「flex」バッジが表示される。

Flexオーバーレイ

有効化方法

  1. flexコンテナを選択
  2. 要素の横にある「flex」バッジをクリック
  3. またはLayoutタブで該当要素にチェック

オーバーレイが有効になると、ページ上に以下が表示される：

  • フレックスコンテナの境界
  • 各フレックスアイテムの境界
  • 主軸（main axis）と交差軸（cross axis）の方向
  • アイテム間のギャップ

Stylesペインでの編集

flex関連のプロパティの横にはアイコンが表示される。クリックすると、視覚的なエディタで値を選択できる。

プロパティ エディタの内容
flex-direction row、row-reverse、column、column-reverse
flex-wrap nowrap、wrap、wrap-reverse
align-items flex-start、center、flex-end、stretch、baseline
align-content flex-start、center、flex-end、space-between等
justify-content flex-start、center、flex-end、space-between等

CSS Gridデバッグ

CSS Gridレイアウト用の強力なデバッグツールが用意されている。

Gridバッジ

display: gridが設定された要素には、「grid」バッジが表示される。

Gridオーバーレイ

有効化方法

  1. gridコンテナを選択
  2. 「grid」バッジをクリック
  3. またはLayoutタブで該当要素にチェック

オーバーレイには以下が表示される：

  • グリッドライン（番号付き）
  • グリッドトラック
  • ギャップ（溝）
  • 命名されたグリッドエリア

Layoutタブの設定

Layoutタブでオーバーレイの表示をカスタマイズできる。

オプション 説明
Show track sizes トラックサイズを表示（px、fr等）
Show area names grid-areaの名前を表示
Extend grid lines グリッドラインをコンテナ外まで延長
Show line numbers ライン番号を表示
Show line names 名前付きラインを表示

オーバーレイの色

Layoutタブで各グリッドのオーバーレイ色をカスタマイズできる。複数のグリッドがネストしている場合に便利。

コンテナクエリ

コンテナクエリを使用している要素には、「container」バッジが表示される。

確認方法

  • container-typeが設定された要素に「container」バッジ
  • @container ルールはStylesタブに表示
  • どのコンテナクエリが適用されているか確認可能

Subgrid

grid-template-columns: subgridやgrid-template-rows: subgridを使用している要素には、「subgrid」バッジが表示される。

オーバーレイを有効にすると、親グリッドのラインがどのように継承されているかを確認できる。

Layoutタブ

Elementsパネルの「Layout」タブでは、ページ上のすべてのFlexboxとGridコンテナを一覧表示できる。

機能

  • Grid: すべてのグリッドコンテナを一覧表示
  • Flexbox: すべてのflexコンテナを一覧表示
  • オーバーレイ設定: 表示/非表示、色のカスタマイズ

複数オーバーレイの同時表示

Layoutタブで複数のコンテナにチェックを入れると、複数のオーバーレイを同時に表示できる。複雑なネストされたレイアウトのデバッグに便利。

実践的なTips

なぜこのサイズになっているか

要素のサイズが予期しない場合：

  1. Computedタブでwidth、heightを確認
  2. box-sizingの値を確認（border-box vs content-box）
  3. 親要素の制約（flex、gridの設定）を確認
  4. min-width、max-width、min-height、max-heightを確認

要素が見えない原因を特定

要素が表示されない場合のチェック項目：

  • display: none
  • visibility: hidden
  • opacity: 0
  • width/height が 0
  • 親要素からはみ出している（overflow: hidden）
  • z-indexで他の要素の下に隠れている

Flexboxのデバッグ手順

  1. コンテナにflexバッジがあるか確認
  2. flex-directionを確認（rowかcolumnか）
  3. justify-contentとalign-itemsを確認
  4. 各アイテムのflex-grow、flex-shrink、flex-basisを確認
  5. オーバーレイで視覚的に確認
参考文献
[1] Inspect CSS flexbox layouts - Chrome DevTools. developer.chrome.com
[2] Inspect CSS grid layouts - Chrome DevTools. developer.chrome.com