読了時間:4分(本文:約1,700文字)ツイートはてブするWebの世界では、数年前から、その制作手法が大きく変わりつつある。これまでは、HTMLファイル内に書式やレイアウトなどのビジュアル情報を書き込んでいたが、ビジュアル情報をHTMLから分離し、スタイルシート(CSS)ファイルに記述する。同時に、HTMLファイルの方では、ここが大見出しです(<h1>)、ここが中見出しです(<h2>)、これは箇条書きです(<ul>)、ここは本文です(<p>)のように、文書の中で各段落がどのような役割を持っているかを記述する。これを「構造(structure)と表現(presentation)の分離」と呼ぶ。color="red">対象の文字列</font>」のように記述していた。1文書内に100個、200個と存在していた<font>タグを排除することができるだけでも、HTMLのソースが軽く、見やすくなることを想像できるだろう。HTMLにはビジュアル情報を表現するタグはなかったのだが、その発展過程で拡張されたきた。それが一巡したと言える。そこで、<font>タグの代わりに利用するのが「CSS」だ。DTPの場合には、たとえば「本文」というスタイルを作成し、そのスタイルを「文字サイズ9.5pt、行送り16pt、ジャスティファイ、文字色スミ」のように定義し、ちまちまと対象となる段落に適用する。Webの場合、このワークフローに対応するのが「クラス」と呼ばれるものだ。{color:red;}」のように記述する。日本語と同じ流れで、「descriptionというクラスの文字色(color)を赤(red)に設定する」と読める。class="description">のように記述すれば、その段落の文字色が赤になるという流れだ。{color:blue;}」のように1箇所だけ変えれば、リンクしているすべてのHTMLファイルが表示が変わる。無数にある<font>タグを修正するのに比べて、スマートで簡潔だ。このように「クラス」によるCSSの適用方法は、DTPユーザーにとってわかりやすいものといえるが、実際のところ、クラスによる指定は、なるべく避けるのがセオリーだ。次回は、さらに踏み込んで、クラスの代わりとなる実用的な手法を紹介する。Japan)など、豪華なスピーカーで10月10日(来週の火曜日)に津田ホールで開催します。100以上の職種を経験後DTPやWebの制作、トレーニング、ライティングは飽きずに10年。雅弘さんのものは、自分の肌に合う。素晴らしい!!基礎を説明した本です絶対おすすめです!!初心者にも上級者にもオススメだと思います。Webにはページ数の制約がない/鷹野雅弘この著者の記事一覧へこのサイトについてこのサイトは平日毎日発行しているメールマガジン「日刊デジタルクリエイターズ」のバックナンバーを収録しているサイトです。1998年4月の第1号からすべて収録されています。著者別の掲載リストもあり(ページ末尾)、気になる著者のバックナンバーを読むことができます。基本的にメールマガジンの発行後、このサイトが更新されるので、最新情報を確実に読みたい場合は、メールマガジンを購読して頂くことがお薦めです。「日刊デジタルクリエイターズ」のメールマガジンは、デジタルメディアで活躍する現役クリエイターたちのコラムで構成されている本格派のメールマガジンです。実用的な内容から、インスピレーションを刺激する内容まで多彩なコラムをお届けします。メールマガジンスタンドの「まぐまぐ」「melma!」にメールアドレスを登録するだけです。ご購読は以下のボタンから。Amazonを使用しています。記事)川合和史@コロ。