HTML文書とスタイル

HTML文書の存在意義

HTMLが登場した一番大きな目的は、文書の論理的構造を明確に 記述できるようにして、どんなコンピュータを利用して読んだときも、 表している内容が正確に伝わること、ということである。 つまり、自分がHTMLで書いたものを、他の人がカラーディスプレイのついている パソコンで読んでも、白黒画面で読んでも、 携帯電話で読んでも誤解無く意味が伝わるようになっていることが大前提である。

しかし、文書の構造を伝える場合に、文書の見栄えを利用する場合がある。 たとえば、文章のとても重要な部分にはアンダーラインを引いたり、マーカーで なぞったりすることがある。そのように適切に色をつけることで読み手に重要な 部分を明確に伝える助けとなる。ここで一つ注意しなければならない点がある。

重要なのは「赤い線を引くこと」ではな く、「そこが目立つような装飾をすること」である。

つまり、ほとんどの場合にすることは、 他の部分と違うことを伝えるための「手段」であり、赤でなければならないとい うケースはありえない。たとえば、試験勉強のとき教科書の大事なところに、オ レンジ蛍光ペンを引こうと思った。ところが、黄色しかなかった。さてどうしよ う。普通は「大事だと分かれば良い」ので、色が違うことは気にしないだろう。 たとえば、「ここは重要」と書い ても、「ここは重要」と書いても、 役割を果たす。

さて一方、色に関する話題を書くときのように、「赤」を表現するときに で書くことが目的、かつ重要であることもある。 このような場合はストレートに「赤」であることを表現した方が良い。

以上のことをまとめると、「重要であること」を示したり「目立たせる」た めに色や大きさを変えたりするのか、それとも「色そのもの」や「大きさそのも の」を示したいのかを考えてHTML文書の装飾を考えることが重要である。

スタイルシート

HTML文書の見栄え(スタイル)をコントロールするには、 スタイルシートを利用する。

文書とスタイルを重ね合わせるの図

上図のようなイメージで文書とは独立した部分に見栄えを定義するものを書 いておき、実際にブラウザで表示されるときに、その二つが合成されて文書に 様々な装飾が施されて表示される。現在一般的に利用できる方式に カスケーディングスタイルシート(Cascading Style Sheet; CSS)がある。

cssの指定方法

スタイルシートを利用するには

の最低限二つのファイルを作成し、HTML文書ファイルからスタイル定義 ファイルを読み込むような指示を書く。たとえば、前回作成した sample.html で独自のスタイルを利用したい場合は sample.html ファイルのhead要素の中に以下のような記述を 追加する。

<html>
 <head>
 <title>
 初めてのHTML
 </title>
 <link rel="stylesheet" type="text/css" href="sample.css">
 </head>
   :
   :
 (続く)

上記の例中、sample.css の部分は スタイル定義を書き込むためのファイル名で、好きな名前にして良い。ここでは sample.cssというファイル名にするものとする。

スタイル定義の文法

スタイルを定義するファイルでは、たとえば、

h1要素は大見出しだからセンタリングしたいなあ

のように、指定した要素の見映えを制御することができる。つまり、

を逐一思い通りに指定することができる。そのための記述する文は 以下のように書くことになっている。

要素 {属性: ;}

もし、

h1要素は大見出しだからセンタリングしたいなあ

と思うのであれば、それは、

h1 {text-align: center;}

のように書くことになる。text-align は、 文章を左右中央どこに配置するかという属性で、取り得る値は left, right, center, justify のどれかである。 上の例では、「中央」を意味する center を 指定したので、全てのh1要素が中央揃えされる。

このように、スタイル定義ファイルには、 どんな要素の、どんな属性を、どんな風に変えたいか という指定を列挙することになる。

この定義には、視覚的属性だけでなく、読み上げソフトを使う場合の音量なども 記述することができる。


目次


(C)2004 OKOMA Lab. koeki-u.ac.jp