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

Webページを触るなら基本のキ！各ブラウザの開発ツール(デベロッパー)を利用してページ内に使用されているHTMLタグやCSSセレクタを調べる方法です。

ブラウザ付属の開発者ツールを使用すればウェブページ内のどのパーツにどのようなHTMLやCSSスタイルが割り当てられているかが一目で分かり、マージンやパディングなどの値も確認できるうえ、目視チェックもしやすくなります。

またリアルタイムでCSSを変更してプレビューで確認したり、ページ内に使用されているセレクタ(ID属性やClass属性)を簡単に見つけることで、CSSに詳しくない人でも簡単に目的のパーツのスタイルを調整することができます。

HTMLやCSSができる人もできない人も"使える"開発ツールの初めての触れ方。

開発者ツールの機能は多すぎて到底書ききれないので、この記事では最も基本的な使い方であるCSSやHTMLタグの確認方法を主に記載しています。

また、CSSがあまり得意でない方でも見た目を変更したい箇所をピンポイントで指定できるコピーセレクター機能もご紹介！

この記事の目次

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

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をクリックする。
そしてテキストをメモ帳など、どこかに貼り付けてみてください。

#post-2480 h1

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

#が付くのはid属性で、<div id="">のような指定。
id属性は1ページ1つです。複数使用NGで個人番号のような感じ。

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

.が付くのはclass属性で、<div class="">のような指定。
class属性は1ページ複数使用可。苗字のような感じ。

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

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

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

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

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

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

#toc-widget-5 > ul > li:nth-child(1) > a

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

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

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

EdgeでWeb要素を調べる方法

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