Webサイトのスタイル(css)をブラウザで調べる方法

WordPressにはユーザーが自由にサイトの見た目を変更するために、「追加CSS」という機能がついています。
ですがどのようにしてサイトのスタイルを調べてらいいのかわからないという人も多いはず。

そこでブラウザ上で、Webサイトのスタイルを調べる方法をお伝えします。

デベロッパツールでスタイルを確認

サイトのスタイルを確認するには、ブラウザに標準でついているデベロッパーツール(開発ツール)を使用します。
次の手順で表示してください。

デベロッパツールの開き方・表示位置の変更

Google Chrome

(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。

(2) 表示されたメニューから、「検証」をクリックします。

Google Chrome コンテントメニュー

(3) 「・・・(縦)」をクリックして表示されるメニューの「Dock side」で、表示する位置を好みの場所へ変更します。

Google Chrome デベロッパツール 表示位置変更

Firefox

(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。

(2) 表示されたメニューから、「要素を調査」をクリックします。

firefox コンテントメニュー

(3) 「・・・」をクリックして表示されるメニュー内の「下側に表示」「右側に表示」「左側に表示」「ウィンドウ分割」から、表示する位置を選択します。

Firefox デベロッパツール 表示位置変更

Microsoft Edge

(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。

(2) 表示されたメニューから、「要素の調査」をクリックします。

Microsoft Edge コンテントメニュー

(3) 右端の二つのアイコンでデベロッパツールの表示位置を変更できます。右から2番目が固定解除。3番目が位置の変更です。

Microsoft Edge デベロッパツール 表示位置変更

Safari

(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。

(2) 表示されたメニューから、「要素の調査」をクリックします。

Safari Edge コンテントメニュー

(3) 左端の二つのアイコンでデベロッパツールの表示位置を変更できます。左から2番目が固定解除。3番目が位置の変更です。

Safari デベロッパツール 表示位置変更

デベロッパツールの画面

デベロッパツールはブラウザによってデザインが異なりますが、内容は同じです。
ここではGoogle Chromeのデベロッパツールを例として、説明します。

デベロッパツール Google Chrome

❶ WebサイトのHTMLエリア

サイトを構成するHTMLコードが表示されるエリアです。
▶マークをクリックすることで、要素の開閉ができます。

マウスのクリックで要素を選択できます。

❷ 選択されている要素のスタイルエリア

❶で選択されている要素のスタイルが表示されるエリアです。
エリア内のスタイルを変更することで、直接ブラウザの表示を変更することができます。

デベロッパツールでCSSに慣れよう

初めてWebサイトのスタイル(css)を見た人は、とても難しい設定がされていると感じると思います。
とりあえず、いろいろ値を変更してみてください。

ここで変更したスタイルはどこにも保存されないので、表示がぐちゃぐちゃになっても何の問題もありません。
気にせず好きなようにやってしまってください。

しばらくすると、スタイルはそれほど難しいものではないと思うようになりますよ。