Chromeのデベロッパーツールでflexやgridのデバックが簡単にできます

## これはなに？

2022年にInternet Explorerのサポートが終了してから、`display: flex;` や `display: grid;` でレイアウトを組むことが増えたのではないでしょうか。

https://developer.mozilla.org/ja/docs/Web/CSS/flex

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

ですが、はじめて使ってみようと思うとき、関連するプロパティが多くて、何がなんだか…となることもあると思います。
そんなときは、Chromeのデベロッパーツールを活用してみてはいかがでしょうか。

## 対象読者

- `display: flex;` や `display: grid;` でのレイアウトに不慣れな方

## `display: flex;` のデバック

デベロッパーツールで`display: flex;` のデバックができるようになったお知らせが出たのは2021年2月28日です。

https://developer.chrome.com/blog/new-in-devtools-90/#flexbox

### すでに`display: flex;`があたっている箇所のデバック

![すでにflexが当たっている箇所の画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/42cf62cd-e304-dfb0-363e-c435e075178f.png)
参照:[What's New In DevTools (Chrome 90) - Chrome for Developers](https://developer.chrome.com/blog/new-in-devtools-90/#flexbox)

HTMLタグの右側に `flex` というバッジが表示されます。
このバッジをクリックすると、`dislpay: flex;` のプロパティを上書きするための「フレックスボックスエディタ」が展開されます。

要素の並び順を指定したいときは `flex-direction` のアイコンを操作します。
折返しのデバックをしたいときは、 `flex-wrap` のアイコンを。
要素の位置の調整は、 `align-content` と `justify-content` を操作すると可能です。

### 新しく`display: flex;` を当てたい箇所のデバック

![新しくflexを当てたい箇所の画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/38e1a367-d05d-d662-439f-298e719ce01d.png)
参照:[What's New In DevTools (Chrome 90) - Chrome for Developers](https://developer.chrome.com/blog/new-in-devtools-90/#flexbox)

デベロッパーツールのLayoutパネルにあるFlexbox overlaysで指定すると、`display: flex;` に要素を上書きするとこができます。
あとはフレックスボックスエディタでレイアウトをデバックすることができます。

## `display: grid;` のデバック

デベロッパーツールでdisplay: grid; のデバックができるようになった知らせが出たのは2020年10月1日です。

https://developer.chrome.com/blog/new-in-devtools-87/

詳しい解説は2021年7月8日のこちらのdocsです。

https://developer.chrome.com/docs/devtools/css/grid/

サブグリッドについては2023年5月30日にお知らせが出ています。

https://developer.chrome.com/blog/new-in-devtools-115/

### すでに`display: grid;`があたっている箇所のデバック

![すでにgridがあたっている箇所の画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/6446efa8-bbd8-8ab7-8680-422968b1e3b1.png)
参照: [Inspect CSS grid layouts - Chrome for Developers](https://developer.chrome.com/docs/devtools/css/grid/)

flexと同様に、HTMLタグの右側に `grid` というバッジが表示されています。
バッジをクリックすると、上書きの表示に切り替わり、グリッド線とトラックの位置が表示されます。

![gridのバッジをクリックしたときの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/657c5622-5322-06f3-5909-e8ea3ce173d1.png)
参照: [Inspect CSS grid layouts - Chrome for Developers](https://developer.chrome.com/docs/devtools/css/grid/)

デベロッパーツールのLayoutパネルを開くと、グリッドを検証するためのオプションがあります。
`display: grid;` はこのパネルの表示を使うことで、概要を把握しやすくなります。

![gridのlayoutパネルの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/5010366a-57dc-71b6-200b-38060fc30b62.png)
参照: [Inspect CSS grid layouts - Chrome for Developers](https://developer.chrome.com/docs/devtools/css/grid/)

1. ドロップダウン
    - Hide line labels: ラインラベルを非表示にします
    - Show lines number: ライン番号を表示します
        - `grid` のバッジをクリックしたとき、デフォルトでこの表示になります
    - Show line names: ライン名を表示します
1. チェックボックス
    - Show track sizes: トラックサイズの表示・非表示を選択できます
        - `grid-template-columns` などで指定したトラックのサイズを確認できます
    - Show area name: エリア名の表示・非表示を選択できます
        - `grid-area` で指定したエリア名を確認できます
    - Extend grid lines: チェックを入れると、ビューポートの端まで、グリッドラインを延長して表示できます

### グリッドエディタでコンテンツの位置を編集する


1. Stylesパネルの中の `display: grid;` の右横にあるグリッドエディタのアイコンをクリックします
![グリッドエディタについて](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/69762e8a-bb01-1d14-5099-11e1bac4881a.png)
2. グリッドエディタが展開され、グリッドのitemやcontentの位置を簡単に編集することができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/888d7064-c9ce-a795-8c68-24c0230f4cf2.png)

画像の参照: [Inspect CSS grid layouts - Chrome for Developers](https://developer.chrome.com/docs/devtools/css/grid/)

## :warning: 注意

便利すぎて、うっかり初期値を入力してしまうことがあります。
コードは少ないほうが見通しが良いと思うので、不要な初期値は記入しないように注意してください。

何が初期値なの？っていう方は、少し乱暴ですが、「デバッグツールで何もハイライトがあたっていない状態 = 初期値」 と認識しても大丈夫そうです。

初期値の解説は[MDN Web Docs](https://developer.mozilla.org/ja/)を参照しています。

https://developer.mozilla.org/ja/

### `display: flex;` の初期値

![flexの初期値](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/283f50e5-6dfa-8ea8-e15b-8b3b148c69ee.png)

* `flex-direction: row;`
    * 横に要素を並べる
* `flex-wrap: nowrap`
    * 要素を折り返さない
    * フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります
* `align-content: normal`
    * 各アイテムは `align-content` の値が設定されていないかのように、既定の位置に寄せて配置されます
* `justify-content: normal`
  * 各アイテムは `justify-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの `stretch` として動作します
* `align-items: normal`
    * フレックスアイテムについては、このキーワードは `stretch` として動作します



### `display: grid;` の初期値

![gridの初期値](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215239/750df710-d7e9-2704-2753-b97cad49fb20.png)

- `align-content: normal;`
    - 各アイテムは `align-content` の値が設定されていないかのように、既定の位置に寄せて配置されます
- `justify-content: normal;`
    - 各アイテムは `justify-content` の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの `stretch` として動作します
- `align-items: normal;`
    - グリッドアイテムについては、このキーワードは `stretch` の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は `start` のように動作します
- `justify-items: normal;`
    - グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います

## まとめ

まずはデバックしたいHTMLタグの横にあるバッジをクリックしてみてください。
きっとあなたの助けになると思います。

この記事が誰かのお役に立てれば幸いです。