かなり頼れる!
 「Chrome」のDeveloper Tools

にいどめ

Webサイトを作成する時、どのブラウザをお使いですか?

私は長年Internet Explorerを利用していましたが、Webサイトを作るようになってから「GoogleのChrome」に変更しました。

なぜなら…
Chromeには優秀なDeveloper Tools(デベロッパーツール)があるから!




デベロッパーツール…

何をするためのツール?

現在表示しているページがどのような構成か確認するためのツールです。

Chromeをブラウザにするだけで即利用可能。
特別に何かをインストールする必要もなく、始めからChromeに備わっている機能です。

HTMLソースコードはもちろん、使っているフォントや色等のCSSコード、はたまたページのエラーまで知ることが出来ます。

もう少し柔らかく言うと……

HTMLソースコード
今表示しているページ全てをコンピューター言語にしたもの。
「投稿」に入力した内容も含まれますし、親テーマで組まれているプログラム等のコードも記述されています。
CSSコード
ここに表示されるCSSコードは「~.css」に記述している内容。
HTMLのソースコードにCSSのクラス名があるなら、そのクラス名で反映させる具体的なデザインが記されています。
ページのエラー
文字通り、ページ上のエラー。
「スクロールが遅くなりますよ」と言うアドバイス程度の警告から、「この記述は害を及ぼします」というエラーまで、ページを表示するにあたっての不具合を教えてくれます。
問題なく表示されているように見えても、内部ではエラーが起こっていた…なんてことも少なくありません。

私がDeveloper Toolsで見るのは、主にこの3項目。
使いこなしているとは言えませんが、ページ上に配置している要素、言わばパーツを調べる時はとても重宝しています。

ケムシ

そんなにパーツを調べる機会なんてある~?

WordPressの子テーマを使っていると調べる機会は多いですよ。

親テーマで配置されているものを変更したい時、配置されているものの名前を知らなければ、style.cssで変更を記述できないので…。
クラス名でstyle.cssのデザインを適用させますからね。

親テーマファイルの何がどのページか、どの名前が何をさしているか分かれば苦労はありませんが、初心者には何が何やらサッパリ…。

そういう時に、表示しているページから直接名前を探し出せるのがDeveloper Toolsというわけです。

なんと便利!

要素の名前を見つける方法

では例としてパーツの名前(class名やid名)を探してみましょう。
下図を見てください。

“灰色の枠線を赤線に変えたい”と思った場合、赤線のCSSコードをstyle.sccに記述するためにはクラス名を知らなければなりません。

まずは「この灰色の枠線がどのように構成されているか」を確認しましょう。

ページ上のどこでもいいので右クリックしてください。
出てきた一覧の中にある「検証」をクリック。これがDeveloper Toolsです。

右側に一見ややこしそうな画面が出てきましたね。
その部分が“現在表示しているページ”の情報となります。

分割画面の意味合いは下図の通り。

これを踏まえ、調べたいパーツを見ていきましょう。

Developer Tools画面の右上にある、下記アイコンをクリックしてください。

ポインターが白い矢印になります。
「どの要素(パーツ)を調べたいか」と聞かれた状態なので、調べたいパーツの上へ移動させてください。

今回は「灰色の枠線を赤線に変えたい」ので、「灰色の枠線」が囲っている場所へ動かします。

色が変わり、要素名が「div.box-10」と表示されました。
しかしこれが「~.css」ファイルに記述された名前ではありません。

「div.box-10」と表示されて色が変わっている部分をクリック
これで「灰色の枠線」についての情報が表示されます。

上がHTMLソースのコード、下が「~.css」ファイルに記述されているCSSコードです。

今回の例であれば、「.box-10」が名前となり、デザインを適用させていますね。

この中の「border:1px solid #eeece4;」が灰色の線を意味しています。
#6桁の英数字が色を指定している部分。
ですので、style.cssファイルに記述する場合は、赤色のカラーコード#ff0000へ変更した……

.box-10{ border:1px solid #ff0000; }

と書けば赤線に変わるというわけです。

もしこうして調べた名前でCSSが反映されない時は、HTMLソースコードも確認してみてください。
適用されている箇所をHTMLのコードで見ると、きちんと反映される別の名前が発見できるかもしれません。

ケムシ

でも変更する前にどんな雰囲気になるか確認したいな~

そういう場合、なんと直接Developer Toolsで試すことが出来ます。

ほんとに便利!

記述前にお試し表示が出来る

変更したいけど本当に見栄えがいいのか?と言う時、Developer Toolsに表示されているCSSコードを直接編集することでリアルタイムにプレビューすることが出来ます。

style.cssへ書き、FTPでファイルをアップロードしてWordPressの管理画面から確認…という手間が省ける時短機能として活躍すること間違いなしです。

使い方は至って簡単
まず先程のように変更したい箇所を選択し、右下に“適用されているCSSを表示”します。

変更したいCSSコードをクリックしてください。
すると、コードが選択状態となり、テキストのように編集できるようになります。

入力後にエンターを押せば入力した内容が確定し、左のページへ反映されます。

適用されているコードの編集は、今表示されていないCSSコードを追加することや消去することも可能!

ただし、
ブラウザ上で変更した箇所がstyle.cssへ上書きされるわけではありませんのでご注意ください。

style.cssファイルへの記述はご自身の手で。
ファイルを編集したらFTPでアップロードし、Webサイトに適用させてください。

ページを移動したり、再読み込みすると変更箇所はリセットされてしまうので、ページを切り替える前にstyle.cssへの入力をお忘れなく!

ケムシ

PCからはイイ感じに作れそうだけど、スマホだとどうなるんだろ~

そういう場合もDeveloper Toolsは応えてくれますよ。

どこまでも便利!

レスポンシブ表示をプレビュー

手持ちの端末が1種類の場合、他の端末でどう表示されるのか…自分では確認の仕様がありませんよね。
毎回友人に、「ごめん、私のサイト確認してくれない?」と頼むのも迷惑な話です。

そこで活躍するのがDeveloper Tools。
なんとレスポンシブ表示してくれる機能があるのです!


Developer Tools画面の右上にある、下記アイコンをクリックするとレスポンシブ表示モードに切り替わります。

登録されているディスプレイサイズは多種。
Padを含むiPhoneシリーズやGalaxy Sなど、様々なディスプレイで自分のWebサイトがレスポンシブ表示された時の状態を確認することが出来ます。

とは言え、さすがに網羅されているわけではないので、表示したいディスプレイサイズがある場合は、自分で数字を入力してディスプレイサイズを調整しましょう。

Chromeのアップデート時に種類が増えている場合もありますよ。

また、Developer Toolsにはどのファイルの何行目を読み込んでいるかまで教えてくれる機能もあります。
子テーマのstyle.cssだけでなく、親テーマの「~.css」を含めた全てのことを記述してくれるので、Webサイトを作る中できっと役に立つはず!
ぜひ色々な場所をクリックしてみてください。

実はこのようなデベロッパーツールはInternet Explorerにもあるのですが、私からすると圧倒的にChromeが優秀でした。

たぬき

stylesにコードは載っているのにCSSが反映されないんだけど…

たまに遭遇しますね。
原因はキャッシュにあるようですので、キャッシュをクリアして再読み込みしてください。

その他にもうまく効かない場合の事例を次のページで挙げてみましたので、問題がどこなのかを見つける糸口にどうぞ!




ご覧いただきありがとうございました!