DTPユーザーのためのWeb再入門［7］構造と表現の分離を、スタイルシートで進める（1）
── 鷹野雅弘 ──

たとえば、文字色を変更したい場合、「<font color="red">対象の文字列</font>」のように記述していた。1文書内に100個、200個と存在していた<font>タグを排除することができるだけでも、HTMLのソースが軽く、見やすくなることを想像できるだろう。

元々、HTMLにはビジュアル情報を表現するタグはなかったのだが、その発展過程で拡張されたきた。それが一巡したと言える。

そこで、<font>タグの代わりに利用するのが「CSS」だ。スタイル、またはスタイルシートといえば、DTPユーザー（といっても組版関連）にはお馴染みだが、これに「カスケーディング」がついたものがCSS（Cascading Style Sheet）だ。

DTPの場合には、たとえば「本文」というスタイルを作成し、そのスタイルを「文字サイズ9.5pt、行送り16pt、ジャスティファイ、文字色スミ」のように定義し、ちまちまと対象となる段落に適用する。

一方、Webの場合、このワークフローに対応するのが「クラス」と呼ばれるものだ。たとえば「description」というクラスを作成し、文字色を赤に設定する場合、CSSでは「description {color:red;}」のように記述する。日本語と同じ流れで、「descriptionというクラスの文字色（color）を赤（red）に設定する」と読める。

次に、対象となる段落に<p class="description">のように記述すれば、その段落の文字色が赤になるという流れだ。

カラーを変更したい場合には、CSSファイル内で「description {color:blue;}」のように1箇所だけ変えれば、リンクしているすべてのHTMLファイルが表示が変わる。無数にある<font>タグを修正するのに比べて、スマートで簡潔だ。

このように「クラス」によるCSSの適用方法は、DTPユーザーにとってわかりやすいものといえるが、実際のところ、クラスによる指定は、なるべく避けるのがセオリーだ。

次回は、さらに踏み込んで、クラスの代わりとなる実用的な手法を紹介する。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
「早く行かなくても座れるCSS Nite」=CSS Nite LP
境 祐司、矢野りん、上ノ郷谷太一、長谷川恭久、Charles McCathieNevile（Opera）、瀧田佐登子（Mozilla Japan）など、豪華なスピーカーで10月10日（来週の火曜日）に津田ホールで開催します。
< http://lp1.cssnite.jp/info_lp01.html
>

【たかのまさひろ】takano@swwwitch.com
トレーナー・テクニカルライター・デザイナー
株式会社スイッチ代表 < http://swwwitch.jp/
>
モスバーガー店員から英会話塾講師、職業作詞家等、100以上の職種を経験後DTPやWebの制作、トレーニング、ライティングは飽きずに10年。