Chromeデベロッパーツールとは

Google Chromeに標準搭載されている開発者用の検証ツールです。
Webサイトのパフォーマンス向上などを目的とした多くの機能がありますが、

主に、

に焦点を当てて説明します。

Chromeデベロッパーツールの起動方法

Google Chromeの右上の3点リーダーアイコン（・・・）から、[その他のツール] > [デベロッパーツール]をクリックします。

ショートカット(Windows)

Ctrl + Shift + i

ショートカット(mac)

command + option + i

表示位置は、画面下側の他に、画面の左側／右側／別ウィンドウ表示の4つのパターンに変更することが可能です。

セレクタモードアイコンをクリックし、青色にした状態でWebページの要素をクリックし、HTMLやCSSを確認します。

HTML、CSSを確認、仮編集＆確認するパネルです。
※現在の表示ページを仮編集するのみで、ページを再表示すると仮編集は破棄されます。

スマートフォン表示を確認したり、レスポンシブの確認などに使用します。

解像度を細かく指定する場合に使用します。

デバイスイメージで表示する場合に使用します。

縦表示、横表示を切り替える場合に使用します。