WEBエンジニア
css 分類

CSS ルールセットの構造

投稿者情報

  • 運営局 投稿
  • 投稿日

コンテンツ情報

本文内容

HTML のように、CSS(Cascading Style Sheets)とは本当のプログラミング言語ではありません。又マークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。

p {
  color: red;
}

試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを style.css として styles ディレクトリに保存します。

そしてCSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書表示に影響しません。

CSS をもう少し詳しく見ます。

p {               // pはセレクタと言います。
   color: red;    // colorはプロパティ出その次のプロパティの値です。これを合わせてDeclaration(宣言)と言う。
  }

全体の構造はルールセットと呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :


セレクタ (selector)
ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。
宣言 (declaration)
color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定します。
プロパティ (property)
指定された HTML 要素のスタイルを設定する方法 (この場合 color は <p> 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。
プロパティ値 (property value)
プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。


構文の他の重要な部分に注意してください:

各ルールセット (セレクタを除く) は中括弧 ({}) で囲む必要があります。 各宣言内ではコロン (:) を使用してプロパティを値から分離する必要があります。 各規則セット内でセミコロン (;) を使用し、各宣言を次の規則と区切る必要があります。
したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです。

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素を選択


複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。

例)

p,li,h1 {
  color: red;
}

 

関連資料

新着投稿


  • 投稿がありません。

新着書込み


  • 書込みがありません。
アラート 0