デベロッパーツールで CSS をいじる
この章のゴールは「デベロッパーツールを使って、CSS を直接変更する方法を理解する」ことです。
デベロッパーツールは Web サービスを開発する上で「必須で使う」と言っても過言ではないくらいの Web ブラウザの機能の１つです。
デベロッパーツールを使える・使えないで、開発効率が雲泥の差であるのでぜひ使い方を身につけていきましょう！
今回のデベロッパーツールの使い方解説は「CSS の直接編集」のみですが、他にも次のようなことがデベロッパツールで行うことができます。
- HTML の直接編集（文字や画像など、ページ上の表示内容を変更できる）
- JavaScript の実行
- JavaScript の無効化
- JavaScript のコードを途中で止める（ブレイクポイント）
- ネットワーク通信のやりとりの確認
- ネットワークのシミュレーション（オフライン状態、接続が悪い状態を擬似的に再現できる）
- クッキーやセッション情報の確認（ログイン情報やアフィリエイトなどで使う情報が確認できる）
上記で挙げた内容はあくまでも一部で、Chrome 拡張まで考慮するとデベロッパーツールで出来ることは膨大になります。
例えば、React や Vue の開発をサポートする Chrome 拡張をインストールすると、デベロッパーツールに React や Vue の開発をサポートする機能が追加されます。（Chrome 拡張は Chrome ウェエブストアからインストールできる）
動画解説
まとめ
デベロッパーツールを使って「CSS のスタイル定義を Web ブラウザ上でリアルタイムで変更する」ということを今回解説しました。
CSS でスタイル定義を行っていると次のような場面によく遭遇します。
- スタイルの細かい調整を行う（色の確認、マージンの確認など）
- スタイルがうまくあたっていないときの調査
これらの場面に遭遇したときに、デベロッパーツールを使えるのと使えないのとでは、開発効率が大きく変わってくるので、デベロッパーツールを普段から触って少しずつ慣れていっていただけたらと思います^^