初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL2. スタイルシートのさまざまなメリット

その3★より詳細な設定が可能になる

例えば、従来のようにHTMLで背景を指定した場合、指定された画像は画面上で無限繰り返しされるだけでした。しかし、スタイルシートで指定すれば、画像そのものの位置、繰り返し方向を細かく設定できます。自由な位置に背景画像を固定できることにより、上に乗るテキストや画像の位置との相関関係を用いて、凝ったデザインが実現できるでしょう。

      ★背景画像を好きな位置や方向に、固定できる★

また、HTMLでは段落間の幅を指定することは出来ても、行間や文字の間隔を指定することはできませんでした。これらはフォントによって最も読みやすい幅が異なりますので、これを指定することで見易さを細かくジャストフィットすることも出来るのです。

　　★行間や文字間隔も自由に設定できる★

上の例では、CSSを使って行間や文字間隔、背景色を指定し、更に背景画像をテキストに被り過ぎない位置に配置してみました。CSSを使えば、このように様々な部分指定を重ね合わせることにより、多様な表現を生み出すことも可能です。

なお、各boxはテーブルのセルと同じように個別に背景を指定できますし、枠線の表示・非表示、太さや色、実線・点線などのデザイン、表示位置なども自由に設定できます。いくつものboxを配列する場合、重なる順序を指定することもできますので、これらによってページ全体のデザインに従来より遥かに多様性が生まれることは言うまでもないでしょう。

以上の他にも、

★出力媒体ごとの設定が可能になる

★ユーザー側でスタイルシートを切り替えられるようにできる

など、Usabilityへの配慮もメリットとして挙げられます。

仕様上、HTMLが読み込むスタイルシートは、その適用対象メディアを9種類に分けて指定できるようになっています。通常のパソコン画面（ディスプレイ）への出力の他に、プリンタ、テレビ、プロジェクタ、携帯用機器、点字出力、音声出力、テキスト端末、全てのメディアの9種類です。例えば、プリンタでの出力用に用意されたスタイルシートが、ディスプレイ用と別に指定されている場合、画面で見る通りに印刷されるわけではなく、プリンタ用の指定に従って出力されます。プリントアウトする場合に必要なのがテキストのみであることも多く、このような場合が想定されるページに印刷用スタイルシートが指定されていれば、ムダな背景画像やメニューなどを省いて出力されるよう指定しておくことも出来るのです。

ただし、適用対象メディアの指定は、現時点ではこれら全てが指定可能になっているわけではなく、大半のブラウザでは画面とプリンタを分けて指定できる程度に留まっているようです。これへの対応は、今後を期待しましょう。

このようにスタイルシートを用いるとAccessibility やUsabilityへの配慮のみならず、多様な表現が可能になることから、使い方次第で視覚性の向上も望めるなど、多岐にわたるメリットがあるということがお分かり頂けるでしょう。ただ、現在の時点ではブラウザによって確実に反映されないものも多いということを念頭においておく必要はあります。今後ブラウザのCSS対応が進むにつれ、Web標準であることのメリットが享受できるようになってゆくものと思われますが、このような流れやメリットがあるからと言って、必ずしも即刻スタイルシートを導入しなければならないというものでもなく、クロスブラウザの問題が深刻化していることからも、導入やその時期・度合いについてはサイトの目的や顧客層とも考え合わせて、各管理者が独自に判断すれば良いことだと思います。

初級篇2.VOL2.スタイルシートのさまざまなメリット・その2　<<

>> 初級篇2.VOL3.スタイル設定の書式・その1-1