サイトに使われているCSSやHTMLをブラウザの開発者ツールで確認する方法。

CSSやHTMLタグをブラウザで確認する方法

はじめに...当記事では以下のような内容を解説しています。

開発者ツールを使うことで、リアルタイムでCSSを変更してプレビューで確認したり、コピーセレクター機能でページ内に使用されているセレクタ（ID属性やClass属性）を簡単に見つけることができます。

コピーセレクター機能を使えば、CSSにそれほど詳しくない人でも目的のパーツのCSSを確認でき、変更することができるはずです。

開発者（デベロッパー）ツールとは？

開発者（デベロッパー）ツールとは、その名の通りWeb開発に携わる人向けのツールで、最近のブラウザにはWeb開発時に便利なツールがデフォルトで入っています。

開発者ツールではHTMLやCSSのプレビューができるほか、Webページを構成している要素（画像やスクリプト）の読み込み時間の計測や、Javascriptの動作状態などWebページに関するあらゆる情報を解析することができるツールも入っています。

全ての機能を書きだすと膨大な量になるので、今回はChromeをメインにHTMLやCSSを確認する方法を解説します。今のEdgeの使用感はChromeとほとんど同じです。

また、Firefoxも味付けは違いますが、使える機能はChromeと同じものが多いです。

ChromeでWeb要素を調べる方法

Google Chromeの開発者ツールでWebの要素を調べる方法を見ていきましょう。

Chromeは検索エンジン世界トップのGoogleが開発したブラウザであり、Webページの開発には持って来いです。検証機能がピカイチで、拡張機能も豊富です。

また、Chromeの開発者ツールはデフォルトでは英語表記ですが、言語設定から簡単に日本語に変更することも出来ます。

Chromeの開発者ツールの起動方法

Chromeで開発者ツールを起動する方法は主に以下の３つです。

どれでもOKですが、簡単なのはサイト上で右クリック→検証だと思います。

HTMLやCSSタグなどの要素を確認したいページをクロームで開いて、右クリック。
出てきたメニューの「検証」を押せばChromeの開発者ツールが起動します。

サイト上のHTMLやCSSを確認する方法

開発者ツールを起動すると、Chromeの右側に以下のような画面が出現します。

開発者ツール画面左上の矢印マークを押す

画面に開発者ツールの画面が立ち上がるので、画面左上の矢印をクリック。
クリックして有効にすると、アイコンが青色になります。

調べたい要素にマウスオンすればHTMLやCSSが確認できる

あとはこの状態でWebページ内の調べたい箇所にマウス載せると、上の画像のように要素の周りにあるパディングやマージンが表示されます。

タグ名や、要素の横幅×縦のピクセル。その要素のCSSの内容も確認できます。
各項目の内容は以下のような感じです。

色々な情報が確認できますが、HTMLタグとid名やclass名、カラーコードとフォントサイズくらいがよく確認する項目になるかと思います。

慣れてくればパディングやマージンの調整時にも開発者ツールは便利です。

要素はHTMLタグにマウスオンしても確認可能

先ほどは閲覧しているサイト上の項目にマウスオンして、その要素を検証しましたが、開発者ツールのHTML（ソース）が表示されている所にマウスオンしてもOKです。

開発者ツールのソース表示部分にマウスオンしてもOK

これで対応した各要素（HTMLやCSSタグ、画像URLなど）の情報が表示されます。
（例ではタイトルに使用されているh1タグにマウスオン）

要素のCSS（スタイル、見た目）はその下の画面に表示されます。

検証した要素に当てられているCSS

ここを見ればマウスオンした要素にどのようなCSS（スタイル）が当てられているのか、そのCSSはどこから読み込まれているのかが確認できます。

開発者ツールからCSSを一時的に変更する方法

開発者ツールでは、CSSエリア（Stylesタブ）を編集することで、直接Webページを見ながらCSSを変更した様子をプレビューしながら確認することが出来ます。

colorとbackgroundを指定してみた

ここを色々変更して好みのCSS（見た目）を決める感じですね。
例えば「font-size:xx-large;」と打ち込めばその要素の文字が大きくなります。

各CSSプロパティ（positionやcolorなど）はプロパティ名左にあるチェックマークをON、OFFすることでそのCSSを有効化、無効化したプレビューを確認できます。

なお画像のbackgroundプロパティのように打ち消し線が入っているプロパティは、他の部分で指定されているので上書きされて無効になっていますという意味です。

Stylesタブ以外も適宜活用する

ここまで説明したタブは「Styles」でしたが、その隣の「Computed」タブでは要素のパディングやマージンなどを一目で確認することができます。

Computedタブでは余白のpxなどが確認可能

このような情報も参考に、自分のサイトにあったCSSを決めていきましょう。

目的のCSSセレクタを抽出する方法

ブラウザ上でCSSを編集しても確認ができるだけでサーバー上には保存されません。
気に入った！実際にサイトにCSSを反映させたい！という場合にどうするか？です。

CSSが分かる方ならスタイルを適用したい目的の要素（idやclass）にプロパティを当てるだけなのですが...これが初心者の方には難しいはずです。

そんな時、CSSセレクタの指定方法（どのidやclassを指定するのか）が分からない！という方にお勧めの方法があります。

それが開発者ツールの“コピーセレクター”という機能です。

コピーセレクターの使い方

例として、先ほどマウスオンで確認した記事タイトル（h1タグ）の文字色を変更したい...！こんな場合を想定してコピーセレクターの使い方を見ていきましょう。

まずは目的のCSSを変更したい要素を見つけます。

変更したい要素を右クリック ＞ Copy ＞ Copy selector

続いて、CSSを変更したい目的の要素の上で右クリックを押します。
するとメニューが出るので、

をクリックします。これで目当てのセレクタがクリップボードにコピーされます。
あとはどこか（メモ帳など）に“貼り付け”してみて下さい。

というセレクタが抽出できました。これがこの記事のタイトルタグに当てられているCSSセレクタです。

抽出したセレクタにcolorプロパティを指定

こちらをサイトのCSSを管理している.cssファイルに書き込みます。
（Wordpressならテーマエディターでstyle.cssを開いてCSSを追記すればOK）

そして保存したら、ページをリロード（更新）します。
キャッシュを考えて、念のため「shift＋F5」でスーパーリロードして下さい。

狙った要素にCSSが反映された！

狙ったところ（h1タイトルタグ）の文字が赤色になりました。
CSSが分からないなら、セレクタの指定方法が分かるまでこのコピーセレクター機能を使えば、比較的簡単に目的の要素のCSSを変更することが出来るはずです。

コピーセレクター機能を使う時の注意点として

のようにchild(1)などのセレクタが含まれている場合、○○の中の○○の何番目の要素という指定方法で、変動してしまう可能性があるので注意しましょう。

ここまで絞り込んで指定しなくていい場合がほとんどなので、確認しながら進めると良いです。そのうち指定方法も慣れてくるはずです。

id属性とCSSの指定方法

CSSを開いた時、名前の前に「#」が付いているのはid属性です。
HTMLタグでidを指定するときは以下のような感じに書きます。

<h1 id="entry-title">～h1タグの中身～</h1>

<div id="menu">～div要素の中身～</div>

それぞれ「entry-title」と「menu」がid名という感じです。

この部分にCSSを当てたい時は、

#entry-title{
 font-color:red;
}
#menu{
 font-size:20px;
}

という感じに指定します。idはCSSでは#で指定という事を覚えておきましょう。

class属性とCSSの指定方法

続いてclass属性について。
CSSを開いた時、名前の前に「.」が付いているのはclass属性です。

HTMLで書く時は以下。

<h1 class="entry-title">～h1タグの中身～</h1>

<div class="menu">～div要素の中身～</div>

これにCSSでスタイルを当てたい時は以下のような感じになります。

.entry-title{
 font-color:red;
}
.menu{
 font-size:20px;
}

「.sample > .mokuzi > li.aaa > a」のように絞り込んであげると一か所になります。

はじめてだと難しいと思いますが、Chromeの開発者ツールでCSSが変更されるかどうかを確認しながらセレクタを指定していけばそのうち慣れてくるはずです。

EdgeでWeb要素を調べる方法

EdgeはMicrosoftが開発したブラウザで、Windowsのデフォルトブラウザです。
Windows10でInternet Explorerが廃止されてこちらになりました。

現在のEdgeは、Chromeと同じChromiumと呼ばれるベースコードが使われているので、Edge使用感や開発者ツールの使用感はChromeにかなり似ています。
Chromeの開発者ツールが使えるならEdgeも使えるので、詳しくは割愛します。

ページ上で右クリック ＞ 開発者ツールで調査する

要素を調べたいWebページで右クリック。
メニューの「開発者ツールで調査する」を押せば開発者ツールが起動できます。

EdgeのコピーセレクターもChromeと同じ使い方

先ほどのセレクターをコピーする機能も全く同じ！
画像の読み込みなどを検証するネットワークタブなんかも全て日本語です。

Edgeは日本語のChromeといった感じで、開発者ツールはIEと比べ物にならないほど使いやすくなりました。

FirefoxでWeb要素を調べる方法

最後にMozilla Firefox。
非営利団体が全ての人のために開発しているオープンソースのブラウザです。

少し前まではWeb開発環境としてかなり優秀だったのですが、ChromeとEdgeが強力になってきました。とはいえ味付けが少し違うだけで、十分使えます。

ページ上で右クリック ＞ 調査

開発者ツールの立ち上げ方法は同じ。右クリックして「要素を調査」で開けます。
メニューもどちらかというとサイト運営者というよりは閲覧者向けでしょうか。

Firefoxは開発者ツールの画面が下に出る

画像のようにメニューが下です。
各要素を囲んでいる領域の補助線まで表示されているので、Webページのデザイン用にいいかもしれません。

FireFoxでもコピーセレクターは使用可能

先ほどと同じようにセレクターコピーを試したのですが、FireFoxだけ抽出された結果が違いました。

とclass属性のはじめの部分しか抜けませんでした。

セレクターコピーはあくまでも目的のCSSセレクタを確認する時の参考ですが、FireFoxでセレクターを抽出する場合は特に注意が必要かもしれません。

まとめ

Chromeを中心に、Edge、Firefoxの開発者ツールを使ってHTMLタグやCSSセレクタを確認する方法の簡単なまとめでした。

開発者ツールについている各タブの内容まで書くと本が一冊出来上がってしまいそうなので、また時間があれば別の記事でご紹介します。

開発者ツールでスマホデザインも確認できる

開発者ツールではスマホデザインを確認したり、要素の読み込み順を追ったりとまだまだできることがありますので、タブを切り替えたりして色々試してみてください！

IE→Chrome→Firefox→Edge→Chromeとメインブラウザを変更してきた僕ですが、やはり拡張機能が豊富なChromeが使いやすいです。
今はChromeの開発者ツールも日本語に変更できるので、Chromeがおすすめです。

ではではこのへんで・ｗ・