第２章　Boxモデルの基本

２-1.　Boxの入力方法

前章でBoxモデルはHTMLタグとCSSルールの連携であると述べましたが、BodyのHTMLタグの部分とCSSルールをどちらが先に入力すべきかは一概に言えません。 然し、DIVタグでそのページの枠組みを構成する部分を除いては、先ずBody部分のBoxとなるべきHTMLタグを先に入力するのが順当のように思われます。

Body部分のBoxとなるべきHTMLタグの入力に当たっては、「ページ編集」モード或いは「HTMLソース」モードを利用する代わりに、「ページ/ソース」モードを使って入力することを極力お勧めします。これはこのモードでは、場合によっては上段の「ページ編集」画面を使ったり、場合によっては「HTMLソース」画面を使ったりすることがモードの切り替え無しで出来るからです。その上、上段の「ページ編集」画面で内容を入力したと同時に、どのようなソース・コードが生成されたかが判るので、技術の更なるレベル・アップを目指す人にとってはCSSのコードに自然に馴れるというメリットがあります。更に、将来JavaScriptのライブラリーであるjQueryにチャレンジするためには、jQueryのコードがCSSのコードに準拠していることから、jQueryへの導入準備ともなります。

Body部分のBoxとなるべきHTMLタグの入力操作は：

• <p>タグの入力操作
  上段の「ページ編集」画面に内容となる文字列を入力して行き、EnterKeyを押せば自動的に<p></p>が前後に生成されるので特別な配慮は必要あるません。この自動生成は下段の「HTMLソース」画面で直ぐに確かめることが出来ます。
• <h1><h2>・・・<h6>の入力操作
  「挿入」メニュー　→　「段落」　→　＜見出し１＞・・・＜見出し６＞の順で操作すれば、下段の「HTMLソース」画面にそれぞれのタグが生成されるので、そのタグの間にカーサーを置いてから、目的の内容となる文字列を入力すればよい。この場合、上段画面を使っても下段画面を使ってもどちらでも良い。
• リストの入力操作
  「挿入」メニュー　→　「リスト」　→　＜番号なしリスト＞或いは＜番号ありリスト＞の順で操作すれば、下段の「HTMLソース」画面にそれぞれのタグが生成されるので、その<li>と</li>タグの間にカーサーを置いて、目的の内容となる文字列を入力すればよい。この場合、上段画面を使っても下段画面を使ってもどちらでも良い。リストの最初の入力が済んでから、EnterKeyを押すと自動的に次のリスト項目のタグが自動生成されます。
  

２-2.　スタイル・ルールを規定する操作

スタイル・ルールを規定する操作は「スタイル設定」ダイアログ・ボックスを通じて行うか、或いは上級者の場合は「スタイル・シート」に直接入力するかして行います。

「スタイル設定」ダイアログ・ボックスは「表示」メニュー　→　「スタイル・シート・マネジャー」　→　＜ルール情報追加窓の追加ﾎﾞﾀﾝ＞で表示されます。既存のスタイル・ルールを表示して編集する場合は、「スタイル・エクスプレス」パネルから既存のルールを表示することも出来ます。

「スタイル設定」ダイアログ・ボックスは上図のように１０個のタブから構成されていますが、現実的にはルールのカテゴリーを６つのタブに分類してルールを規定し易いようにされています。最後の４個は無視しても結構です。

カテゴリー名	主なルール	注目すべきルール
フォント	文字のサイズ、カラー、フォントの種類等を設定する	文字サイズはページの見栄にとって重要
色と背景	背景のカラー、背景画像、ボックスの背景等を設定する	背景のカラはページの見栄にとって重要
文字のレイアウト	テキストの行間、行揃え、文章に関する設定をする	行高、水平方向の配置はページの見栄にとって重要
レイアウト	ボックスや内容物の配置、罫線の色、太さ、種類等を設定する	マージンはBox自身の位置、パディング はBox内の内容の位置にとって重要
リスト	リスト・タグの表示方法などを設定する	リスト・マークの有無、位置にとって重要
位置	ボックスの横・縦のサイズやレイアウトの配置の方法などを設定する	回り込み(フロート）、解除（クリア）、 表示（inline)、はみ出し（auto)は乱れに関係して重要

２-3.　Boxにスタイル・ルールを連携させる操作

1. Boxの入力が済んだ後、スタイル・ルールが設定された場合：
   Body上のBoxタグをドラッグして指定した後、画面右上隅の該当する「属性の変更」ボタンをクリックして「属性」ダイアログ・ボックスを表示し、そのダイアログ・ボックスの右下隅の「スタイル」ボタンをクリックして、「スタイル設定」ダイアログ・ボックスを表示する。
   「スタイル設定」ダイアログ・ボックスの下端にある「定義済のID指定」または「定義済のクラス指定」窓の▼をクリックして、定義済のスタイル・ルールのリストの中から連携させるべきスタイル・ルールを選択すればよい。
   
   例えば、Ｂｏｘとして<li>タグを選んだ場合は下のＬＩのような「属性の変更」ボタンをクリックして属性ダイアログ・ボックスを表示します。
   
   　
   　　　　　　　属性変更ボタン
   下のような属性ダイアログ・ボックスが表示されたら、赤矢印の「スタイル（Ｓ）」ボタンをクリックすると、お馴染みの
   「スタイル設定」ダイアログ・ボックスが表示されます。
   
   
   　　　　　　　　　　　　　　　　　　属性ダイアログ・ボックス
   
   「スタイル設定」ダイアログ・ボックスでは、下端の定義済のＩＤ名又はＣＬＡＳＳ名のリストを▼で表示して、その中から連結すべきルールを選ぶ。
   
   
   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　スタイル設定ダイアログ・ボックス
   
   
2. Boxの入力が済んだ後、そのBoxに手入力でID名或いはClass名を付した場合：
   先ず、スタイルシート・マネジャーを通して「スタイル設定」ダイアログ・ボックスを表示する。
   その「スタイル設定」ダイアログ・ボックスで手入力で入力したID名或いはClass名で新しいスタイル・ルールを設定すれば、自動的にそのBOXと新しいスタイル・ルールは連携さます。
   
3. HTMLタグそのものにスタイル・ルールを設定する場合：
   先ず、スタイルシート・マネジャーを通して「スタイル設定」ダイアログ・ボックスを表示する。
   その「スタイル設定」ダイアログ・ボックスでHTMLタグ名に対して新しいスタイル・ルールを設定すれば、自動的にそのHTMLタグに新しいスタイル・ルールが連携されます。
   
4. 階層パスで指定されたHTMLタグにスタイル・ルールを設定する場合：
   残念ながらホームページ・ビルダーV15の段階ではこの方法は正規にサポートされていませんが、筆者が試した所によると、「スタイル設定」ダイアログ・ボックスの「ＨＴＭＬタグ名（Ｍ）」欄にそのタグの階層パスを入力してから、通常通りルールを設定すれば、そのパスのタグにちゃんとルールが設定されることが判りました。
   或いは、スタイルシート上で手入力によってルールを設定すれば可能です。例えば、#content #left_side p.main_txt { font-size: 14px; font-weight: bold; }のように入力する。