CSSとは何ですか?

CSS(Cascading Style Sheet: カスケーディング スタイル シート)

CSS(シーエスエス)はHTML文章の視覚的表現をコントロールする役割を果たします。

具体的にはテキストの色を変更する、表の枠線の太さを変える、リスト項目の間を広げる等が可能になります。

HTML仕様はバージョンアップを繰り返す中で、視覚的表現も行えるようになるなど機能的にも盛りだくさんになりました。しかし、HTMLの本来の目的は文書の論理構造を記述することです。そのため、視覚的表現を行う枠組みとしてCSSが策定されました。

HTMLとCSSの分離

h2タグのテキストカラーを赤で表示するCSSの例

CSS
h2 {
  color: #f00;
}

CSSを利用すると何が良いの?

論理構造と視覚的表現を別々に管理することができるようになるため、保守性・再利用性が向上します。

具体的には

  • 見た目に関する変更を行うためには、HTML文章に手を加える必要はなくCSSを編集するだけでよい。
  • 新しくHTML文書を作成する際に、過去に利用したCSSを流用することで作業時間が短縮できる。
  • 視覚表現に関する記述を切り離すことで、HTML文書ファイルのサイズを小さくすることができる。読み込み時間が短縮されることで、ドキュメント閲覧者のストレスが減る。
  • PCでの表示用、印刷用など、利用用途別により適用する視覚表現を分けることができる。

などが挙げられます。

HTML文書とCSSの組み合わせ

視覚的表現に関するHTML要素(font要素、center要素など)は、HTML4.01仕様において「利用は推奨しない」と明言されています。代わりにスタイルシートを使っての視覚的表現が推奨されています。

どのバージョンを利用するべき?

CSS2.1を利用しよう

これからホームページ制作を学ぶ人は、ブラウザの対応状況や利用度から考えてCSS2.1仕様に従った記述を行うようにしましょう。

現在CSS3.0仕様が検討中ですが、まだドラフト(草案)の段階です。ブラウザによってはCSS3.0仕様の一部に早くも対応しているものがありますが、最終勧告仕様ではないため導入には注意が必要です。