よく、WEB初心者の方で
という相談を受けます。
ここでは、スタイルが存在しているのにデザインが適用されない場合の対処法について見ていきましょう。
目次
デザインが反映されない原因
追記するファイルが間違っている
まず考えられるのが、追記する場所の間違いです。
WEBサイトでは、<header></header>間にスタイルシートの読み込みが行われています。
ここで読み込んでいるファイルの中にプログラムを記述することで内容が反映される仕組みとなっています。
スタイルシート（style.css）の読み込みを行なって記述
しかし、消し忘れた古いスタイルシートや、読み込みを行なっていないスタイルシートの中にプログラムの記述を行なってしまった場合は内容が読み込まれていませんので、サイトにデザインが反映されない、という現象が起きるのです。
すでにタグが存在している
スタイルシートには、適用の優先順位というものがあります。
これにより、既にスタイルシート内に優先順位が高い同一タグが存在していた場合、新しく追加したタグの内容は無視されてしまうため、サイトにデザインが反映されない、という現象が起きます。
デザインを反映させるための対処法
スタイルシートを確認する
まずは、記述を行なったスタイルシートがページ上で読み込まれているかを確認しましょう。
ブラウザに応じた方法でソースコードを表示し、自分が記述を行なったスタイルシート名が存在しているかどうかを確認します。
ソースコード上で探す記述
自分のサイトの中で、どのスタイルシートが読み込まれているのかを確認するためには、ブラウザの「ソースコード」を表示します。
Safari、Chromのソースコードの表示方法は以下の記事を参考にしてみてください。
既存のタグとの調整を行う
読み込み済みのスタイルシートに優先順位が高い既存タグの記述があった場合、さらにその記述より優先順位が高いタグを用意する必要があります。
タグの調整を行う上で、スタイルシートの優先順位を知っておく必要があります。
スタイルシートの優先順位については、以下のページを参考にしてみてください。
最終手段として強制適用タグを使う
最終手段として、強制適用タグ「!important」というものを使います。
スタイルの語尾に「!important」をつけることで、どのスタイルよりも優先してデザインが適用されるようになります。
ただし、気楽に「!important」タグを乱発していると、強制タグ同士で競合が起きてうまくデザインを表示できなかったり、デザインの幅が狭まるというデメリットがあります。
安易に強制タグは使わず、できる限りはスタイルシート内のプログラム記述を調整することが今後のカスタマイズ時に有利となります。
強制タグの適用スタイル例
