DTPユーザーのためのWeb再入門[7]構造と表現の分離を、スタイルシートで進める(1)/鷹野雅弘

投稿:  著者:  読了時間:4分(本文:約1,700文字)


セオリー・オブ・スタイルシートWebの世界では、数年前から、その制作手法が大きく変わりつつある。これまでは、HTMLファイル内に書式やレイアウトなどのビジュアル情報を書き込んでいたが、ビジュアル情報をHTMLから分離し、スタイルシート(CSS)ファイルに記述する。

同時に、HTMLファイルの方では、ここが大見出しです(<h1>)、ここが中見出しです(<h2>)、これは箇条書きです(<ul>)、ここは本文です(<p>)のように、文書の中で各段落がどのような役割を持っているかを記述する。これを「構造(structure)と表現(presentation)の分離」と呼ぶ。


たとえば、文字色を変更したい場合、「<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年。


photo
Illustrator CS2 完全制覇パーフェクト
鷹野 雅弘
翔泳社 2005-11-22
おすすめ平均 star
star鷹野 雅弘さんのものは、自分の肌に合う。
star素晴らしい!!
star基礎を説明した本です
star絶対おすすめです!!
star初心者にも上級者にもオススメだと思います。

Photoshop CS2 完全制覇パーフェクト CS2/CS 対応 Illustratorトレーニングブック―8/9/10/CS/CS2対応 プロとして恥ずかしくないIllustratorの大原則 Adobe InDesign CS2 マスターブック for Macintosh & Windows プロとして恥ずかしくないPhotoshopの大原則―正しいPhotoshopの使い方を知っていますか?

by G-Tools , 2006/10/06