CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)とは、文書の構造(HTML)と体裁(CSS)を分離して定義するスタイルシートで、World Wide Web Consortium (W3C)が勧告しています。CSSの書き方をご紹介します。

style属性

HTMLタグのstyle属性にCSSプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することもできる。

<h2 style="font-size:large; color:red;">スタイルシート</h2>

/* と */ に囲まれた部分はコメント（注釈）となる。コメントは複数行にわたってもよい。ただし、入れ子（ネスト）にすることはできない。

他の言語にあるような // や # といった単一行コメントは、CSSには無い。

h1 {
  /* 背景は赤色 */
  background-color: red;
}

CSSでは変数を使うことができます。

CSS変数にはスコープ（有効範囲）があり、CSS変数を定義したCSSセレクタ内でのみ有効です。

div.primary {
  /* 変数の宣言 */
  --color-primary: blue;
  /* 変数の参照 */
  color: var(--color-primary);
}

ただし、:root 疑似クラス内で定義したCSS変数はグローバルとなり、どこからでも参照することができます。

:root {
  /* 変数の宣言 */
  --color-primary: blue;
}
div.primary {
  color: var(--color-primary);
}
span.primary {
  color: var(--color-primary);
}

変数の宣言で値を変えれば、変数を参照しているすべての箇所をいっぺんに変更することができます。