サイトを作る際、テンプレートから作る場合でも、CSSを編集して自分好みのデザインにすると、オリジナリティがぐっと上がります。
しかし、CSSを編集したはずなのに、思ったようなデザインにならなかったり、編集が反映されていないように見えたり、そもそもどこをどう編集すればよいのか分からない場合もあります。
そんなときに便利なのがデベロッパーツール。Google ChromeやFirefoxなどのブラウザに備えられた開発者向け機能で、CSS関連では主に次のようなことができます。
- 現在閲覧しているページや、特定のパーツに、どんなCSSが適用されているかをチェック
- CSSの編集、書き足し、削除をした場合のプレビュー
- スマホから見た場合の画面プレビュー
実際にデベロッパーツールを使用している動画がこちら。
自分で作っているサイトのCSSを編集・即プレビューできるのはもちろん、他の人のサイトに適用されているCSSを覗いて、コードを参考にする、なんて使いかたもできる優れものです。
デベロッパーツールを使いこなせるようになれば、「ここのデザインを変えたいけど、どうCSSを編集したらいいのか分からない……」という場面はほぼなくなります！ 最初はとっつきにくいかもしれませんが、使いこなせるようになったら手放せませんよ！ この記事を見ながら、ぜひトライしてみてください。
デベロッパーツールの起動方法・終了方法
- Google Chromeの場合、F12キーを押すか、サイトのチェックしたい要素を右クリックして「検証」を選択すると、デベロッパーツールが起動します。
- Firefoxでは、同じくF12キーか、右クリックから「要素を調査」を選択で起動します。
すると画面が上下に分割され、下側にデベロッパーツールが現れます。
デベロッパーツールを終了したいときは、再度F12キーを押すか、デベロッパーツール右上の×アイコンをクリックして終了します。
デベロッパーツールの画面の見かた
デベロッパーツールの見かたを簡単に紹介します。文章で読むより自分で触ってみる方が理解できるので、恐れずいろいろ触ってみてください。
以下はGoogle Chromeの画面ですが、Firefoxでもおおむね同じ画面になっていますので、参考にしてください。
①検証したい要素を選択できるボタン
エリア左上の
このボタンをクリックすると、検証したい要素をクリックで選択できるようになります。検証したい要素をクリックすれば、その要素（例えばulリストやdivボックス）に、どんなCSSが適用されているかを見ることができます。
②適用されているCSS
要素を選択すると、その要素にどんなCSSが適用されているかが、右側に表示されます。また、どのCSSファイルの何行目あたりに記述があるかも確認できます。
このスクリーンショットでは、ol, ul のCSSが表示されているエリアの右上に、 style.css:39 と書かれていますが、これは「style.cssの39行目あたりに、ol、ulについての記述がある」という意味です。
③HTMLが表示されるエリア
ここにページのHTMLが表示されます。HTML記述をシングルクリックすると、その要素にどんなCSSが適用されているかが右側の②のエリアに表示されます。
また、HTMLの各行の左側にある横向き三角形マーク▶をクリックすると、要素が展開し、中に書いてあるHTMLも表示されます。ちょっと書き換えてみたいHTMLをダブルクリックすることで、HTMLを編集・プレビューすることもできます。
CSSを詳しく見てみよう
では、早速modernデモサイトを例に、デベロッパーツールを使ってCSSを詳しく見ていきます。
まずはタイトル部分のCSSを見ます。エリア左上のこのボタンをクリックしたら、サイトタイトル部分をクリックします。実際に操作しているところの動画を用意しましたので、操作を確かめてみてください。
選択したタイトル部分に、青とオレンジのハイライトが表示されました。
CSSが表示されるエリアにいろいろな記述が出てきましたが、取り消し線が付いている行もありますね。
取り消し線が付いている行は、CSSに記述されてはいるけど、現在は適用されていないという意味です。CSSが書かれているけど適用されない理由はいくつかありますが、だいたいはCSSの優先順位が関係しています。
また、要素を選択すると3色の異なるハイライトがつきます。青い部分は要素そのものの領域、緑はpaddingによる余白、橙はmarginによる余白を表しています。
デベロッパーツールでCSSをいじってみよう
では次はデベロッパーツールの目玉ともいえる機能、CSSの編集とプレビュー機能を使ってみます。
今回は、黄色の枠線がついている .box02 をいじってみます。カラム右側の、「枠のみボックスも使えます。これらのボックスは……」というテキストが入っているほうですね。
右下のCSSエリアにいろいろな記述があると思いますが、デベロッパーツールではこの記述の一部を削除したり、書き足したりして、実際にブラウザ上でどのような表示になるかを確認することができます。
特定のCSSを無効にしてみよう
上のスクリーンショットの、ピンク色の点線で囲ったエリアにカーソルを重ねると、CSS各行の左側にチェックマークが現れます。試しに一番上の border: 1px solid #fbe125; の行のチェックマークをクリックして、外してみましょう。
すると、選択しているdivボックスの黄色い枠が消えました。このように、デベロッパーツールではCSSを無効にするとブラウザではどう見えるのか、即座にプレビューすることができます。
もちろんプレビューするだけなので、実際のCSSファイルに変更が加えられたりすることはありません。
CSSを書き足してみよう
次はCSSを書き足してみます。.box02 { ～ } の中の適当な余白をクリックすると、1行空白が追加されます。
試しに、背景をピンク色にしてみます。 background と入力し、プロパティ（コロン : の左側）を確定したら、値（コロン : の右側）に pink と入力し、Enterキーで確定します。
すると、選択しているdivボックスの背景が pink になりました。
さらに、デベロッパーツールでは既存のCSSを書き換えることもできます。試しに一番上の行のborder: 1px solid #fbe125; をクリックしてみます。
すると、行が編集できるようになりました。この値を 2px dashed deeppink に変更してみましょう。
ボックスの枠のデザインが変わりました。このように、CSSを編集して即プレビューすることができるため、CSSをバリバリ編集したい場合には、とても便利です。
レスポンシブ対応デザインを検証してみよう
デベロッパーツールでは、スマートフォンやタブレットからページを閲覧した場合のデザインも検証することができます。
最初にデベロッパーツール最上部の左から二番目にある、モバイルのアイコンをクリックします。するとページのプレビューエリアが小さくなります。
さらにプレビューエリア上部にあるプルダウンから検証したいデバイスを選択すると、プレビューエリアのサイズがそのデバイスの画面サイズになります。「Responsive」を選択すると、画面サイズを自由に変更することができるようになります。
ただし、このレスポンシブ対応プレビューは、実際のブラウザでの表示とは少し異なる部分もありますので、あくまで参考程度にしてください。
終わりに：使いこなせば強い味方に！
デベロッパーツールはブラウザ上でCSSを編集・プレビューすることができる、サイト制作者にとってはとても便利なツールです。慣れないうちは扱うのが大変かもですが、ぜひ使いこなせるようになって、味方につけてください。
CSS編集にあたっては、こちらの記事も参考にしていただければ幸いです。
ガタガタ
このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。
※コメントは最大500文字、5回まで送信できます