
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.03.24
CSS(Cascading Style Sheets)の Cascading(カスケーディング)は、優先順位が高いスタイルが、抵触するスタイルを上書きするという仕組みです。
ですので、各CSSの優先順位はとても重要です。
今回は、CSSの優先順位についてまとめたいと思います。
1.CSSの優先順位
2.優先順位の検討
3.指定元による優先順位
4.インラインで記述された CSS
5.セレクタの種類による優先順位
6.読み込み順による優先順位
CSS は 基本的に次のように記述します。
セレクタ{プロパティ:値}
CSS の優先順位は、上記の記述内の「値」について 複数の設定値がある場合に、どの設定値を適用するか決定する考え方です。
CSS の優先順位に従って、各ブラウザが 全ての HTML 要素に対して 適用する設定値を決定します。
ブラウザが CSS の適用を決定する際には、次のように優先順位を検討していきます。
1.メディアタイプについての CSS
link要素、style要素のmedia属性や、CSS内の @media や @import にメディアタイプがあれば、その設定値が最優先2.指定元によって優先順位を決定
3.インラインで記述された CSS
4.セレクタの設定方法によって優先順位を決定
5.ブラウザの読み込み順によって優先順位を決定
上書き適用するという CSS の性質上、基本的には HTML 文書内で後に記述された CSS ほど優先順位が高くなりますが、それに先立って決定する優先順位があることに注意する必要があります。
メディアタイプについて CSS の指定がない場合は、どこで指定されたかによって優先順位が決定されます。
CSS がどこで指定されたかによって、次のような優先順位が決定します。
1.作成者指定の CSS
(サイトの作成者がソース上で指定)
2.ユーザ指定の CSS
(ユーザがブラウザ上で指定)
3.各ブラウザのデフォルト CSS
明示的に 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 宣言ですが、安易に使用すると 優先順位を正しく把握することが困難になり、意図した結果と違うスタイルが表示される危険性があるので、使用には細心の注意を払う必要があります。
指定元による優先順位が同位の場合は、インライン( 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 宣言が付いた値は、インラインで記述された CSS よりも優先されます。
!important 宣言については 前項の!important の例外をご参照下さい。
セレクタの種類によっても、次のような優先順位があります。
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;}
このように、セレクタをより詳しく設定した方が優先順位が高くなります。
ブラウザは HTML 文書を上から順に読み込むので、上書き適用という CSS の性質上、より下に記述された CSS ほど優先順位が高くなります。
外部の CSS ファイルを HTML 内で読み込んだ場合も、読み込み順が後になるほど優先順位が高くなります。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.