コーディングや開発をする方なら、日頃からGoogleChromeの検証ツールはよく使われていると思います。
今回はレスポンシブデザインを確認する時に、個人的に便利だと思っている検証ツールの小ネタを紹介したいと思います。
レスポンシブモードを有効にする🖥️
右上の「デバイス切り替え」アイコンをクリックします。
ブラウザ表示がレスポンシブ表示に切り替わります。
レスポンシブモードのオプション🛠️
デバイスのフレームを表示
右上の縦の三点リーダーアイコンをクリックして「デバイスのフレームを表示」を選択します。
対応している一部の機種に限りますが、表示しているデバイスのフレームが表示されます。
メディアクエリを表示
右上の縦の三点リーダーアイコンをクリックして「メディアクエリを表示」を選択します。
この機能を有効にすると、サイト上で使用しているメディアクエリを視覚的に表示してくれます。
サイズの指定方法の違いが色ごとにわかりやすく表示されます。
| 青 | max-width（**px以下） |
| 緑 | max-widthとmin-widthを使用（**px以上、**px以下） |
| オレンジ | min-width（**px以上） |
スクリーンショットをキャプチャ
表示中のレスポンシブサイズのスクリーンショットを撮影してくれます。
ブラウザ拡張などでスクリーンショットを撮影している方も多いかと思いますが、ブラウザのデフォルト機能だけでスクリーンショットを撮影できるので手軽に使えます。
また「デバイスのフレームを表示」が有効で、フレームが表示されている場合、フレーム込みでスクリーンショットが撮影されるので、撮影後に別アプリなどでモックにはめ込む作業も必要ありません。
表示端末の追加📲
レスポンシブモードでシミュレートできるデバイスの追加も可能です。
ツールバー上部の[サイズ]をクリックしてデバイス一覧を開き、[編集]をクリックします。
好きなデバイスや自分でカスタマイズしたデバイスを追加することもできます。
特殊な環境やサイズのデバイスを追加する際に、非常に便利な機能になっています。
検証ツールは奥が深い…
レスポンシブのデザインやコーディングをする機会は多いと思います。
地味な機能の紹介ばかりですが、少しでも検証ツールの機能を活用して効率よい作業の手助けになればと思います。
そして、検証ツールには他にも数え切れないほどの機能があるので、今後も少しずつ紹介していけたらと思います…🫠