GoogleChromeには検証、いわゆるデベロッパーツールという便利な機能が備わっています。Webサイトの構成やCSSなどの検証が手軽にできるので、制作者にとってとても必要なツールです。今回は初心者向けに基本的な使い方を紹介していきます。
目次
Chrome デベロッパーツールの基本的な使い方！
デベロッパーツールとは、Googleが提供しているブラウザのChromeに付属しているツールの一つです。まずは、Chromeでデベロッパーツールを起動させましょう。
起動方法は、どこでもいいのでWebページ内を右クリックします。
するとメニューが表示されるので、表示メニューから【検証】をクリックします。
すると、このようにパネルが表示されます。これがChromeのデベロッパーツールです。
閲覧中のWebサイトのHTML・CSSソースを見たり、一時的に編集することが出来ます。
デベロッパーツールは、ショートカットキーを使って起動させることもできます。
Macの場合は「⌘」+「Opt」+「I」で起動できます。Windowsの場合は「F12」になります。検証機能はよく使うので覚えておくと便利ですね。
Chrome デベロッパーツール画面の基本の見方
左側の【Elements】タブではHTMLが表示され、右側の【Styles】タブではCSSが表示されています。メインで見ていくことになるので、はじめのうちはこの2つを覚えていきましょう。
検証してみましょう！
まず、パネルの左上にある四角と矢印のアイコンをクリックします。これで選択モードとなるので、Webページ内でクリックした箇所のコードが見れるようになります。そして、検証したい箇所をクリックします。（今回はtreeのアイコンをクリックしています）すると、その要素のHTMLと、適応されているCSSが表示されます。
HTML【Elements】を展開する
「Elements」タブのコードの頭に表示されている▼をクリックするとHTMLが展開されます。すると中のコードの子要素を見ることができます。
階層が深い要素の場合、1つ1つクリックして要素を展開するのは大変です。右クリックし、表示されるメニューの中からExpand recursivelyをクリックすることで子要素を一気に展開することができます。
CSS【Styles】の見方と編集
次は「Styles」タブについて説明します。
①に書かれている「◯◯.css」は、このCSSコードが書かれているファイ
ル名を表しています。
②はCSSのセレクタが表示され、指定されているCSSの記載内容が表示されます。各プロパティーの左側にチェックボタンがあり、ここでチェックを外すとそのスタイルを非表示にできます。
また、どのようなCSSが当てられているのかを確認するだけでなく、編集をしながらどのように変化するのかを確認できます。色やフォントの指定を変えるとどう見えるかなどの検証や、margin や padding などの位置等の数値の微調整をすることも可能です。
細かく数値を指定する必要がある場合は、CSSファイルを編集してプレビューを見て‥と繰り返して操作するのは手間です。
それよりもデベロッパーツールで数値を変更しながら、Webページを確認していくと効率よく作業が進みます。数値は上下キーで１ずつ変更できます。
新しくCSSプロパティを追加したいときは、要素のカッコ内のコードの「;」の後ろあたりをクリックします。これで新しいプロパティと値が入力できるようになります。入力したデータは開いているWebページにそのまま反映される形になっています。
③のようにCSSの一部に打ち消し線がついている場合があります。この場合は、なにかしらの理由でそのCSSが適応されていないということになります。
同じプロパティーの指定がその要素にいくつかあり、優先順位が低くなるため適応されていないという場合が多いです。
CSSでは下の方に書かれている指定のほうが優先されます。
編集したCSSを保存するには
Chromeのデベロッパーツールは検証のためのツールです。Webページを再読み込みしてしまうと編集したスタイルは全てリセットされるので注意しましょう！
編集した【Styles】タブのCSSを保存したいときは、編集したスタイルをコピーして、CSSファイルにペースト（貼り付け）して書き換えたスタイルを保存することが必要です。
通常のテキストと同じで【Styles】タブのCSSも、ドラッグで選択しコピーができます。CSSファイルに忘れずに保存するようにしましょう。
別のデバイスサイズでの表示を確認してみましょう！
Chromeのデベロッパーツールではスマートフォンやタブレットなど、別のデバイスででどう見えるのかも検証できます。
パネルの左上にある2つの四角が重なったようなアイコンをクリックします。
そして画面上に表示される[Responsive▼]をクリックすると端末名が表示され、デバイスサイズを選択可能です。
また、画面上の一番右の回転ボタンを押すことで、縦向き（ポートレート）と横向き（ランドスケープ）を簡単に切り替えることが可能です。
レスポンシブデザインを作るときには大活躍すること間違い無しの機能ですね。
Chrome デベロッパーツールでサイト制作を効率よく進めよう！
今回の記事ではデベローッパーツールの基本的な使い方を初心者向けに解説しました。デベロッパーツールは非常に便利で多機能です。HTMLの編集やJavaScriptなどの検証をすることもできます。まずは操作に慣れていきましょう！そして、使える機能を少しずつ増やしましょう。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
