皆さん、使っていますか？Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム！Chromeにデフォルトでついている機能なので、今すぐに使い始められますよ。また、「デベロッパーツールの存在は知っていてもどう使えばいいかわからない…」という方向けに、使いどころポイントも紹介します！

Chromeデベロッパーツールの基本的な使い方

まずはChromeでデベロッパーツールを起動させましょう。Webページ内のどこでもいいので右クリックし、「検証」を選択します。

すると、こんな感じでパネルが表示されます。これがデベロッパーツールです。英語だらけでびっくりしちゃうかもしれませんが、次第に慣れます（たぶん）。

デベロッパーツールはショートカットキーでも起動できます。Macは Shift + ⌘ + C、Windowsは Ctrl + Shift + C です。覚えておくと便利ですね。

デベロッパーツールの見方

最初に使うのは左側の「Elements」タブと右側の「Styles」タブ。はじめのうちはこの2つをメインで見ていくことになります。「Elements」タブではHTMLが、「Styles」タブではCSSが表示されます。

CSSを見てみよう

まずパネルの左上にある四角と矢印のアイコンをクリック。その後検証したい箇所をクリックします。すると、その要素のHTMLと、適応されているCSSが表示されます。

この例だと nav ul a に対して以下のCSSが加えられているのがわかります。

具体的なCSSの記述箇所をチェック

「Styles」タブのCSSが書かれている部分の右側には、その記述がされているCSSのファイル名と行数が表示されています。

こんな時に使える！

既存のHTMLテンプレートやWordPressテーマを使っていて、一部だけ色を変えたりスタイルを変えたいと思いCSSファイルを開いたものの…記述が多すぎて一体どこを編集すればいいのか悩んだことはありませんか？そんな時はこのデベロッパーツールを使って編集したい箇所を検証！ファイル名と行数をチェックして、その部分だけ編集すればいいですね！

CSSのエラーを教えてくれる

検証した時、プロパティーの横に三角アイコンが表示されることがあります。これは記述エラーで、スタイルが適応されていません。

こんな時に使える！

なんだかよくわからないけど、記述したCSSが適応されていない！そんな時も慌てずデベロッパーツールで検証です。スペルミスはないか？正しいプロパティーと値が記述されているか？再度確認してみましょう。

打ち消し線の意味

「Styles」タブで表示されるCSSの一部に打ち消し線がついている場合があります。これはなんらかの理由でそのCSSが適応されていないという意味です。多くの場合その要素に同じプロパティーの指定が複数あり、優先順位が低いため適応されていません。

この例だと287行目で指定した margin: 5px 0; が打ち消されています。これは958行目にあるメディアクエリーで指定した margin: 0 10px; の方が優先順位が高いため、前者が適応されていません。CSSでは下の方に書かれている指定のほうが優先されます。

スタイルを非表示に

「Styles」タブに表示される各プロパティーの左側にチェックボタンがあります。ここでチェックを外すとそのスタイルを非表示にできます。

こんな時に使える！

何か表示がおかしい時、どの記述が悪さしているのかを検証する時に使ってみてください。チェックを外して直ったなら、原因はその子です。

デベロッパーツール上でCSSを編集する

どんなCSSが当てられているかを確認するだけでなく、実際に編集してどう変化するのかを確認できます。今までの手順通り、検証したい箇所をクリックして「Styles」タブを表示させた後、値が書かれている部分をクリックすると入力できるようになります。

こんな時に使える！

色やフォントの指定を変えたらどう見えるかの検証でも使えますが、一番使えるのは数値の微調整です。margin や padding 、位置等、こまかく指定する必要がある時はCSSファイルを編集してプレビューを見て…と繰り返すよりも、デベロッパーツールで値を変更しながら確認すると楽です。数値は上下キーで1ずつ変更できますよ！

スタイルを追加する

検証した要素に新たにスタイルを追加することもできます。テキストシャドウ、ボックスシャドウ、文字色、背景色の4つは手軽に調整可能。CSSが書かれている欄の右下にある3つの点のアイコンにカーソルを合わせ、4つのアイコンが表示されるので、そこからそれぞれ設定できます。

その他のスタイルを追加

テキストシャドウ、ボックスシャドウ、文字色、背景色以外のスタイルも追加できますよ。閉じカッコの右あたりをクリックするとプロパティーを入力できるようになります。ここからプロパティーと値を追加しましょう。

別のデバイスサイズで検証する

デベロッパーツールではモバイルサイズでどう見えるのかも検証できます。検証するためのアイコンのすぐ右横にある、2つの四角が重なったようなアイコンをクリックして表示を変更しましょう。主要なモバイルサイズを選択可能です。

モバイルサイズだと縦長になるので、デベロッパーツールのレイアウトを変更するとより見やすくなります。レイアウトの変更はデベロッパーツールのパネル右上にある3つのドットをクリックしてDock Sizeを変更しましょう。

デベロッパーツールで編集したスタイルを保存するには

デベロッパーツールはあくまで検証のためのツールなので、ページを再度読み込むと編集したスタイルはリセットされてしまいます。そのため、デベロッパーツールで作成したスタイルはその都度CSSファイルにコピペして保存する必要があります。「Styles」タブのCSSは通常のテキストと同様、ドラッグして選択、コピーが可能なので、忘れずCSSファイルに保存しましょう。

今回はWebデザイナーが一番使うであろうCSSの検証・編集方法を紹介しました。デベロッパーツールは本当に多機能で、HTMLの編集やJavaScript、CSSアニメーションなどの検証も可能です。少しずつ使いこなせる機能を増やしていきましょう！