CSS
ChromeのデベロッパーツールでFlexboxの検証が便利に
2021年05月09日 10:00
こんにちは！社員Kです。
本日は、Chromeのバージョン90で、デベロッパーツールのFlexboxの検証機能が便利になったので紹介したいと思います。
もくじ
Chromeのデベロッパーツールの開き方
検証したい要素を右クリックして「検証」を選択
一番簡単な方法は、検証を行いたい要素（ブロックや画像）を右クリックして表示されるメニューから一番下の「検証」を選択するやり方です。
ブラウザ右上のメニューから「デベロッパーツール」を選択
サイトによっては右クリック禁止などのスクリプトによって右クリックメニューが表示できない場合があります。
そんなときには、ブラウザ右上のメニューから「その他ツール」→「デベロッパーツール」で開くこともできます。
ショートカットキーで開く方法
ショートカットキー「Ctrl + Shift + I」または「F12」キーを使うことでも開くこともできます。
ChromeやFirefox、Edgeなどでも共通なので、頻繁に使う場合はこの方法が素早く開けて便利です。
便利になったFlexboxの検証機能
選択した要素がFlexboxを使用している場合、下記のように「display: flex;」の横にアイコンが表示されるようになりました。
アイコンをクリックすると視覚的に縦方向(justify-content)や横方向(align-content)などのCSS指定を変更できるようになりました。
Flexboxは指定項目が多く覚えるのが大変ですが、今回のアップデートでとても便利になりました。
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
