デベロッパーツールがさらに便利に!Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
Post on:2021年4月26日
先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました!
1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。
![Flexboxの実装と検証が簡単に!Chrome デベロッパーツールの新機能Flexboxエディタとオーバーレイが便利すぎる](http://coliss.com/wp-content/uploads-202102/2021042601.png)
参考: New CSS flexbox debugging tools
Flexboxの新機能は非常に便利で、使い方も簡単です。
まずは、Chrome 90にアップデート済みか確認します。
![Chrome 90](http://coliss.com/wp-content/uploads-202102/2021042601-02.png)
Chrome 90にアップデート済みか確認
デベロッパーツールを通常通りに開きます。ElementsパネルからFlexboxで実装している要素を選択し、Stylesパネルを開きます。
![デベロッパーツールを起動](http://coliss.com/wp-content/uploads-202102/2021042601-03.png)
デベロッパーツールを起動
ページ上のHTML要素にdisplay: flex;またはdisplay: inline-flex;が適用されている場合、その横にflexバッジが表示されます。
![デベロッパーツールでdisplay: flex;をチェック](http://coliss.com/wp-content/uploads-202102/2021042601-04.png)
display: flex;の横のflexバッジをクリック
flexバッジをクリックすると、Flexboxエディタが起動します。Flexboxエディタでは、Flexboxの各プロパティを簡単に編集できます。
![Flexboxエディタ](http://coliss.com/wp-content/uploads-202102/2021042602.gif)
Flexboxエディタが開く
Flexboxの各プロパティについての詳しい解説は、以前の記事をご覧ください。
参考: CSS Flexbox の基礎知識と使い方をやさしく解説
FlexboxのオーバーレイはLayoutパネルにあります。Flexboxセクションがあり、ページ上のすべてのFlexbox要素を表示し、各要素のオーバーレイを切り替えることができます。
![Flexboxセクション](http://coliss.com/wp-content/uploads-202102/2021042601-05.png)
Flexboxを使用している要素がオーバーレイで簡単に分かる
sponsors