「指定したはずのCSSが適用されない」「ブラウザで思い通りのレイアウトにならない」

こんな悩みを抱えていませんか？

HTML・CSSを学び始めたばかりだと、ただのスペルミスなのかプロパティの使い方を間違えているのか、なかなか判断がつかないですよね。

今回は、CSSがブラウザに適用されていない場合に何から確認したらいいのか分からない、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSがブラウザに適用されないときの対処法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

デベロッパーツールで原因を探る

CSSで指定したものが上手く適用されていない。そんな時は、ブラウザのデベロッパーツールを使って原因を探りましょう。

デベロッパーツールは検証機能ともいい、だいたいのブラウザで標準搭載されている開発者ツールです。

WebページのHTMLやCSSなどのコードを確認・検証できるほか、レスポンシブ表示の確認など様々な状態をチェックすることができます。

Google Chromeの場合、ブラウザ上で右クリックして「検証」を選択するか、F12キーで呼び出すことができます。

CSSでよくあるミスと対処法

ブラウザのデベロッパーツールを起動できたら、早速コードを確認していきましょう。

Google Chromeの場合は、調べたい要素の上で右クリックして「検証」を選ぶことで、特定の要素のCSSをチェックできます。

ここでは、CSSコードを書いていて、よくあるミスを5つ紹介します。

上位に行くほど基本的なミスになります。上位から順番に確認していくと良いでしょう。

それぞれ説明していきます。

CSSファイルが読み込まれていない

まず、要素を確認したときに、CSSが表示されているかどうか確認しましょう。

デベロッパーツールのHTMLコードをクリックしたときに、CSSコードが確認できれば問題ないです。

これが無い場合は、そもそもHTML内でCSSファイルが読み込まれていない可能性があります。

CSSファイルは、HTMLのhead内で、以下のように記述することで読み込むことができます。

<link rel="stylesheet" href="style.css">

この記述が合っているのか確認していきましょう。

チェック1：「rel=”stylesheet”」の指定

rel属性は、そのファイルとの関連性を指定します。href属性とともに、link要素には必須の属性です。

スタイルシートであるCSSファイルの場合は、「stylesheet」と記述します。

チェック2：CSSファイルのスペル

href属性には、読み込みたいCSSファイル名を記述します。

このスペルが合っているか確認しましょう。

「style.css」と「styles.css」を書き間違えるなどは、よくあるミスです。

チェック3：CSSファイルへのパス

ファイル名とともに、ファイルへのパスもチェックしましょう。

読み込みたいファイルが置かれているディレクトリ構造を把握している必要があります。

HTMLファイルと同じ階層のファイルであれば、何も付けないか、「./」を付け加えます。

1つ上の階層ファイルには「../」、1つ下の階層には「/」をファイル名の前に書きます。

同じ階層にあるCSSフォルダの中の「style.css」を読み込みたい場合には、以下のように記述します。

<link rel="stylesheet" href="css/style.css">

ディレクトリ構造を見て、合っているかどうか確認してみてくださいね。

キャッシュが残っている

CSSが読み込まれていても、指定した通りのスタイルが適用されていない場合があります。

CSSファイルの中身を書き換えたばかりの場合、キャッシュが残っている可能性があります。

ブラウザは、1度読み込んだページのデータをキャッシュとして保存しておく機能があります。

キャッシュがあると、そのデータをページ表示に使えるため、次に同じページを開いたときの表示速度が上がるようになります。

CSSを書き換えた後には不要なものなので、古いスタイルのキャッシュは削除しましょう。

ディベロッパーツールを開いた状態で、ブラウザの更新ボタンを右クリックすると、メニューが現れます。

その中の「キャッシュの消去とハード再読み込み」をクリックすると新しいデータに更新できます。

Windowsの場合、CtrlキーとF5キーを同時押しすることでも、同じように更新できますよ。

CSSコードの記述ミス

キャッシュを削除してもブラウザの表示がおかしい場合は、CSSコードを見ていきましょう。

セレクタやプロパティなどの記述ミスをしている場合があります。

特に以下のミスを確認してみてください。

間違っているものは、正しい記述に修正しましょう。

他の記述が優先されている

デベロッパーツールでは、反映されていないCSSコードには文字の上に横線が入っています。

記述ミスをしていないのに、横線が入っている場合、他の記述がスタイルを上書きしている可能性があります。

横線が入っているCSSコードの上をたどっていくと、上書きしているCSSを確認できます。

どのような記述が優先されるのか、どう修正していけばいいのか紹介していきましょう。

チェック1：優先したいスタイルの位置

CSSでは、後ろに書かれたスタイルが優先で適用されます。

デベロッパーツールをよく見ると、CSSファイルの何行目にそのコードが書かれているのかが記載されています。

その行数が大きいものの方が優先されるのです。

不要なものであれば削除すれば良いのですが、他の箇所にも使用しているスタイルかもしれません。

削除できない場合は、その記述よりも後に書くか、この後説明するように、より詳細にセレクタを記述する必要があります。

チェック2：優先したいスタイルのセレクタ

スタイルをより詳細に記述すると、優先度を上げることができます。

<div class="content">
  <p id="txt" class="sample"><a>セレクタの優先順位とは？</a></p>
</div>

CSSを以下のように書いていきます。

.content p.sample {
  color:red;
}
p.sample {
  color:blue;
}
.sample {
  color:#ccc;
}

文字の色を指定しました。最後に書かれているものは「color: #ccc」ですが、優先度は、「color: red」が一番高いため、文字は赤くなります。

赤の指定がない場合、文字は次に優先度が高い青色になります。

このほか、クラス名よりID名の方が優先度が高いなどの条件があります。

セレクタには以下のような点数があり、これを計算することによって、優先度が決定します。

「.content p.sample」は、クラスの10点が2つと、要素の1点で21点となります。

仮に、IDの「#txt」で指定した場合には、その指定が優先されます。

また、プロパティに「!important」を使うと、最優先のスタイルになります。

この指定は強力ですが、乱用しすぎるとスタイル変更の際に混乱を招く結果になります。

!importantの指定を打ち消すために、!importantを使うなどは絶対にしないようにしましょう。

ブラウザが判断できず、思い通りのレイアウトにならなくなることがあります

CSSプロパティの仕様によるレイアウト崩れ

CSSの記述ミスをなくし、優先度を上げても、ブラウザの表示が改善しない場合、CSSプロパティの仕様でレイアウトが崩れている可能性があります。

特に、floatやpositionなど、要素の位置を調整するプロパティには気を配りましょう。

要素を浮かして位置を変えるため、要素の高さがなくなり、レイアウトの崩れが起きやすくなります。

floatの場合、回り込みの解除をする必要がありますね。

他にも横幅や高さを指定しないと、レイアウトが上手くいかないことがあります。

要素の特徴やCSSプロパティなどを調べたりして、修正していきましょう。

まとめ：原因を探して1つずつ対応していこう

今回は、CSSが適用されないときにどのように対処していけばいいのか、を解説してきました。

1つずつチェックしていき、原因になりそうなものを潰していくことが大切です。

検索して調べてみることも重要ですね。同じ場所で躓いた方が、対処法を記事で書いていることもあります。

公開されているサンプルコードなども、どんどん活用していきましょう。

Webサイトのコーディングで行き詰ったときに、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／