今回は、デベロッパーツールを使って CSS を検証する方法と編集する方法をまとめてみました。
デベロッパーツールとは、Web ページを形作っている HTML や CSS、JavaScript などのコードの調査やデバッグなどを行うことができる Web 開発の手助けをしてくれるツールです。デベロッパーツールの起動方法や、基本的な見方については下の記事でまとめましたので、よかったら先にご覧いただけたらと思います。
※記事の内容は Chrome を例に記事をまとめています。
調べたい要素から
CSS を検証する方法
まず、調べたいなぁと思った要素から CSS を“検証”する方法を解説します。特に難しいことはありません。調べたい要素の上で右クリックして「検証」でデベロッパーツールが起動します。
ね？簡単でしょ？
CSS を検証するための
「要素」メインパネルと
３つのサブパネル
デベロッパーツールで CSS を検証するには“要素”が選択されたメインのパネルと、それに連動したサブのパネルを見ます。（メインパネル、サブパネルは、わかりやすいように私が勝手にそう呼んでいるだけです。正式な名前は不明です。）
「要素」メインパネル
デベロッパーツールのウィンドウの上部にある複数のタブのうち、ツール起動時に最初から選択されているのが「要素」です。HTML コードがツリー構造で表示されています。調べたい要素をクリックして選択すると連動してサブのパネルに任意の情報が表示されます。
そのサブパネルで、特に CSS を検証・編集する際によく使用するタブが、「スタイル」、「計算済み」、「レイアウト」かと思います。以下にそれぞれまとめてみました。
「スタイル」サブパネル
CSS を検証・編集するのに使用するタブです。
・どんなセレクタでスタイルが指定されているのか調べる
・どの CSS ファイルを参照しているのか調べる
・実際に CSS を編集する
という用途で使用するかと思います。特に編集は「スタイル」タブでのみ可能です。
「計算済み」サブパネル
実際に適用されているスタイルを調べることができます。パネル上部には、(いわゆる)ボックスモデルに関連したスタイルを視覚的にわかりやすく図にして見せてくれます。
「レイアウト」サブパネル
「flex」や「grid」のスタイルが適用されている“要素”を知ることができます。
ひとまずこの３つの機能を使いこなすことができれば、初心者としてはかなり心強いツールになるかと思います！他のタブは、Javascript やパフォーマンスなどワンランク上の Web 制作で使うと思いますので、後々身に付けたいものですね。
結構簡単！
デベロッパーツールで
CSS を編集する方法
デベロッパーツールを使って CSS を編集してみたいと思います。CSS を編集するには「要素」パネル内の「スタイル」パネルで操作します。
チェックを外して、スタイルを解除
スタイルが記述されているところにカーソルを合わせると、チェックボックスが出現します。そのチェックボックスのチェックを外したりつけたりすることで、一時的に任意のスタイルを解除したりできます。
デベロッパーツールで行った編集は、即座に Web ページにも反映されて、どのような影響があるかを視覚的にわかりやすく知ることができます。これがデベロッパーツールの醍醐味ですね！
また、チェックを外した時に、その該当スタイルは解除されますが、次に優先されるスタイルが適用されます。『スタイルを消したのだけど思った通り行かないなぁ？』というようなときに地道に探したりするような使い方もできますね。
既存のスタイルを編集する
編集したい“プロパティ”または“値”の上でクリックをすると編集できる状態になります。編集中、編集後、リアルタイムで Web ページに反映されるのですごく便利です。
“プロパティ”は入力補完もドロップダウンで表示されますし、スペルミスや存在しないプロパティだと打消し線で表示してくれるので、気軽に試せますね！
新規スタイルを追加する
スタイルが記述されているところでクリックすると入力できるエリアが出現します。追加される位置は、クリックした“行”の下に追加されるようです。任意のスタイルを入力してみましょう！（入力したら、エンターキーまたは Tab キーを押すと次の入力エリアに移動できます。）
ちなみにカラーなどはカラーピッカーが使えたりとデベロッパーツールならではの便利な機能がいろいろとあるようなので、使いこなしてより効率よく Web 制作を進めたいものですね！
また、スタイルの右下にある「＋」マークをクリックすると、要素メインパネルの HTML コードで選択している「要素」の「複合セレクタ（盛り盛りで）」で新規スタイルの欄が追加されるようです。
「複合セレクタ（盛り盛りで）」で、と書きましたが、これにより多少影響があります。デベロッパーツールを起動して何も編集していない状態では、スタイルは優先度順で表示されていますが、途中で追加したスタイルに関しては本来の優先度を参照して反映されるようです。
スタイルの優先順位をあまり知らずに、やみくもにいじっていると混乱する場合があるので要注意です。
「計算済み」パネルから
「スタイル」パネルに
移動できて結構便利
「計算済み」パネルは、実際に Web ページに適用されているスタイルを見ることができます。「計算済み」パネル上では、直接スタイルは編集できませんが、“矢印アイコン”をクリックすることで「計算済み」パネルに移動することができます。
プロパティの左側にある“三角アイコン”をクリックして展開すると、該当セレクタを指定しているスタイルが全て、優先度順で表示されます。その展開されたスタイルの“矢印アイコン”からも「スタイル」パネルに移動することが可能です。
「計算済み」パネルで、展開される前に表示されている“値”は、実際にデベロッパーツールによって最適化された“値”で表示されていますね。
また、展開されたスタイルの右側に表示される CSS ファイル をクリックすると、「ソース」メインパネルに移動することができます。
「ソース」メインパネルでは、ファイルのディレクトリや実際のソースコードを見ることができるようです。テストではなく、実際のファイルを編集するときにファイルの場所を探したりするのにも活用できますね！（本記事内容とは少しずれますのでさらっとだけ。）
まとめ
デベロッパーツールでスタイルを編集するには、「スタイル」パネルで行います。編集すると Web ページにリアルタイムで反映されて、どう修正すれば良いのか視覚的に知ることができて効率アップにつながります。
また「計算済み」パネルでは実際に適用されているスタイルを知ることができ、「レイアウト」パネルでは「flex」や「grid」が適用されている要素を知ることができます。上手に使えるようになれば Web 制作の心強い味方になるのは間違いなし！積極的に活用していきましょう！
また、しつこいようですが、デベロッパーツールで編集したスタイルは、あくまでブラウザ上で反映されただけの仮のものです。本番で更新するには実際のファイルをエディタなどで編集して、アップロード等する必要があります。
