超初心者向け！クロームのデベロッパーツールの基本操作

弊社カスタマーサポートに届くお問い合わせの中でも、HTMLやCSSにほとんど馴染みのない方やWordPress初心者の方からの質問に多くあるのが、「文字の色やサイズを変更したい」「背景色を変更したい」等です。この類の変更はCSSを編集することで解決できます。また弊社テーマの多くには「カスタムCSS」という機能を実装しております。

上記の機能を活用することで、簡単にCSSを編集することが可能です。ただ、CSSのどこを編集すればいいのかをコードを見ながら探すのは骨が折れる作業です。そこで役立つのがデベロッパーツールです。本稿では、数あるブラウザの中でも機能性・速度の点から、国内では2019年現在、最も高いシェア率を誇るGoogle Chromeのデベロッパーツール（開発者ツール）の活用法についてご紹介いたします。

デベロッパーツールとは

デベロッパーツール（本項ではGoogle Chromeの検証機能）は開発者ツールとも呼ばれていて、ウェブサイトを開発、運営している人にとっては、効率よくウェブサイトの修正や更新行うことができ、業務の時間短縮にも繋がる便利なツールです。

今ではほとんどのブラウザで無料のデベロッパーツールが利用できますが、特にクロームのデベロッパーツールは非常に機能が豊富で、利用している人もかなり多いです。

デベロッパーツールで具体的に何ができるようになるのか

• 特定の場所のHTMLやCSSがどのように反映されているかスピーディーに調べることができる。
• CSSがリアルタイムで擬似反映され視覚的にわかりやすく再現できる。
• 他のサイトのコードがすぐにわかり、その記述を応用することで自分のサイトでも同じように表示できる。
• エラーが出ている部分を確認できる。

上記以外にも、使わなきゃ損といっても良いぐらいの機能が豊富にございます。

デベロッパーツールの使い方

デベロッパーツールには数多くの機能がございますが、今回は冒頭でも述べた通り、HTMLやCSSの簡単な編集等、初心者でもここを抑えておけば便利という機能をご紹介いたします。

起動方法

ウェブサイト上のどこかで右クリックし、「検証」をクリックします。今回はWordPressテーマ「ROCK」(tcd068)を例に説明していきます。

それぞれ下記のショートカットキーでも起動できます。
Windows：F12キー
Mac：Command＋Option＋Iキー

すると下記のような画面が表示されます。

デベロッパーツールを表示する場所は下記画像(右上拡大)の赤丸箇所にて任意に変更可能です。
「Dock side」の表示が現れ、左側から順に「別ウィンドウで表示」「左側に表示」「下に表示」「右側に表示」が選択できます。

スマホ表示をPC画面上で再現するエミュレーター機能

実機が手元になくてもスマホやタブレット表示を再現できます。
※エミュレーターで再現できない部分（Safariでの標準対応もしくは表示のクセ）もあるので、手元に実機がある場合は実機での確認をおすすめ致します。

1. 下記画像の右のアイコンをクリックします
2. 画面上部のセレクトメニューから、エミュレーションしたいデバイス(iPhone6/7/8など)を選択します。

CSSの編集確認方法

下記の方法で編集を加えても、実際のページに適用されるわけではなく、擬似的に変更を反映しているだけですので、ブラウザの更新ボタンを押せば元に戻ります。表示が崩れたりしても何の問題もございません。

基本操作

①デベロッパーツールの左上にある要素を選択するアイコンをクリックします。

②CSSの編集したい箇所を、Webページ上で選択します。
③ツール上部に選択した要素のHTMLがマークされ、下部には適用されているCSSが表示されます。

④編集したCSSは、リアルタイムで反映されますので簡単にチェック可能です。

※カラーの変更には、カラーピッカー機能も便利です。
色名が表示されている部分の左側の□をクリックすると、候補となる色が一覧表示されます。候補色をクリックすると、選択中の要素へ適用された状態を確認できます。

サイズや位置等を変更

数値の微調整ができる機能は、とても便利です。margin や padding の位置等を細かく指定する必要がある場合は、CSSファイルを編集してプレビューを見て…と繰り返すよりも、下記の画面で値を変更しながら確認すると効率的です。数値は上下キーで1ずつ変更できます。

打ち消し線の意味

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

この例だと158行目で指定した margin-bottom: 0; が打ち消されています。
1120行目にあるmargin-bottom: 39px; の方が優先順位が高いため、前者が適応されていないわけです。
CSSでは下の行に書かれている指定のほうが優先されます。

※CSSファイルの何行目なのかはここで判断できます。

ワンタッチで検証

上記の「Styles」タブに表示される各プロパティーの左側にカーソルを合わせるとチェックボタンが現れます。このチェックを外すとそのCSSを反映しません。

何か表示がおかしい時など、どこの記述が原因かを検証する時に使える便利な機能です。

編集したCSSを保存する

デベロッパーツールはあくまで検証のためのツールで、擬似的に再現されているだけですので、編集したCSSはその都度別に保存する必要があります。「Styles」タブのCSSは通常のテキストと同様、ドラッグして選択、コピーが可能なので、忘れずに保存しましょう。また保存したCSSを冒頭で述べたカスタムCSSのエリアにそのままペーストするだけで、簡単にCSSを反映できます。

まとめ

今回は初心者向けに、文字のサイズやフォント、行間などをデベロッパーツールを用いて簡単に編集する方法をご紹介して参りました。最低限この操作方法を覚えるだけでも、ちょっとした編集なら簡単にできてしまうのではないでしょうか。デベロッパーツールを用いてHTMLやCSSの反映をスピーディに確認できることで、カスタマイズの大幅な時間短縮にもなります。その他にもデベロッパーツールには紹介しきれないほど、多様な機能があります。JavaScriptなどの検証も可能です。少しずつ使いこなせる機能を増やしていきましょう。

開発者ツールに関する記事一覧