Webページに使われているCSSやHTMLをブラウザで確認する方法！Chrome、Edge、Firefoxの開発ツール。

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

Chromeを中心に全ブラウザ分書こうと思いましたが、ブラウザの味付けが違うだけでメニュー自体は似ていますのでEdgeとFirefoxは少し割愛しました。
実際にいろいろ触っていただくほうが分かりやすいと思います。

開発者ツールとは？

その名の通りWeb開発に携わる人向けのツールです。最近のブラウザには高性能なWeb開発用のツールがデフォルトで入っています。

HTMLタグやCSSスタイルの確認プレビューが基本機能でありながら、Webページを構成している要素（画像やスクリプト）の読み込み時間の計測や、Javascriptの動作状態などWebページに関するあらゆる情報を解析することができるツールです。

ChromeでWeb要素を調べる方法

クロームは言わずと知れたGoogleが開発したブラウザです。
われわれ日本人にとって一番の難は開発者ツールが英語表記であるという点。

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

Chromeの開発者ツール(デベロッパーツール)の使い方

Webページで右クリック ＞ 検証(I)

HTMLやCSSタグなどの要素を確認したいページをクロームで開いて、右クリック。
メニューが出るので一番下の「検証」をクリック。

メニュー左上の矢印マーク

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

調べたい箇所にマウスカーソルを置く

あとはWebページ内の調べたい箇所にマウスを持っていくと、画像のように要素の周りにあるパディングやマージンが表示されます。

また画像の赤枠のところのように、使用されているタグ名や横幅×縦のピクセル、その他当てられているCSSの内容も確認できます。

開発ツール内のタグにマウスを当てた時

開いた開発ツール画面内の各要素（HTMLやCSSタグ、画像URLなど）にマウスを当てても、Webページ内の該当箇所の情報が表示されます。
（例ではタイトルに使用されているh1タグにマウスオン）

その個所に使用されているCSSもこちらの画面で確認できます。

開発画面に表示されているCSSエリア（Stylesタブ）をブラウザ上で編集することでWebページを見ながらCSS要素などを調整することが可能です。

colorとbackgroundを指定してみた

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

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

Computedタブで余白を確認する

先ほどCSSを編集していたタブはStylesでしたが、隣のComputedタブをクリックすると要素のパディングやマージンなどを一目で確認することができます。

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

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

CSSが分かる方ならスタイルを適用したい目的の要素(idやclass)を指定してプロパティを当てれば良いのですが、初心者の方でCSSセレクタの指定方法(どのidやclassを指定するのか)が分からない！という方にオススメ！

要素を右クリック ＞ Copy ＞ Copy selector

例えば、先ほど開発者ツールを起動後にマウスオンで確認した記事タイトル(h1タグ)の文字色を変更したい！という場合。
開発画面でCSSを変更したい目的の要素の上で右クリック。
メニューが出るのでCopy ＞ Copy selectorをクリックする。
そしてテキストをメモ帳など、どこかに貼り付けてみてください。

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

基本的にidを指定すると見た目などが変更される個所は一か所です。

classのみ指定すると見た目などが複数個所変更される可能性あり。
「.sample > .mokuzi > li.aaa > a」のように絞り込んであげると一か所になります。

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

こちらをサイトのCSSを管理している.cssファイルに書き込みます。
(WordPressならテーマエディターでstyle.cssを開く)

そして保存したら、ページをリロード(更新)します。
キャッシュが悪さをする可能性があるので「shift＋F5」でスーパーリロードする。

狙ったところ(h1タイトルタグ)の文字が赤色になりました。

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

のようにchild(1)などのセレクタが含まれている場合、○○の中の○○の何番目の要素という指定方法で、変動してしまう可能性があるので注意しましょう。
ここまで絞り込んで指定しなくていい場合がほとんどなので、確認しながら進めると良いです。
そのうち指定方法も慣れてきます！

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

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

EdgeでWeb要素を調べる方法

Microsoftが開発したブラウザで、Windowsの初期ブラウザでもあります。
Windows10でInternet Explorerが廃止されてこちらになりました。
開発者ツールがIEよりも随分使いやすく、パワフルになりました。
Chromeとかなり似てますが日本語です！
英語ダメ！という方はこちらがオススメです。

Webページで右クリック ＞ 開発者ツールで調査する(N)

Edgeも使い方はほぼ同じ、要素を調べたいWebページで右クリック。
メニュー一番下の「開発者ツールで調査する」をクリックすればWeb開発ツールが立ち上がる。

メニューもChromeの日本語版という感じ

先ほどのセレクターをコピーする機能も全く同じ！
画像の読み込みなどを検証するネットワークタブなんかも全て日本語。
日本語のクロームといった感じで開発者ツールはIEと比べ物にならないほど使いやすくなりました！

FirefoxでWeb要素を調べる方法

最後にMozilla Firefox。非営利団体が全ての人のために開発しているオープンソースのブラウザです。
ネットサーフ時などはトラッキング広告を自動でOFFにしたりと、まさに使う人のために開発されているといった感じ。

少し前まではWeb開発環境としてかなり優秀だったのですが、ChromeとEdgeが強力になってきました。

とはいえ味付けが少し違うだけで、十分使えます。

Webページで右クリック ＞ 要素を調査(Q)

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

開発メニューが下にある

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

FireFoxの開発者メニュー

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

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

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

まとめ

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

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

筆者はIE→Firefox→Chromeとメインの開発ブラウザを変更してここまで来ましたが、Edgeは日本語版のクロームという感じでとても良さそうですね！
とはいえ英語で使い方を覚えてしまうとやはり拡張プラグインが豊富なChromeが効率的な気がします…慣れているだけか・ｗ・