CSSの基本ルール

CSSでレイアウトや装飾を行うにあたり、「セレクタ」の理解が必要になります。

セレクタの記述ルールと適用される優先順のルールなどがあります。

 

セレクタの概要


セレクタとは


セレクタとは、「CSSのスタイルを適用する場所(対象)を選択するための指定」です。

セレクタの基本


セレクタの基本的な組み合わせは、「セレクタ」、「プロパティ」、「値」の3つです。

表示の通り、「〇〇の△△を✖✖する」と覚えておきましょう。

例えば、

p  {  color:  #f00  }

このような記述は、「セレクタがp(要素)」、「プロパティがcolor」、「値が#f00」になります。

すなわち、「p要素の文字色を赤くする」という指定になります。

 

セレクタの記述


セレクタの構成


セレクタから始まる内容をまとめて「規則集合」といいます。

セレクタ以降は、「 { 」で始まり「 } 」で終わり、この部分を「宣言ブロック」と呼びます。

また、「 {  } 」で囲まれた部分を「宣言」と呼び、レイアウトや装飾の指定を記述します。

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

この宣言部分では、プロパティと値が必ず一対で指定し、宣言の終わりを意味する「  ;  」を記述します。

記述ルール


宣言には、半角スペースや改行、インデントなどを自由に入れられます。

しかし、適当に入れてしまうと管理上、不要な混乱を招く恐れがあるので、一般的なルールで記述しましょう。

宣言が1つの場合は、セレクタの後ろと、「  {  」、「  :  」、「  ;  」のそれぞれの後ろに半角スペースを入れます。

p  {  color:  #f00  }

宣伝を複数記述する場合は、宣言ごとに改行して記述するのが一般的な記述の仕方です。

「  {  」、「  }  」を改行することで、宣言が分かりやすくなります。

p  {

color:  #f00;

margin:  15px;

}

のように、宣言ごとに改行してインデントすることで、誰が見ても理解しやすいようにするといいです。

 

適用の優先


記述の適用順位


CSSでは、上の記述から読み込みます。

同じセレクタが上下にあれば、下のセレクタが適用されます。

同じセレクタを記述した場合、上に記述してある方を修正しても反映されません。

種類の適用順位


使うことの多いセレクタには、「要素セレクタ」、「IDセレクタ」、「Classセレクタ」があります。

これらのセレクタを優先順位の高い順に並べ替えると、

「IDセレクタ」、「Classセレクタ」、「要素セレクタ」

となります。

セレクタの個別性


その他にもセレクタの種類はあります。

それらの優先順位は、セレクタに点数がつけられており、セレクタの組み合わせによって点数が決まります。

上の方に記述した場合でも、優先的にスタイルを適用するための考え方です。

この優先順位を決めるルールを、セレクタの『個性性』といいます。

セレクタ名称 セレクタ例 個別性 点数
abcd
全称セレクタ* { }00000
要素セレクタh1 { }00011
疑似要素li:first-line { }00011
クラスセレクタ.note { }001010
属性セレクタa[target=”_blank”] { }001010
疑似クラスa:hover { }001010
IDセレクタ#container01001000
インラインスタイルstyle=” “100010000

a ・・・style属性     b ・・・ID属性の数

c ・・・classセレクタ、属性セレクタ、疑似クラスの数

d ・・・要素名、疑似要素の数

 

スタイルの上書き


CSSでは、同じ名前のセレクタが複数あるときは、下に記述した指定が優先されます。

これがCSSの「上書きの特性」です。

また、同じ名前のセレクタが複数あり、それぞれのプロパティが異なる場合は、「最初のスタイル」+「後のスタイル」となり、両方のスタイルを合わせた装飾になります。

優先順位と上書きの特性をうまくりようすると、少ないコードで効率の良いCSSを記述できるようになります。

 

◇まとめ◇

  1. セレクタは、装飾対象となる要素を選択するために利用する
  2. CSSは、下に記述されたものが優先される
  3. セレクタの個別性でスタイルの優先順位が決まる
 

2 Responses to “CSSの基本ルール”

  1. ryouji より:

    こんにちは。いつもありがとうございます。

    セレクタという言葉を初めて知りましたし、そんなに種類があることに驚きました。

    勉強になりました。ありがとうございます。

    • shoutarou123 より:

      ryoujiさん、訪問ありがとうございます。
      勉強うしていることを、ここでOUTPUTしています。
      また、何かお気づきの点がありましたら、私の成長の糧になりますので、よろしくお願いします。

コメントを残す

サブコンテンツ

【PR】

今だけ!値下げ決行!【初心者に嬉しい】画像編集マニュアル

【期間限定】LINEの人気スタンプが無料で手に入る!

お得な返礼品を貰おう!ふるさと納税

【無料登録】オススメのASPはココ!

女性が有利?ポイントサイト攻略マニュアル【無料】

奇跡的に文章力がアップする『魔法の〇〇集』プレゼント【無料】

【初心者でも安心】バイナリーオプションの自動攻略ツール(特典付き)

このページの先頭へ