ケケンタこんにちは！ ケケンタです。
今回は、Google chromeの検証ツールを使用してCSSの反映状況を確認する方法とCSSが反映されていないときの対処方法について解説していきます。
CSSが反映されない原因については以下の記事で詳しく解説しています。
Web制作の副業にご興味のある方には以下の記事もおすすめです。
格安レンタルサーバーを
お探しなら
格安サーバーをお探しならリトルサーバーがおすすめ！
- 月額150円～利用可能
- 標準で全サーバー毎日自動バックアップ付き
- 全プランWordPress対応（簡単インストール機能付き）
- 独自SSLが無料（全プランがSSLに完全対応）
- 提供ドメインが複数あるため独自ドメインが無くても複数サイト運営可能
- 独自ドメイン無制限（サブドメインも無制限で利用可能）
- 無料お試し期間がある
リトルサーバーの最大の特徴は安価な月額料金です
＼ 利用料金比較表 ／
| ミニプラン | ワードプラン | リトルプラン | ビッグプラン | |
|---|---|---|---|---|
| 月額料金 | 150円～ | 195円～ | 250円～ | 430円～ |
| SSD容量 | 20GB | 30GB | 60GB | 120GB |
| 提供ドメイン | アカウント＋２ | アカウント＋２ | アカウント＋３ | アカウント＋５ |
| 独自ドメイン | 無制限 | |||
| バックアップ | ７日分 | |||
有名なサーバーだと月額料金は1000円前後であることが普通です。
仮にリトルサーバーで同じ料金（1000円）を支払ったとすると
最も安いミニプランだと半年分、
おすすめのリトルプランでも４カ月分のサーバーがレンタル可能！
こんな方にオススメ
- 実案件でテスト用のサーバーを用意したい
- とりあえずサーバーというものに触れてみたい
- 試しにWordPressを本番運用してみたい
- いま利用しているサーバーが高額だから安価なレンタルサーバーに乗り換えたい
ケケンタリトルサーバーには無料お試し期間があります。
ご興味のある方は是非ご検討してみてはいかがでしょうか。
＼無料お試しのお申し込みはこちら／
「仕事が忙しい方」、「すぐに商品が欲しい方」にピッタリのサービス
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonプライムに会員登録する
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいすると再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
Googleの検証ツール（通称デベロッパーツール）とは？
そもそもGoogleの検証ツール（通称デベロッパーツール）が何かを簡単にご説明すると
Webサイトを作成する際にブラウザ上でHTML・CSS・Javascriptなどの確認や編集を行えるツール
です。
検証ツールは、恐らくWeb制作に携わっている方は誰もが使用しているであろう必須ツールです。
検証ツールで出来ることは非常に多いのですが、この記事でご紹介するのは、その機能の内、ごくごく一部分だけとなることを予めお伝えしておきます。
検証ツールでHTML・CSSの状況を確認する方法
解説の順番
- 検証ツールの起動方法 ～ HTML要素の選択・CSSプロパティの確認方法
- CSSの読み込み状況の確認方法
ケケンタこれまで検証ツールを使用したことが無い方にとっては、もしかしたら「検証ツールの画面が見づらい」と感じる部分もあるかもしれません。
しかし、そこを乗り越えればCSSが反映されない問題で沼にハマるという事態を回避しやすくなるので、ぜひ最後までご覧ください。
検証ツールの起動
まずはGoogle chromeでCSSの反映状況を確認したいHTMLファイルを開いてください。
ケケンタ特に確認したいHTMLファイルが無い方は当ブログ（ケケンタの独学ITブログ）でも大丈夫です！
chromeを起動したら（または当ブログを開いた状態で）
F12 または Ctrl + Shift + I
を押します。
すると、以下のような画面が立ち上がるかと思います。
このとき、画像最上部のタブが「Elements」になっていない方はそちらをクリックしてみて下さい。
また、一番下に表示されている
という部分は、今回使用しないため右上の「×」をクリックして非表示にしてしまいます。
すると、以下のような画面になります。（非表示にした領域分だけ画面が縦方向に広がります）
画面構成の確認
詳しい確認方法をご説明する前に、まずは簡単に検証ツールの画面構成をお伝えします。
以下のElementsで表示されている領域には、HTMLファイルで記述してあるコードが表示されます。
そして、その下（画面の下半分）に表示されているのが、そのHTMLコード（正確には各HTML要素）に紐づいているCSSの情報です。
今回のCSSの反映状況の確認で主に使用するのは、こちらの下半分の情報になります。
画面が狭いという方は、上記画像の水色っぽい帯の上端にカーソルを当てると画面幅の調整が可能です。
この部分の上端
検証ツールでHTML要素を選択する
続いて、検証ツールの機能を利用してHTML要素を選択してみます。
これにより、選択した狙ったHTML要素にどのようなCSSが適用されているのかを確認することができます。
検証ツールを開いた状態で、以下のショートカットキー
Ctrl + Shift + C
を押してみて下さい。
そして、どこでも良いのでブラウザ上のHTML要素（検証ツールではない、実際にサイトとして表示されている部分）にカーソルを持っていきます。
すると、以下のように、そのHTML要素の情報が表示されたかと思います。
この状態で、CSSの反映状況を知りたい要素をクリックします。
僕の場合、上記画像の「h2.section-title」と表示されている要素をクリックしてみました。
すると以下のように
画面の右側＝検証ツールの下半分の表示が変わり、クリックした要素に適用されているCSSが表示されました。
以下の画像は上記画像の右側にフォーカスしたものです。
これを見ると、僕の環境では「.section-title」に４つのCSSプロパティが適用されていることが分かります。
ケケンタ補足として、上記の方法だと
「クリックしたい要素が上手く選択できない！」
となる場合があります。
そんなときは、検証ツールのHTMLコードをクリックすることでもHTML要素を選択することが可能です。
テキストなどの目に見える要素ならばサイト画面上をクリックする方法が簡単ですが、目に見えないdiv要素を選択したい場合などは、検証ツール上で直接HTML要素を選ぶ方法の方が扱いやすいです！
※「▶」または要素に挟まれている「…」をクリックすると下層要素の表示切替ができます。
以上が、「検証ツール起動方法 ～ HTML要素の選択・CSSプロパティの確認方法」のご説明でした。
CSSの反映状況の確認・対処方法
ここからは
- CSSの反映状況の確認方法
- CSSが反映されていないときの対処方法
についてご説明していきます。
まず、注目していただきたいポイントは、以下の３点です。
- 追加・編集した内容がこの画面上にも表示されているか
- プロパティ上に取り消し線（
こんな感じの）が引かれていないか - 追加・編集した内容が画面上に表示されているにもかかわらずHTMLに反映されている様子が無い
追加・編集したCSSが検証ツール上に表示されない
追加・編集したCSSが検証ツール上に表示されない原因には、以下のいずれかが考えられます。
- CSSファイルのパス指定が間違っている
- キャッシュ残り
対処方法は
- CSSのパスを見直す
- スーパーリロード（「Shift + F5」 ※人によっては「fn」キーも押しながら）を実行する
のいずれかとなります。
ケケンタパスの指定方法についてはこちらの記事
ケケンタキャッシュ・スーパーリロードについてはこちらの記事で詳しくご説明しています！
プロパティ上に取り消し線が引かれている
- 文法的な誤り
- 他のCSSプロパティで上書きされている
上記のいずれかに当てはまっていると、「無効」であるとしてCSSプロパティに取り消し線が引かれます。
例えば、下の画像は文法の誤りがあったときの検証ツールの表示です。
また、以下の画像では意図的に.image-listに対する指定を2か所に分けて記述することで、margin系を上書きしています。
こちらの例では、margin: 0; という指定によって後者２行を上書きしているという状況です。
このように取り消し線が発生している場合
文法の誤りがある、あるいはCSSが別のCSSによって上書きされているため、そのプロパティが無効となっている
ことを意味します。
ケケンタ別のCSSで上書きされている場合でも、上の画像のように適用されているプロパティはきちんとすべて表示されるので、そちらを元に原因となっているCSSを特定してみて下さい。
追加・編集した内容が画面上に表示されているにもかかわらずHTMLに反映されている様子が無い
文法は正しく、ただ単に仕様上の誤りだけである場合は、
取り消し線が引かれず、あたかも正常に適用されているように見えてしまう
ことがあります。
そんなときはプロパティの横のチェックボックスをON・OFFしてみて、画面上に動きがあるかどうかを確認してみて下さい。
もしもHTML側に動きが起こらない場合は、仕様上の誤りがあり、上手くCSSが適用されていないことが考えられます。
その場合は一度そのCSSプロパティの仕様を調べて、正しく使えているかどうかの確認をしてみましょう。
ケケンタ以上、ここまでGoogle chromeの検証ツールを利用したCSSの反映状況の確認方法と対処方法についてお伝えしてきました！
検証ツールはWebサイト制作をする上で必須のツールなので、これを機会にぜひ日々の学習に取り入れてみて下さい。
まとめ
この記事では
- 検証ツールの開き方～HTML要素の選択・CSSプロパティの確認
- 各反映状況に対する対処方法
についてお伝えしてきました。
この記事を見て問題が上手く解消されたなら何よりです。
このブログでは独学でプログラミング習得を目指す方向けの情報などを発信しています。
ご興味がある方はぜひ他の記事もご覧ください。
ケケンタ最後までお読みいただきありがとうございました！
またどこかの記事でお会いしましょう！
