3カラムレイアウトの作り方

　　スポンサードリンク

3カラムレイアウトでサイトを作る方法

　ホームページビルダーで３カラムレイアウトを作る手順を説明しています。

　サイトをレイアウトコンテナで構成させるために、コンテナを作ります。

　サイトを構成するレイアウトコンテナの一例

　　　　　　　　　　　　　　　　　　　 3カラムレイアウト

左右の文字が逆でした。

レイアウトコンテナの並べ方の説明

　　３カラムレイアウトの段組みの一例です。

　　結果的に div box （レイアウトコンテナ）は６個作成していきます。

　　・ＢＯＤＹ　　　　（サイトページの一番の基盤　・サイト中央表示などに関連　あとから説明します）

　　・container　　（レイアウトコンテナの新規作成・名前は自由）

　　・header　　　（レイアウトコンテナの新規作成・名前は自由）

　　・leftbox　　　（レイアウトコンテナの新規作成・名前は自由）

　　・contents　　（レイアウトコンテナの新規作成・名前は自由）

　　・rightbox　　　（レイアウトコンテナの新規作成・名前は自由）

　　・footer　　　　（レイアウトコンテナの新規作成・名前は自由）

　今回の説明では、これらのコンテナを作成しての説明ですが、名前やコンテナの数などはアイデア次第で自由です。

レイアウトコンテナで段組み

　レイアウトコンテナを作ってそれぞれ設定を施していきます。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ＬＩＮＫ　レイアウトコンテナの作成手順はこちらです
　　DIV id で container を設定する

　　まずは、container のために作成したＤＩＶＢＯＸ（レイアウトコンテナ）を選択した状態で設定していきます。

　　設定内容
　　　　　　　　　・ＩＤ名をつける container
　　　　　　　　　・文字のレイアウトを左寄せにする
　　　　　　　　　・conteiner の幅を1000ピクセルに設定する
　　　　　　　　　・設定したレイアウト内容をページ上のコンテナに適用させる

　1　「スタイルシートマネージャで編集」の「スタイルシートマネージャ」の画面まで進みます。

　　　　必ずスタイルシートマネージャで編集を選択してください

　2　関連付けていたスタイルシートを選択して「追加」

　3　ＩＤのスタイルを設定を選択して　ID名を container （名前は自由）入力する
　　　　♯ID は消して名前をつけて構いません

　　IDとクラスはご存じのように違いがあります

　　ＩＤは 1ページにひとつだけ適用できます
　　クラスは 1ページのなかで何回も適用させることができます。

　　今の conntainer の場合は１ページにひとつしかありえませんのでＩＤが望ましいと思います。

スタイルの設定

　　4　文字のレイアウトを左寄せにする

　　5　container の幅を設定する
　　　　幅1000ピクセル

　　ＯＫをする・・・

　　レイアウトのタブで線を作ると分かりやすいと思います。

　　6　★　css の id container で設定した内容を適用させる

　　container のために作成したDIVBOXを選択した状態で　スタイルの設定　画面へ
　　※スタイルシートマネージャで編集の画面ではありません

　　定義済みＩＤの指定のプルダウンを表示させて作成した container を選択してＯＫする。

　　これがレイアウトコンテナの作り方と設定・適用方法の説明となります。

　　分かりやすく書いたつもりですが、この手順を知るまでにとっても苦労しました・・・
　　ホームページビルダーの入門書には具体的には書かれていなかったので大変でした。

　　この手順で
　　　　　　　　　　・header　
　　　　　　　　　　・leftbox
　　　　　　　　　　・contents　
　　　　　　　　　　・rightbox
　　　　　　　　　　・footer　　　　それぞれのＢＯＸをcontainerのなかで積み木のように設けていきます。

　このような感じで３カラムレイアウトを構築しています。