見映えはスタイルシートで

HTML 文書の見映え

さてHTMLの基本を押さえたところで、「文書型(DOCTYPE)宣言」のページで実際に目印をつけて完成させた「私のパソコン日記」をもう1度ブラウザで見てみましょう。

文書の構造(だけ)を意識してマークアップしたため、どれが見出しでどれが段落かはパッと見てわかるように表示されていると思います。しかしながら、愛想のないページですよね。(;^_^A

これにちょっとお化粧をして、もう少し「見映え」を良くしたいですよね。でないと、アップロードした時に来てくれる訪問者の方に申し訳ないし・・・、と考える人が多いんじゃないかなと思います。(そう思わない人はこのままアップロードしても全く問題ないですけどね)

HTML4.01 StrictのDTDに則ってマークアップしただけでは、ブラウザで見た結果ははっきり言って愛想のないものになってしまいます。でもちゃんとお化粧道具は揃っているんですね。それがこれから説明する「スタイルシート」です。

W3Cは、HTML文書を作成する際、「文書の構造」と「見映え」を分離して作成することを推奨しています。前者はHTMLで、後者はスタイルシートで、という訳です。なぜかと言いますと、いろんなメリットがあるからです。例えば、

ということが挙げられます。

それでは、いよいよスタイルシートへ入っていくことにしましょう。

スタイルシートとは?

完成した「私のパソコン日記」をもう1度見てみましょう。Internet Explorerで見た場合を例にとると、「私のパソコン日記」というh1要素が一番大きな文字で表示されています。h2要素である日付の部分はh1要素に次いで大きな文字で表示されています。h3要素である「ウェブサイト作成に挑戦!」と「今日嬉しかったこと」はh2要素に次いで大きな文字で表示されています。p要素である各段落は一般的な大きさの文字になっていますね。また各見出し・段落の前後で改行されて1行分の空白行ができています。

なぜこういう表示になるのかというと、Internet Explorerというブラウザが独自のスタイルシートを持っているからなのです。HTML文書を、独自のスタイルシートという「フィルター」を通してから表示しているわけです。具体的に言うと例えば、「h1要素はこういう大きさで、この色で、この位置に表示し、前後に改行を入れる」といったことがスタイルシートによって決定されています。すなわち、スタイルシートとはHTML文書の表示方法(見映え)を決定するものなのです。

ということは、それぞれのブラウザが持っているスタイルシートとは別に、「フィルターであるスタイルシートをサイト作成者側で用意し、作成したHTML文書に適用する」ということも可能なのです。この方法を用いることによって、自分のサイトに自分なりのお化粧を施すことができるようになるのです。

HTML文書の表示方法を決定するスタイルシートとして、W3CはCSS(Cascading Style Sheet)を用いることを推奨しています。カスケードするスタイルシート、すなわち細かい指定をしなくても上から順に指定が継承されて行く、トップダウン方式のスタイルシートです。

次ページ以降、「サイト作成者によるCSSの適用方法」について説明していきます。