BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
先日のGoogle Chromeのアップデート(Chrome90)によりデベロッパーツールに新たな便利機能が追加されました。

ボタン一つでFlexboxの実装・検証が可能になった

Flexboxの実装や検証に役立つ機能が追加されたことにより、初心者の方でも簡単にFlexboxを実装することができます。
デベロッパーツールなら実際のサイト上でどのような動きをするかを確認しながら設定できるので、かなり便利な機能になります。

今回追加された機能は2つになります。

  • Flexboxエディタの実装
  • Flexboxのオーバーレイ

使い方

まずは、Chrome90にアップデート済みか確認しましょう。
Chromeの「ヘルプ」→「Google Chromeについて」で確認できます。

Flexboxエディタの実装

キーボード「F12」でデベロッパーツールを開きます。

Flexboxを実装している要素を選択するか、要素にデベロッパーツール内でFlexboxを追加します。

ページ上のHTML要素にdisplay: flex;またはdisplay: inline-flex;が適用されている場合、その横にflexバッジが表示されます。


display:flex;の横にあるバッジをクリックすることで「Flexboxエディタ」が開きます。

flex-direction 主軸の方向や向き (通常または逆方向) を定義
flex-wrap フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定
align-content アイテムの間または周囲の間隔の配分方法を設定
justify-content 中身のアイテムの間や周囲に間隔を配置する方法
align-items 交差軸方向のアイテムの配置を制御

Flexboxのオーバーレイ

Flexboxを使用している要素がオーバーレイで簡単に分かる機能です。
FlexboxのオーバーレイはLayoutパネルにあります。

Flexboxセクションがあり、ページ上のすべてのFlexbox要素を表示し、各要素のオーバーレイを切り替えることができます。

まとめ

今回のアップデートはWeb制作初心者の方にとってはかなり良いアップデートだと思います。
Flexboxは慣れれば便利ですが、多くのプロパティがあるので覚えるのが大変です。
Flexboxエディタならボタン一つで簡単に実装できるので、ぜひ試してみてください!