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

chromeで要素を調べる4

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

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

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

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

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

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

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

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

開発者ツールとは?

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

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

ChromeでWeb要素を調べる方法

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

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

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

chromeで要素を調べる1

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

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

chromeで要素を調べる2

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

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

chromeで要素を調べる3

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

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

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

chromeで要素を調べる4

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

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

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

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

chromeで要素を調べる6

colorとbackgroundを指定してみた

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

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

chromeで要素を調べる7

Computedタブで余白を確認する

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

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

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

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

chromeで要素を調べる8

要素を右クリック > 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」のように絞り込んであげると一か所になります。

chromeで要素を調べる9

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

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

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

chromeで要素を調べる10狙ったところ(h1タイトルタグ)の文字が赤色になりました。

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

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

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

chromeで要素を調べる11

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

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

EdgeでWeb要素を調べる方法

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

edgeで要素を調べる1

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

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

edgeで要素を調べる2

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

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

FirefoxでWeb要素を調べる方法

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

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

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

firefoxで要素を調べる1

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

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

firefoxで要素を調べる2

開発メニューが下にある

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

firefoxで要素を調べる3

FireFoxの開発者メニュー

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

.entry-title

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

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

まとめ

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

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

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

-Webブラウザ
-

© 2021 ソロ学