CSS FlexBox インスペクタ: Flexbox レイアウトを調査する

草案
このページは完成していません。

FlexBox Inspector を使用すると、Firefox DevTools を使用して CSS Flexbox のレイアウトを調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。

flex コンテナの検出

ページ上の HTML 要素に display: flex が適用されている場合、flexbox のレイアウト機能に簡単にアクセスできるように DevTools にいくつかの機能が用意されています。

HTML ペインから

HTML ペインでは、flexbox コンテナを使用してレイアウトされた要素の横に flex という単語があります。

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

CSS ペインから

CSS ペインのルールビューでは、display: flex 宣言のインスタンスは flex という単語の隣に小さなフレックスボックスアイコン を表示します。アイコンをクリックすると、flexbox の子要素の詳細がどのように表示されるかを示すオーバーレイの表示が切り替わります。

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

アイコンをクリックすると、要素の上に表示されるページ上のオーバーレイの表示が切り替わり、グリッド線とトラックの位置が表示されます。

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

他の要素を選択するとオーバーレイが表示されるので、関連する CSS プロパティを編集して flexbox がどのように影響を受けているかを確認できます。

レイアウト Flex コンテナセクション

ページが1つ以上の flexbox コンテナで構成される場合、CSS ペインのレイアウトビューには、コンテナのコンポーネントを表示するための多数のオプションを含む「Flex コンテナ」セクションが含まれています。これらの詳細については、以下のセクションで調べることができます。

メモ: レイアウトビューはページインスペクタの右側のペインにあるレイアウトタブの下にあります。上記および以下のスクリーンショットは、これに到達する方法に関するさらなるヒントを与えるはずです。

Flex コンテナオプション

レイアウトビューの Flex コンテナセクションは次のようになります。

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

Flex Container セクションで変更できる設定は2つあります。

  • この例をクリックすると、オーバーレイの色を制御できます。カラースウォッチをクリックすると、カラーピッカーがポップアップし、オーバーレイの別の色を選択できます。
  • Flex コンテナセクションの右側にあるスイッチは、オーバーレイのオンとオフを切り替えます。

Flex コンテナプロパティ

flexbox の各コンポーネントには、要素名とそのクラス (存在する場合) を含む番号付きのエントリがあります。要素の上にカーソルを置くと、ページ上で強調表示されます。

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

アイテムをクリックすると、そのコンポーネントの詳細が表示されます。

このビューには、コンポーネントに関する3つの情報が表示されます。

  • コンポーネントの形状
  • ベースサイズ - 親による制約が課せられていないコンポーネントのサイズ
  • 最終サイズ - フレックスボックスによってサイジング制約が課された後にコンポーネントが持つサイズが適用されます。

セクションの上部に、選択された項目の名前は、flexboxコンテナのすべてのコンポーネントのドロップダウンリストです。

このドロップダウンを使用して、flexbox 内の他のコンポーネントを選択できます。

あわせて参照

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, silverskyvicto
最終更新者: mdnwebdocs-bot,