ITコラム

colmun_main3439

ITコラム

2017.03.24

CSS 【 優先 順位 】 ~ 適用の仕組み

CSS(Cascading Style Sheets)の Cascading(カスケーディング)は、優先順位が高いスタイルが、抵触するスタイルを上書きするという仕組みです。
ですので、各CSSの優先順位はとても重要です。
今回は、CSSの優先順位についてまとめたいと思います。

目次

1.CSSの優先順位
2.優先順位の検討
3.指定元による優先順位
4.インラインで記述された CSS
5.セレクタの種類による優先順位
6.読み込み順による優先順位

1.CSSの優先順位

CSS は 基本的に次のように記述します。

セレクタ{プロパティ:値}

CSS の優先順位は、上記の記述内の「値」について 複数の設定値がある場合に、どの設定値を適用するか決定する考え方です。

CSS の優先順位に従って、各ブラウザが 全ての HTML 要素に対して 適用する設定値を決定します。

▲目次へ戻る

2.優先順位の検討

ブラウザが CSS の適用を決定する際には、次のように優先順位を検討していきます。


1.メディアタイプについての CSS
link要素、style要素のmedia属性や、CSS内の @media や @import にメディアタイプがあれば、その設定値が最優先

2.指定元によって優先順位を決定

3.インラインで記述された CSS

4.セレクタの設定方法によって優先順位を決定

5.ブラウザの読み込み順によって優先順位を決定

上書き適用するという CSS の性質上、基本的には HTML 文書内で後に記述された CSS ほど優先順位が高くなりますが、それに先立って決定する優先順位があることに注意する必要があります。

▲目次へ戻る

3.指定元による優先順位

メディアタイプについて CSS の指定がない場合は、どこで指定されたかによって優先順位が決定されます。
 

原則

CSS がどこで指定されたかによって、次のような優先順位が決定します。


1.作成者指定の CSS
  (サイトの作成者がソース上で指定)
2.ユーザ指定の CSS
  (ユーザがブラウザ上で指定)
3.各ブラウザのデフォルト CSS

 

!important の例外

明示的に CSS を優先させる目的で記述する「 !important 宣言 」というものがあります。

!important 宣言は、次のように記述します。

div{background-color:gray !important;}

設定値の後に半角スペースを空けて「 !important 」と記述されたものが
!important 宣言付きの CSS です。

!important を付けると 優先順位が高くなりますが、指定元による優先順位を検討する際には、その原則的な優先順位が変わります。

!important が付いたユーザ指定の CSS が 最優先順位となり、以下の順位は次のようになります。


1.!important が付いた ユーザ指定の CSS
2.!important が付いた 作成者指定の CSS
3.作成者指定の CSS
4.ユーザ指定の CSS
5.各ブラウザのデフォルト CSS

便利に見える !important 宣言ですが、安易に使用すると 優先順位を正しく把握することが困難になり、意図した結果と違うスタイルが表示される危険性があるので、使用には細心の注意を払う必要があります。

▲目次へ戻る

4.インラインで記述された CSS

指定元による優先順位が同位の場合は、インライン( style 属性を設定する形で HTML 要素に直接 CSS を記述する方法 )で記述された CSS が、抵触する他の CSS に優先して適用されます。

インラインで記述された CSS とは、次のような形のものです。

<div style="background-color:gray; padding:20px;">
  <p style="color:blue;">晴れ</p>
</div>

上のサンプルは、背景色がグレーで余白が 20px の div 要素内に、文字色が青で表示される p 要素がある HTML 文書です。

div 要素と p 要素のタグ内に「 style=”プロパティ : 値 ;” 」として CSS を記述しています。

!important の例外

!important 宣言が付いた値は、インラインで記述された CSS よりも優先されます。

!important 宣言については 前項の!important の例外をご参照下さい。

▲目次へ戻る

5.セレクタの種類による優先順位

セレクタの種類によっても、次のような優先順位があります。


1.idセレクタ
2.classセレクタ
3.要素セレクタ
4.*(ユニバーサルセレクタ)

 
上記の通り、セレクタの種類によって CSS の優先順位が決定しますが、それに加えて、セレクタの設定が詳細なほど優先順位が高くなる というルールもあります。

次のような HTML 要素について「 45 」だけ青文字で表示したい場合、

<div id="div1">
  <p id="p1">
    <span>70</span>
    <span class="font_blue">45</span>
    <span>60</span>
  </p>
</div>

セレクタの設定方法は色々ありますが、次の記述を比較すると 上にいくほど優先順位が高くなります。

body div#div1 p#p1 span.font_blue{color:blue;}

div#div1 p#p1 span.font_blue{color:blue;}

div p#p1 span.font_blue{color:blue;}

p#p1 span.font_blue{color:blue;}

p span.font_blue{color:blue;}

span.font_blue{color:blue;}

このように、セレクタをより詳しく設定した方が優先順位が高くなります。

▲目次へ戻る

6.読み込み順による優先順位

ブラウザは HTML 文書を上から順に読み込むので、上書き適用という CSS の性質上、より下に記述された CSS ほど優先順位が高くなります。

外部の CSS ファイルを HTML 内で読み込んだ場合も、読み込み順が後になるほど優先順位が高くなります。

▲目次へ戻る

SHARE

最新記事

DSC_0657

卒業生インタビュー

2019.07.11

【卒業生の声:ヒロタさん】事務職からプログラマーに転身!仕事と夜間スクールを両立し、WEB系自社開発会社へ内定。

受講スクール 夜間プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 EMTG株式会社 夜間プログラマカレッジ卒業生のヒロタさんにお話しをお伺いしました! 目次 新卒で入社した会社で事務を7年 専門性があって、も […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.