CSS構造と基礎的な使い方とセレクタ
CSS構造
- セレクタ
- 宣言
- 開始
- プロパティ
- 値(バリュー)
- 終了
- p
- {
- font-weight
- bold
- }
- p id=" "
- {
- font-size
- 1em
- }
- p class=" "
- {
- color
- #000
- }
☆ 「プロパティ」と「値」の区切りは「 : 」(コロン)
1つのセレクタに2つ以上の宣言がある場合は、「値」の終わりに「;」(セミコロン)が必要
☆ p:「タイプセレクタ」、p id=" ":「idセレクタ」、p class=" ":「classセレクタ」
注意:id名 は、ページ内に1つ限り
☆ cssの1セットを「規則集合(ルールセット or ルール)」と呼ぶ。
参考:htmlの構造
1 2 3 4 5 6 |
<!-- 全体を要素 --> <div> <!-- 親要素・開始タグ divタグとも --> <p> <!-- 子要素・開始タグ pタグとも--> 表示する内容 </p> <!-- 子要素・終了タグ --> </div> <!-- 親要素・終了タグ --> |
基本の記述例
この項の1.~5.迄は、以下のCSSを記述した時の表示。
1 2 3 4 5 6 7 |
/* CSSファイル記述:1 */ .f_color_red { color:red;} .f_color_blue { color:blue;} .f_bold { font-weight:bold;} |
1 2 3 4 5 6 7 |
/* CSSファイル記述:2 */ .letter_space { letter-spacing:0.5em;} .title_a { color:red; font-weight:bold; letter-spacing:0.5em;} |
1.セレクタ内に1つの宣言
1 2 |
<!-- HTML --> <p class="f_color_red">あいうえお・AIUEO</p> |
(左記の表示)
あいうえお・AIUEO
2.セレクタ内に宣言が複数
1 2 |
<!-- HTML --> <p class="title_a">あいうえお・AIUEO</p> |
(左記の表示)
あいうえお・AIUEO
3.複数のセレクタ
セレクタを半角スペースで区切る
1 2 |
<!-- HTML --> <p class="f_color_red f_bold letter_space">あいうえお・AIUEO</p> |
(上記の表示)
あいうえお・AIUEO
4.インラインCSS
同じセレクタ名がCSSファイルにある場合、こちらが優先される
1 2 |
<!-- HTML --> <p style="color:red; font-weight:bold; letter-spacing:1em;">あいうえお・AIUEO</p> |
(上記の表示)
あいうえお・AIUEO
5.後書きでCSSの宣言を置き換える
1 2 3 |
<!-- HTML --> <!-- インラインCSSを利用 --> <p class="title_a" style="color:blue;">あいうえお・AIUEO</p> |
(上記の表示)
あいうえお・AIUEO
子孫セレクタ
1 2 3 4 |
/* css */ .box_1 > p {color:red;} /* 子セレクタの指定 */ .box_1 > div > p { /* 孫セレクタの指定 */ letter-spacing:1em;} |
1 2 3 4 5 6 7 8 9 10 |
<!-- HTML 子孫セレクタ --> <div class="box_1"> /* 親 */ <div> /* 子供 */ <p>あいうえお</p> /* 孫 */ </div> <p>AIUEO</p> /* 子供 */ <div> /* 子供 */ <p>aiueo</p> /* 孫 */ </div> </div> |
(上記の表示)
あいうえお
AIUEO
aiueo
複数のセレクタに同じ宣言を適用(カンマ区切り)
1 2 |
/* css */ .sample1,.sample2,.sample3{color:red;} |
1 2 3 4 |
<!-- html --> <p class="sample1">あいうえお</p> <p class="sample2">AIUEO</p> <p class="sample3">aiueo</p> |
(上記表示)
あいうえお
AIUEO
aiueo
複数のセレクタ記述で適用の絞り込み(区切り無し)
1 2 |
/* css */ .sample11.sample12{color:red;} /* 区切らない */ |
1 2 3 4 |
<!-- html --> <p class="sample11">あいうえお</p> <p class="sample12">AIUEO</p> <p class="sample11 sample12">aiueo</p> |
(上記表示)
あいうえお
AIUEO
aiueo
セレクタの特定セレクタを指定
1 2 |
/* css */ .sample21 p{letter-spacing:3em;} |
1 2 3 4 5 6 7 |
<!-- html --> <div class="sample21"> <p>あいうえお</p> <ul> <!-- 適用されない --> <li>あいうえお</li> </ul> </div> |
(上記表示)
あいうえお
- あいうえお