セレクタによる属性値の設定

CSSファイルの例

      @charset "Shift-JIS";             /* このCSSファイルの文字コード */
      h1 { color: red; }                /* h1要素のcolor属性値を赤色に */
      p  { background-color: yellow; }  /* p要素の背景色属性値を黄色に */

スタイルシート(CSS)では，セレクタに要素を指定し， プロパティ（属性）の値を設定する

---

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

• 開き中括弧から閉じ中括弧までの間に「プロパティ（属性）」 とその「値」を記述する
• したがって，セレクタで指定した要素 のプロパティ（属性）を指定した値に設定することを意味する

---

セレクタ

1. タイプセレクタ（要素型セレクタ）
2. クラスセレクタ
3. IDセレクタ

1. タイプセレクタ(要素型セレクタ）

   • 属性値の変更は，ページ内のすべての箇所での指定した要素に適用される
   • 複数の要素に対して，同時に設定することも可能

     [例]

     
           h1     { color: red; }
           h2, h3 { color: blue; }                  /* h2,および, h3 要素に適用 */
           div > p { background-color: yellow; }    /* div要素内の直接の子供のp要素に適用 */
           div p { color: orange; }                 /* div要素内のp要素に適用 */
           h1 + div { background-color: green; }    /* h1要素直後のdiv要素に適用 */
           h1 ~ div { color: indigo: }              /* h1要素の後に置かれたdiv要素に適用 */
           

     
     [図] セレクタのパターン例

2. クラスセレクタ

   • 要素にclass属性を持たせることで，同一の要素であっても， 複数の表現設定が可能になる

   記述

   
        要素名.クラス名 { 属性名: 値; ... }
   
        

   
   [図] クラスセレクタの例 上図の例ではp（パラグラフ，段落）要素としてクラス属性値 basic と important を持つものを定義している．

   クラス属性値は，キーワードではないので，"class1", "class2", "memo", "midashi" など適当な名前を使用することができる．

   [例] CSS中のクラスセレクタの例

   
         p.* { color: darkgreen; }                 /* p要素のすべてのクラスに適用 */
         p.basic { background-color: gray; }       /* p要素のクラス属性値としてbasicを持つ要素に適用 */
         p.important { background-color: yellow; } /* p要素のクラス属性値としてimportantを持つ要素に適用 */
   
   

3. IDセレクタ

   • 指定されたid属性値を持つ要素に対してスタイルが適用される
   • id属性値が一致すれば，異なる種類の要素に対しても適用される

   記述

   
        #id属性名 { 属性値: 値; ... }
   
        

   [例]

   
         #chuui { color: red; background-color: #77ff77; }
         #large { font-size: 20px; }
         

   html中での使用例を以下に示す

   <p id="chuui">ここは要注意箇所</p> さらに，<span id="chuui">ここも注意</span>が必要 <ul> <li>箇条書き１</li> <li id="large">箇条書き２</li> </ul>

   ここは要注意箇所 さらに，ここも注意が必要 箇条書き１ 箇条書き２