CSSの確認はChromeデベロッパーツールが便利

ホームページのCSSを簡単にチェックしたい場合、ブラウザのChromeに搭載されているデベロッパーツールを使用すると便利です。

デベロッパーツールを使えば、その要素のフォントや文字の大きさ、marginやpadding、あるいはレイアウト構成などを簡単に調べることができます。

このデベロッパーツールは、Chromeのデフォルトで利用できる機能のため、拡張機能として別途にインストールする必要はありません。

Chromeを使用していれば、そのまま利用することができます。
→ Google Chrome

また、レスポンシブウェブデザインでスマートフォンに最適化する際も、主要な機種ごとに表示を確認できるので便利です。

Chromeデベロッパーツールの使い方

使い方については、まずはChromeで調べたいページを表示させたのち、「右上の縦３点リーダー」→「その他のツール」→「デベロッパーツール」の順に選択してツールを起動します。

もしくは、調べたい箇所を選択したのち、「右クリック」→「検証」を選択することでも利用することができます。

次に、「Elements」にて調べる要素を選択したのち、「Styles」や「Computed」の箇所で確認することができます。

■「Styles」と「Computed」の違い

「Styles」ではその要素のCSSが表示されますが、「Computed」の箇所では最終的に適用された結果が表示されます。このcomputeは計算するという意味になりますが、その要素で適用されているフォントや実際の値などをチェックすることができます。

例えば、「Styles」の箇所で2emなどとなっていた場合、「Computed」の箇所ではこの2emが計算されて32pxなどと表示されるはずです。

また、「Styles」の箇所では要素の値を変更することもできます。

フォントサイズなどの入力した値がリアルタイムで反映されますので、実際の表示を確認しながら変更したい場合は「Styles」を利用するとよいでしょう。

レスポンシブウェブデザインの確認方法

サイトをレスポンシブウェブデザインでスマートフォンに最適化している場合、主要な機種ごとに表示を確認することができます。

「Elements」の横にスマホのマークがありますが、こちらでスマホやタブレット端末での表示を確認することができます。

以下のような機種を選択する箇所があるため、それぞれ正常に表示されるかをチェックしておきます。

特にユーザー数の多い「iPhone 5/SE」、「iPhone 6/7/8」、「iPad」については、重点的にチェックしておくとよいかもしれません。

ただし、アドセンス広告などを利用している場合はリロードしないと正常に表示されないため、掲載していないページで確認することをおすすめします。