CSSが効かないときに確認すること

CSSが効かないときに確認することを3つ紹介します。

1.キャッシュが残っていないか確認する

WEBブラウザは通信量を節約するために、一度開いたサイトを、過去のデータを元に表示してくれます。一般ユーザーにとってはありがたい機能ですが、開発者にとっては仇となってしまうことがありますので、対処法をしっかり覚えておきましょう。

制作しているページをブラウザで開く
→その画面で「右クリック」をする
→「検証」をクリック

このときに開かれたツールを「ディベローパーツール」といいます。

ディベロッパーツールが開かれた状態で、更新ボタンを右クリックして、「キャッシュの消去とハードの再読み込み」を選択すると、キャッシュを消去することができます。

誤字や全角のスペースが入っていて、コードが反映されないというミスは、経験を積んだエンジニアでも人間である以上、可能性があることを承知しておく必要があります。

そこで、VScodeというエディタでプログラミングを行うことをおすすめします。
このアプリは、言語ごとの誤字を発見すると、自動でエラーを表示してくれるので、誤字をする確率を減らすことができます。
VScodeダウンロード

ヘッダー内(<head>内)に、下記コードが入力されているか確認を行ってください。

<link rel="stylesheet" href="xxxxxxxxxxx">

「xxxxxxxxxxx」は、CSSへのパスが入ります。

SiteTest — index.html
|
— css
| — style.css

上記のような構成の場合は、xxxxxxxxxxxの中身は、「css/style.css」となります。

CSSには、優先順位があります。詳しくはこちらにてご参照ください。

どのCSSが実際に効いているか確認するために、1でも説明した「ディベロッパーツール」を使用します。

以下、使い方の手順です。

制作しているページをブラウザで開く
→その画面で「右クリック」をする
→「検証」をクリック（ここまでは一緒）

→ディベロッパーツールの左上にある矢印をクリック(下記画像左側)
→ブラウザ上にある、CSSを効かせたい部分をクリックする

すると、右下にCSSのコードが表示されますので、どのCSSが効いているか確認することができます。