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

CSS

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

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

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

基本的な指定

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

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

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

{color:red;}

単一セレクタに複数のプロパティを指定する場合

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

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

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

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

単一のプロパティに複数の値を指定する場合

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

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

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

{border:solid 1px red;}

セレクタの適用範囲

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

ユニバーサルセレクタ

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

{プロパティ:値;}

タイプセレクタ

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

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

idセレクタ

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

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

classセレクタ

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

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

子セレクタ

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

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

子孫セレクタ

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

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

隣接兄弟セレクタ

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

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

CSSで指定したスタイルをHTMLに読み込む方法

eyecatch

ブラウザの先行・拡張機能を実装する機能「ベンダープレフィックス」

CSSの記事

eyecatch

ブラウザの先行・拡張機能を実装する機能「ベンダープレフィックス」

eyecatch

ドロップシャドウでテキストやボックスに影を付ける

eyecatch

CSSでアニメーションを設定する

eyecatch

ブロックレベル要素とインライン要素

eyecatch

CSSとは

eyecatch

要素セレクタで条件下の要素のスタイルを変える方法

CSSの記事一覧HOME