３カラムレイアウトの段組み説明

　　スポンサードリンク

３カラムレイアウトの段組み - スタイルシート

　　ホームページビルダーの初心者の私がスタイルシートで段組みの一例を書いています。

　　前述したような手順でそれぞれのコンテナをスタイルシートと関連付けながらサイトの土台をつくりあげます。

　　あくまでも一例にすぎませんが具体的な設定内容を簡単に書いていきます。

　　　　　　　　　　　　　　　　　　　 3カラムレイアウト

３カラムレイアウトの段組み詳細な設定

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

　　　　　　　　　　　　文字のレイアウト → 左寄せ
　　　　　　　　　　　　位置 → 幅1000ピクセル

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

　　　　　　　　　　　　位置 → 幅1000ピクセル　高さ → 100ピクセル
　　　　　　　　　　　　回り込み → なし　
　　　　　　　　　　　　はみ出した場合 → 不可視

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

　　　　　　　　　　　　位置 → 幅165ピクセル
　　　　　　　　　　　　回り込み → 左
　　　　　　　　　　　　はみ出した場合 → 不可視

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

　　　　　　　　　　　　位置 → 幅670ピクセル　コンテナの境界線に線を設ける場合は線幅の分だけ幅を狭める
　　　　　　　　　　　　回り込み → 左
　　　　　　　　　　　　はみ出した場合 → 不可視

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

　　　　　　　　　　　　位置 → 幅165ピクセル
　　　　　　　　　　　　回り込み → 左
　　　　　　　　　　　　回り込み解除 → 右
　　　　　　　　　　　　はみ出した場合 → 不可視

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

　　　　　　　　　　　　位置 → 幅1000ピクセル
　　　　　　　　　　　　高さ → 100ピクセル
　　　　　　　　　　　　回り込み → なし
　　　　　　　　　　　　回り込み解除 → 両方
　　　　　　　　　　　　はみ出した場合 → 不可視

　ひとつひとつ自分で設定した内容をメモしながらレイアウトコンテナを作っていくといいと思います。

　ボーダーを設ける場合には線幅のサイズも計算しないとレイアウトが崩れたりしてしまいます。
　これらの設定をするときには、事前にいろいろ考えなければならないことがあります。

　サイトの幅などの大きさをどうするのか・・・
　　・　サイズが大きいと、ノートパソコンや10インチ台のモニタで閲覧する場合に困難が伴う
　　・　ネットブラウザの種類やバージョンによっては、サイト表示が違ってくることもあります。
　　　　このようなケースも意識しながら作成する必要があります。

　　

　　コンテナを作成したら早めに背景色や背景画像などを設定すると段組みもイメージに近づくと思います。

　　スタイルシートで設定できることはたくさんあるので試してみると楽しいと思います。

　ちなみにＢＯＤＹの設定はサイトを中央表示させたい場合に必要になってくる設定があります。
　詳しくは次以降のページで解説したいとおもいます。

　　　スタイルシートでサイトの構図を作る

　　　　

　はじめに　（入門書だけでは不十分だった）

　　　　

　スタイルシートを新規作成する方法と、ホームページビルダーに読み込ませる（関連付ける）

　　　　

　レイアウトコンテナ DIV を作成する方法

　　　　

　レイアウトコンテナに対してＣＳＳで設定を入力・適用させる方法

　　　　

　それぞれの具体的なＤＩＶＢＯＸの設定内容

　　　　

　サイトを中央表示させる方法　ＢＯＤＹの説明

　　　　

　サイトの一番上　最上部の隙間をなくする方法

　　　スタイルシートで細かく設定する解説

　　　　

　スタイルシートで文字の大きさを設定する方法の解説

　　　　

　CSSで見出しのh1 h2 h3 の大きい文字を小さくする方法

　　　　

　リンクの青い色を自由な色に変更する方法