CSS概論

Updated / Published

Cascading Style Sheets（カスケーディングスタイルシート）とは何か・何ができるのかということから、基本的な使い方を説明します。

CSS とは何か・何ができるのか

CSSとは

多種多様な User Agnet（ユーザエージェント、略称をUA）がアクセス（支障なく情報を取得）できるアクセシビリティの高いサイト作りには CSS（Cascading Style Sheets：カスケーディングスタイルシート）は欠かせません。CSS を使うことで、(X)HTML は本来の情報伝達のみの役割に徹することができ、さらにウェブページの見栄えを整えるのに役立ちます。Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しており、UA は制作者スタイルシート、ユーザスタイルシート、デフォルトスタイルシートの3つの中から好みのスタイルを自由に選択できるのが特徴です（スタイルを選べない UA もある）。

まず、スタイルシート（Style Sheets）とは HTML や XHTML のようにウェブ上で使われている言語に限ったものではなく、PC（パソコン）を利用している方であれば、普段から何気なくスタイルシートにふれていることが多いはずです。たとえば、Microsoft Word, 一太郎などのワープロソフトにもフォントの種類や文字の大きさ、色、行間の指定など様々な文書の見栄え（レイアウト）に関する情報を定義できるようになっていますが、これもスタイルシートです。

ウェブ上で使われるスタイルシートは、主に (X)HTML文書に対しての見栄え（レイアウト）を定義することを指します。スタイルシートには、いくつかのスタイル言語（種類）があり、(X)HTML文書の見栄えを指定するためのスタイル言語には、各視覚環境の UA の対応状況から CSS が一般的に使用されています。つまり、CSS もいくつかのスタイルシートの中の一種でしかなく、他にもウェブ上で使われているスタイル言語に XSL（eXtensible Stylesheet Language）などがあります。CSS が (X)HTML文書に対しての見栄え（レイアウト）を定義するのに対し、XSL は XML文書に対しての見栄え（レイアウト）を定義します。そして、本稿で扱うのが (X)HTML文書に対しての見栄え（レイアウト）を定義するスタイルシートである CSS というわけです。

CSSで何ができるのか

では、CSS で一体何ができるのでしょうか。(X)HTML には文章を 「見出し」「段落」「リスト」「表」のように各部分を構造化する特徴があります。これに対して、(X)HTML文書の見栄えを定義する CSS は、これら (X)HTML によって構造付けされた「見出し」なら「見出し」の構造に対してレイアウトを定義するのが特徴です。

たとえば、(X)HTML で見出しと構造化した部分に、文字の色や形など装飾に関する指定まで含められていると、見出しとしての情報以外にも不明確な情報が混じってしまったことで情報伝達の妨げ（機械的な処理における妨げ）となります。そこで、従来の HTML が担ってきた情報伝達と見た目を整える2つの作業の内、見た目を整える作業を CSS が担うことで、(X)HTML文書が効率的に情報交換を行えるように、(X)HTML文書が本来の役割とは違う見た目を達成するのに役立ちます。

つまり、CSS は (X)HTML文書のコンテンツや論理構造と表現（見栄え）とを分離させることで、さまざまなメリットを生みます。機械が処理しやすいシンプルな(X)HTMLを保持することで、(X)HTMLは本来の役割に徹することができ、さらに一度定義したスタイル情報は複数の (X)HTML文書間で共有させることができるように設計されているので、サイト全体のデザインに一貫性を持たせることができ、メンテナンス性が大幅に向上します。CSS による文書のプレゼンテーション手法を習得すれば、あなたのウェブサイトはより鮮やかに、そしてより効率的な情報交換が行えるようになるのです。

CSS を外部化するメリット

CSS により定義したスタイル情報を (X)HTML文書に適用する方法は、主に次の3通りの方法に別れます。

  1. 適用させる要素に対して、style属性を追加して直接スタイル情報を指定する
  2. 適用させる (X)HTML文書の head要素内に style要素を使ってスタイル情報（CSS のルールセット）を記述する
  3. スタイル情報（CSS のルールセット）を記述したファイルを別に作成し、link要素で (X)HTML文書とスタイルシートのファイルとを連結させる

これら3通りの方法のうち、もっとも簡単なのは、1番目の style属性で直接スタイル情報を指定する方法でしょう。この方法はウェブページの作成に慣れていない制作者ほど、この方法を使っていることが多いはずです。しかし、最も CSS のメリットを活かすことができるのは、3番目のスタイル情報（CSS のルールセット）を記述したファイルを別に作成し、link要素で (X)HTML文書とスタイルシートのファイルとを連結させる方法です。一見、この方法が最も難しそうで手間がかかりそうですが、何故このような方法を使う必要があるのか、そのメリットを説明しておかないことには、CSS 専用のファイルを作成して、その別ファイルからスタイル情報を参照させるような面倒なことをする必要性があるのかを理解できないことと思います。

1番目、2番目の方法は当該文書に直接スタイル情報を記述するので、そのスタイル情報が反映される有効範囲は当該文書のみです。これに対して、CSS のルールセットを記述した別ファイルを外部から参照させる方法は、同じlink要素をもつ全ての (X)HTML文書に共有できるので、サイト全体の表現を簡単に統一することができます。さらに、スタイル情報を定義しているファイルの内容の一部を変更するだけで、サイト内の全ての (X)HTML文書のデザインを同時に全て変更することが可能になるので、作業の効率性・メンテナンス性が飛躍的に向上します。

メリットはこれだけではありません。ウェブページ作成の心得みたいなものに「KISSを大切にせよ」という一種の格言があります。"KISS" とは「Keep It Simple, Stupid」、または「Keep It Small and Simple」のそれぞれ頭文字をとったもので、どちらも「ウェブページは、シンプルにすべし」ということを意味します。外部から参照する方法は、他の2つの方法とは違って (X)HTML文書自体に直接スタイル情報を記述しているわけではないので、(X)HTML文書はシンプルな状態のままで、装飾を施すことができます。これにより、(X)HTML文書自体のファイル容量を抑えることができるので、ブラウザはキャッシュの機能をつかうことで他の方法と比べてもページのレンダリング（描画）が速くなることが期待できます。

また、CSS の機構が提案される以前から HTML文書に対するスタイルシートは link要素で参照する方法が提案されていたので、CSS の仕様も、またそれを実装している UA においても、スタイルシートを link要素で提供する方法で最適化されるように設計されていると考えられます。

関連

CSSファイルの作成方法

CSSファイルとは、(X)HTML文書内の各要素を目印（セレクタ）にスタイル宣言のルールセットを記述したファイルのことを指します。スタイル宣言のルールセットは、Windows であればメモ帳、Macであればテキストエディットなどの付属のテキストエディタを利用して記述することができます。たとえば、(X)HTML文書において見出しとして定義された h1要素に対して、レイアウトを施したい場合は次のような形式でスタイル情報を記述します。

h1 {
text-align : center ; border-width : 1px 4em 0em 4em ;
border-style : solid ; border-color : navy ;
}

これは h1要素内のテキストを中央揃え（"text-align: center ;"）にして、さらに枠線の装飾（"border-width : 1px 4em 0em 4em ; border-style :solid ; border-color : #000080 ;"）を施しています。こうしたルールセットをいくつも記述して、CSSファイルとして保存します。

CSSファイルを保存する際には、(X)HTML文書であれば一般的に「.html」、または「.htm」といった拡張子をつけるように、 CSSファイルの場合は「.css」の拡張子をつけて保存するのが一般的です。

余談ですが、拡張子はサーバ設定ファイル（Apacheウェブサーバであれば httpd.conf や .htaccess）の MIMEの設定に依るので、指定の拡張子に対する MIMEを定義することでどのような拡張子であっても CSSファイルとしてUAに通知することもできます。

CSSファイルを(X)HTML文書に組み込む

(X)HTML文書で CSS を使う場合には、ウェブブラウザがページを表示する際や検索エンジンのロボットがウェブページの情報を収集する際など、これらの UA が誤作動を起こさないように head要素内に UA に対してあらかじめ 「この (X)HTML文書では CSS を使用しています」といった通知によりスタイル情報を正しく解釈できるように CSS 専用の MIMEを記述しておきます（なお、XHTML1.1 以降の規格では、次の meta http-equiv宣言は HTML互換のため設定すること自体が認められていません）。CSS の MIMEタイプは "text/css" です。

<meta http-equiv="Content-Style-Type" content="text/css">

次に、link要素に対して href属性でウェブサーバー内における CSSファイルの所在を URI で示します。この指定が行われた (X)HTML文書は link要素で指定された CSSファイルを参照することができるようになり、CSS に適合する UA であれば、その CSSファイルのスタイル情報を解析し、(X)HTML で構造化されている各要素に対して、それぞれのスタイル宣言に応じたレイアウトを施した状態でレンダリング（描画）します。

<link rel="stylesheet" href="sample.css" type="text/css">

link要素の rel="stylesheet" の部分が外部の CSSファイルの参照を示し、続く href="sample.css" の部分が外部の CSSファイルである "sample.css" を参照するように、その所在を示しており、type="text/css" が CSS用の MIMEを示したものです。なお、この link要素の指定を複数記述することでひとつの (X)HTML文書に対して複数の CSSファイルを参照させることも可能です。

関連