第１章 Boxモデルの概要
1-1. Boxモデルとは？
最近のホームページ作成技術の動向はホームページの構造的要素はHTMLに任せ、中身の見栄に関する要素はCSSに任せるというものです。この機能の分離によってHTMLの構造はよりすっきりし、その見栄については後で容易に変更が可能になるという保守作業も能率化が図られるという趣旨です。この機能の分離を巧く連携するように考えられたのがBoxモデルです。
HTMLの各要素（Element）を全てある種のBoxと見做し、その各々にID名やClass 名の印を付けてCSS, JavaScript, CGI, APIとの連携を図るのがこのBoxモデルです。
1-2. Boxとして適当なHTMLタグ
HTMLタグは全てCSSやJavaScriptの連携に最適なBoxとはなりうるかというと、筆者の経験から言いますと必ずしもそうではありません。以下に、HTMLタグをBoxとして相応しい順に列挙します。
- <div>タグ
DIVタグはウェブ・ページの枠組みを作ることによって、内容物をグループ化して整頓する役割を果たすと同時に、CSSやJavaScriptとの連携に最も相応しいタグです。 一頃はTABLEタグがこの役割をしていましたが、その特殊性で現在プロと言われる人たちはTABLEタグを枠組みを作りに使っていないようです。<div>タグは多くの場合ID名を付られて大枠、中枠、小枠に使われることが多いようです。
- <p>タグ
<p>タグはホームページ・ビルダーの「ページ編集」画面で文字列を入力すると自動的に前後に<p></p>が生成されますので、非常に便利なBOXタグとして利用されます。 殆どの場合CLASS名を付られCSSとの連携に使われます。然しながら、HTMLタグの侭で連携に使われますと、そのページ内の全ての<p>タグにそのCSSルールが適用されてしまいますので注意して下さい。
- <h1>、<h2>、<h3>、<h4>、<h5>、及び<h6>タグ
<hn>タグはたった6つしか用意されていませんので、ID名を付らないでもそのページ唯一のBOXタグとして非常に便利に使うことが出来ます。勿論、CLASS名を付っても使うことが出来ます。
- <ul><li>又は<ol><li>タグ
<li>タグは同種の文字列をリスト状にならべて表示するBOXとしてよく利用されます。但し、同種の文字列に同種のCSSルールを適用するという点に限られることに注意してください。<li>タグ毎に別々のCSSルールを適用するには向いていません。
- <TABLE>タグ
<TABLE>タグは本来の表としてはBOXになり得ますが、ウェブ・ページ内の内容物をグループ化する枠組みとして使うのには向いていないようです。<TABLE>とか<TR>とか<TD>とか<TH>の複数の要素が絡んできますので、連携には適していないのです。
- <a>タグ
<a>タグはBOXタグとしては使うことは出来ません。使う場合は、必ず<p>タグか<hn>タグの中に入れて、その親BOXにCLASS名を付ってCSSとの連携を図ります。但し、タグに配置等に関係ないスタイル・ルールは適用できます。
- <img>タグもBOXタグとしては使うことは出来ません。使う場合は、必ず<p>タグか<hn>タグの中に入れて、その親BOXにCLASS名を付ってCSSとの連携を図ります。但し、タグに配置等に関係ないスタイル・ルールは適用できます。
1-3. BOXとスタイルのルールとの連携の仕方
ホームページ・ビルダーの「表示」メニュー → 「スタイルシート・マネジャー」 →＜スタイルの設定ダイアログ＞を表示したら、先ずその左上隅にあるスタイルの設定方法を選びます。 ホームページ・ビルダーには3種類の方法しか表示していませんが、第4の非常に有効な方法もあります。
BOXとスタイルのルールとの連携の仕方には次の４通りの方法がありまます。
- HTMLのタグ名を指定する
HTMLのタグ名を指定する場合は、<h1>のようにそのページ内に一回しか使用されていないタグなら良いが、<p>タグのように頻繁に使われているものには、タグ名そのものを指定すると、特定のスタイルがそのページ内のすべてのタグに適用されてしまうので注意を要します。
- HTMLタグに ID名を付って、そのID名を指定する
ID名を指定する場合は、そのページに一回しか出て来ないBOXしか指定できない。例えば、そのページの大枠のDIVタグのようなもの。
- HTMLタグに Class名を付って、そのClass名を指定する
Class名を指定する方法は、<p>タグのようにそのページ内に何回も出てくるタグに対して、別々のスタイル・ルールを適用したい場合に向いています。その場合、同じHTMLタグに対して別々のClass名を付して、その各々に別のスタイル・ルールを規定すればよいのです。
- HTMLタグの階層パスで指定する
残念ながら、ホームページ・ビルダーV15にはこのパスを指定する手立ては用意されていませんが、当面はスタイル・シートのソース上で、手入力すれば指定することは可能です。例えば、contentDIVの中のleft_sideDIVの中の、main_txtのClass名を付した<p>タグを指定して、フォント・サイズ１４ｐｘ、太字のルールを設定する場合は；
#content #left_side p.main_txt { font-size: 14px; font-weight: bold;
}と入力する。 これは非常にフレクシブルな指定方法です。