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

●領域名＋タグ名でスタイル付けの軽減

たとえば、2段組のケースを想定する。右側にはメイン（本文）、左側にはサイドバー（2段組などを行なう場合、カテゴリ内のナビゲーションなどを配置する領域）と分かれるので、それぞれの内容をすっぽりと< div >〜< /div >で囲む。divはdivision（区分）に由来し、複数のタグをとりまとめるときに使うもの。それらのdivを識別するための名称を「id属性」と呼ばれるものを使って指定する。つまり、< div id="main" >〜< /div >、< div id="sidebar" >〜< /div >という要領だ。

「id属性」はCSSでは「#id名」のように指定できるので、メイン（本文）領域の中の本文には「#main p」のようなセレクタ（スタイル名）をつければ、メイン（本文）領域中にいくつ段落が出てきても、それぞれの段落に対して設定する必要がなくなる。「#main」の中の「p」のように単独でも使うセレクタをスペースを入れて並べることを「子孫セレクタ」と呼ぶ。「#main p」は、pはpでも#mainの中にある場合のみを表す。

●CSSのCの由来

さて、CSSはCascading Style Sheetの（カスケーディング／キャスケーディング）略だが、この「C」も、DTPのスタイルシートと大きく異なる。Cascadeには「小さい滝」とか「段階をなしているもの・そのような構成；しばしば上層から下層へと段階を経るごとに分岐して増殖するもの」といった意味がある。簡単にいうと、対象となるものに対して複数レベルでの設定が可能だということだ。

たとえば、先ほどの「#main p」で「文字色：濃いグレー、背景色：白、行間：150％」に指定したとする。main領域内のp（段落）はすべてこの設定になるが、その中の特定の段落だけに「文字色：緑、左右インデント：2文字分」という設定を行なうと、結果としてその段落は、「文字色：緑、背景色：白、行間：150％、左右インデント：2文字分」となる。つまり自分より「親」の設定も引き継ぎつつ、自分自身に対しての設定も適用される。文字色のように設定が重なる場合には「直近」のものが優先される。

この「Cascade」という仕組みは、< body >というページの大元に対しての設定できるので、ざっくりとこのページは〜と設定しておいて、それぞれの領域ごとの指定といったことが可能になる。

この自由度の高さが便利な反面、使いこなすのがやっかいなところだが、DTPのスタイルにもこのような仕組みが導入されればよいのに、と思う。

・CSS Nite LP, Disk 2「Dreamweaver CC」
Dreamweaver使いによるDreamweaver使いのためのDreamweaverに特化したセミナーイベント
< http://lp2.cssnite.jp/info.html
>

・CSS Niteの地方版の第二弾「CSS Nite in Osaka」
< http://osaka.cssnite.jp/info.html
>

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