DTPユーザーのためのWeb再入門［9］ボックスモデルがDTPアプリケーションにも導入されればいいのに……
── 鷹野雅弘 ──

上下方向、DTP的にいうと、段落前／段落後に対して、やはり余白や境界線を設定できるわけだが、DTPでは、段落ひとつひとつに対して、仮想ボックスがあると考える。段落内側の余白はすべて「パディング」であり、これは上下左右、独立して設定できる。さらに罫線も、上下左右独立して設定できるのだ。

DTPでも、段落（や見出し）の左側だけに罫線をつけたいときがあるが、その場合、段落前／段落後とそのインデントを工夫して疑似的に作るしかない。その点、Webの方ではこんな風にかけば、左側に余白を10ピクセルあけて、左側のみに赤で2ピクセルのラインを描くといったことが可能になる。

p {
border-left: 2px solid red;
padding-left: 10px;
}

●ボックスモデルのマージンと背景色／背景画像

さらにボックスには、パディング、ボーダーのさらに外側に「マージン」があり、こちらも上下左右独立して設定できる。また、ボックス内には背景色、背景画像を設定でき、背景画像はタイリング（繰り返し）したり、またそのボックス内のどこに配置するのかをピクセル指定することができる。

・見出しの背景のみに薄いカラーを設定したい
・上と左、右と下にそれぞれ罫線を設定し、さりげなく立体的な表現をしたい
・引用文の背景に「"」を装飾的に背面に設定したい

など、レイアウトの自由度が広がることが想像できるだろう。

ちなみに、大見出し< h1 >、中見出し< h2 >、小見出し< p3 >、フォーム< form >、テーブル< table >などは、「ブロックレベル要素」と呼ばれ、段落同様、ボックスモデルのもとに設定できる。一方、段落内の文字や画像などは「インライン要素」と呼ばれ、扱いが異なる。

●ボックスモデルがDTPアプリケーションにも導入されればいいのに……

スタイルシートレベルで装飾をコントロールできるようになると、その分、作業が減るし、修正にも強いデータを作成できる。

ちなみに、InDesign CSからGoLive用の書き出しをサポートしており、可能な限り、InDesignでの設定をスタイルシートに変換するようなしくみを持っているが、そもそもスタイルシートの根幹が異なるので、帯に短し……の機能だ。

Webのスタイルシートも生まれて10年近くになるが、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年。