セレクタとプロパティの基本

CSSはでセレクタ、プロパティ、値の組み合わせによってサイトをデザインします。セレクタでスタイルの適用範囲を、プロパティでスタイルの種類を、値で具体的な内容を指定します。 CSSの基本となるルールなので、しっかり覚えましょう。

基本的なセレクタの記述方法

CSSはHTMLの要素（タグ）に対してセレクタ・プロパティ・値を指定することで実現されます。要素に指定できる属性（プロパティ）は要素によって変わります。基本的な記述方法は以下の通りです。

セレクタの後ろに「{」「}」を書き、間に「プロパティ:値;」を記述します。
※プロパティが一つの場合セミコロンは必須ではありませんが、常に付けておいた方がいいでしょう。

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

p要素を赤くする場合の指定は以下のようになります。

{color:red;}

プロパティを複数書く場合、複数行に分けます。
※文末のセミコロンは最終行のみ省略可能ですが、付けておいた方が間違いないです。

��レクタ{
  プロパティ１:値１;
  プロパティ２:値２;
}

p要素を赤くしてフォントサイズを16pxにする場合の指定は以下のようになります。

{
  color:red;
  font-size:16px;
}

複数の値を指定するプロパティの場合、値を半角スペースで区切って指定します。

��レクタ{プロパティ:値１ 値２;}

例えばp要素に罫線を引く場合は、borderプロパティに線種、線幅、線色を指定します。

{border:solid 1px red;}

先ほどCSSはタグに対して指定するといいましたが、要素とセレクタは単純な１対１ではありません。スタイルの適用範囲を指定できる様々なセレクタが用意されています。よく使うものを説明するので、必要に応じて使い分けましょう。

全要素を対象にスタイルを指定する場合に使用します。 marginとpaddingを消すのに使用することが多いです。セレクタに「*」を指定します。

{プロパティ:値;}

要素を対象とします。セレクタに要素名を指定することで、要素にスタイルを適用します。

��素名{プロパティ:値;}

HTMLの要素にidを振って一意に識別し、そのidを持つ要素に対してスタイルを適用します。なお同一idはページ内に1つしか存在できません。セレクタに「#id名」を指定します。

id名{プロパティ:値;}

HTMLの要素にclassを振って識別し、そのclassを持つ要素に対してスタイルを適用します。 idとの違いはページ内に同クラスが複数存在できる事です。セレクタに「.class名」を指定します。

class名{プロパティ:値;}

特定の親要素を持つ子要素に対してスタイルを適用します。セレクタに「親要素 > 子要素」を記述します。

��要素 > 子要素 {プロパティ:値;}

特定の先祖要素を持つ子要素に対してスタイルを適用します。セレクタに「親要素子孫要素」を記述します。

��要素 子孫要素 {プロパティ:値;}

特定の兄要素のすぐ次に出現した弟要素に対してスタイルを適用します。セレクタに「兄要素 + 弟要素」を記述します。

��要素 + 弟要素 {プロパティ: 値;}