ファイルの読込み・スタイルの優先順位 | SkillhubAI（スキルハブエーアイ）

ファイル/コードの読み込み順

htmlなどのファイルをブラウザで開くと、基本的にソースは上から順に読み込まれていきます。基本的なHTMLの構造ですと下図のような形です。

file

この仕組みはhtml文書内で読み込ませているcssファイルやjsファイルにも当てはまります。

私達はstyle.cssなどのスタイルシートファイルを、基本的には<head>内で読み込ませていますよね。ブラウザに表示される部分、つまり<body>タグよりも前です。

実は<body>内に<link rel="stylesheet" href="...と読み込みの記述を書いても、cssは読み込まれます。それなのにheadタグ内でcssファイルの読み込みを行っているのは、ブラウザ表示部分（bodyタグ内）より先にcssを読ませいたいためです。

<body>タグよりも前にcssを読み込んでおくことで、ブラウザ表示部分（bodyタグ内）はCSSが適用された状態で表示されます。

大抵の場合、ほとんどタイムラグなく読み込みが行われるめ差はありません。しかし、接続状況等が悪くロード時間が長くなると下図のような差が出ます。

file

たとえ数秒でも、ページを開いてこんな風になっていたらギョッとしますよね。ですので、表示が崩れるリスクを最小限にするために最初にcssを読み込むのです。（※それでも読み込み当初にレイアウトが崩れることはあります）

スタイル指定の優先順位

Bootstrap講座やポートフォリオ講座でBootstrapを使った時、下記のような形でcssファイルの読み込みを行いました。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><!-- Bootstrapのcss -->
    <link rel="stylesheet" href="css/style.css">    <!-- 自作したcss -->
</head>

先程のファイル/コードの読み込み順で言うと、以下の順でcssファイルを読み込ませていることになります。

Bootstrapのcss
自作したcss

スタイルシートファイル、その中に書かれているスタイル指定も、上から順に読み込まれていきます。そして競合する指定があった場合は、新しく読み込まれたスタイルで上書きされていきます。

file

このためBootstrapのようなCSSフレームワークやライブラリのスタイルシートを読み込ませる、設定内容によってcssファイルを分割するなどの場合は、優先順位を意識してスタイルシートを読み込むようにする必要があります。

CSSセレクタによる優先度

競合するスタイルの適用には、cssセレクタとして使われている要素による優先順位の影響も受けます。例えば、下記のようなコードがあるとします。

<div id="background" class="background">
  <p>#backgroundなら背景色は赤</p>
  <p>.backgroundなら背景色は青</p>
</div>

#background{
  background-color: red;
}
.background{
    background-color: blue;
}

この場合、ブラウザに表示されるdivの背景色はどちらになるでしょう？

htmlでの指定も、cssでのスタイル指定も後に書いてある.background(青)が勝ちそうに思えますが、ブラウザで表示すると赤色の背景色が付きます。

file

これがCSSセレクタによる優先度の違いです。検証ツールで確認すれば「何の要素が優先されているか」はすぐに分かります。

file

「ちゃんと書いたのにcssが効かない！」という場合は、読み込み順・セレクタの優先順位が影響していることが多いです。

CSSセレクタの優先順位の計算

下記の表で、セレクタの総合ポイントの高いスタイル指定が優先されます。

指定方法	例	ポイント
!important	!important	10,000点
style属性	style="color: red;"	1,000点
ID	#hoge	100点
クラス	.hoge	10点
属性セレクタ	a[href*="google"]	10点
要素名	ul	1点
擬似要素	::before	1点
ユニバーサルセレクタ	*	0点

セレクタ要素が複数使われていた場合は、それぞれのポイントを合計します。

div.color.reb ＝1(要素名) + 10(クラス属性) + 10(クラス属性) =21ポイント

最初の例はidとclassなので、優先ポイントの高いid（#background）のスタイルが適用されています。

!important宣言について

CSSにはスタイルが適用される優先順位を、最優先にする「!important」という記述があります。 !important 宣言することでcssファイルの読み込み順、記述位置に関わらず、そのスタイルの優先度が上がる＝優先して利用されるわけです。

!important はプロパティ値の後、セミコロンよりも手前に書きます。

【例】

.wrapper{
  max-width: 1170px;
  margin: 50px auto !important;
}

!importantの優先度は最上位。 htmlファイルにインラインで書いたスタイルよりも強いです。

便利なので上手く行かない時は使いたくなりますが、!importantの多用は好ましくありません。元々、そんなことをしなくても良いように、セレクタの優先順位が決められているわけですしね。

複数使用することで元の優先順位が崩れて、どんどんスタイルを追加しにくくなってしまいます。手に負えないcssになってしまうのでコーダーの中には「!importantを非推奨にしてくれ！」と言っている方も珍しくありません。 !important宣言は本当に必要、どうしようもないという時以外は使わないようにしましょう。

まとめ

スタイルシートの指定は、ファイルの読み込み順やセレクタの優先度によって上書き・打ち消しされてしまうことがあります。スペルミスもないのにcssが効かない…と思ったら、検証ツールで打ち消されていないか見てみましょう。

指定したいスタイルを打ち消しているものが分かれば、以下のような方法でCSSを書いて対応できます。

ファイルの読み込み順を変える
セレクタの書き方を変える

レッスン一覧へ