ホーム > HTML・CSS > CSS基本と応用 >
CSS構造と基礎編 MENU 

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.~5.迄は、以下のCSSを記述した時の表示。

 

1.セレクタ内に1つの宣言

(左記の表示)

あいうえお・AIUEO

 

2.セレクタ内に宣言が複数

(左記の表示)

あいうえお・AIUEO

 

3.複数のセレクタ

セレクタを半角スペースで区切る

(上記の表示)

あいうえお・AIUEO

 

4.インラインCSS

同じセレクタ名がCSSファイルにある場合、こちらが優先される

(上記の表示)

あいうえお・AIUEO

 

5.後書きでCSSの宣言を置き換える

(上記の表示)

あいうえお・AIUEO

子孫セレクタ

(上記の表示)

あいうえお

AIUEO

aiueo

複数のセレクタに同じ宣言を適用(カンマ区切り)

(上記表示)

あいうえお

AIUEO

aiueo

複数のセレクタ記述で適用の絞り込み(区切り無し)

(上記表示)

あいうえお

AIUEO

aiueo

セレクタの特定セレクタを指定

(上記表示)

あいうえお

  • あいうえお