凡例・・・・・・
使用例
スタイル
ソースコード
HPBを使う

ホームぺージでは、段組や写真・イラストなどの画像のレイアウトが極めて大事です。
ページ全体のレイアウトは、「段組み」を使います。テキストの中に画像を配置する場合には、スタイルを指定します。表を利用する方法もありますが、できるだけ避けてください。

HPBのページ編集画面での編集は困難です。ページ/ソース画面で、ソースプログラムを直接編集してください。スタイルシートは、スタイルシートマネジャで編集できます。

レイアウトの練習用のページlayout.htmlでIDやクラスを設定してください。本文中に使用されているIDやクラスは、このページで利用できるようになっています。

フォルダlessonのダウンロードは、練習用ファイルのダウンロードから

レイアウト概要

ページレイアウトにはいくつかの方法があります。

段組・・・ページ全体を、内容に応じていくつか部分に区切る方法です。

一般的によく使われているヘッダー・サイドバー・本文・フッターを段組みします。スタイルシート（floatプロパティやpositionプロパティ）を利用します。

段組み

フレーム構造のページでも可能ですが、フレーム構造には多くの問題点（検索結果がフレームの一部になる、フレーム構造に対応していないブラウザがある、新しい規格では使用できないなど）がありますので、使用しないようにしてください。

これまで多くのホームページでは、枠線のないテーブルを段組に使用されてきましたが、この方法には多くの問題点があり、スタイルシートでの段組が推奨されています。

複数の画像を同じ場所に配置する

スタイルシートの利用(positionプロパティ）やテーブルを利用します。

positionプロパティの利用・・・写真の上にロゴなどを（重ねて）配置する

ハイビスカスの写真

ハイビスカスの文字

噴出し

枠線のないテーブルを利用する・・・マス目に画像を配置する

このレイアウトは可変にしていますので、表示幅に従い，画像の横に位置関係は変わります。

positionプロパティの方が自由度は高いと思います。

複数の画像をきめ細かく配置する場合には、画像を組み合わせた新しい画像を作って挿入する方がいいと思います。
特に、多様化する最近のデバイス対応では、多くの場合位置がずれますので、ご注意ください。
新しい画像の作成には、「ウェブ　アート　デザイナー」などをご利用ください。

段組み

段組み

－float（フロート　浮動）プロパティ、position（ポジション　位置指定）プロパティの利用－

以下のような段組を作ります。

設定するスタイル

スタイルシートマネジャー

スタイルシートのプロパティ　回り込み（float）および　位置（position）を使います。このプロパティは、スタイルの設定ダイアログの「位置」タブで設定します。

floatプロパティによる段組

回り込みのfloatプロパティが指定されたブロックレベル要素があると、続くブロックレベル要素はその周り（右か左）に配置されます。この機能を使って段組ができます。

手順2の詳細　floatプロパティは、その後に続くグループを左（右）の回り込ませる指定です。段組では，いつくかの組み合わせが可能です。回り込みを指定するグループは先にソースに記述することを忘れないように（大事なことが先に記述される　→　SOE対策の一つです）

サイドバーはfloat left、メインを左マージンで配置

段組みのスタイル

各グループに背景色を付けています。（もちろんなくてもOKです。画像でもOKです。）

クラスでスタイルを指定しても問題ありませんが、段組みのdiv要素は、「ページ内で複数回使われない」「ページ内の位置をIDでユニークに指定」できますので、通常、IDを使用します。

#flt_header{height : 100px;width : 100%;background-color : #9999ff;} #flt_side_bar{;background-color : #ffff33;} #flt_main_content{background-color : #ffccff;} #flt_footer{width : 100%;background-color : #00ccff;} #flt p{margin : 0px;padding : 5px;}

赤字で段組みおよびその解除を指定しています。

#fit_main_contentは、float:left;でもOKです。

#flt_main_content{background-color : #ffccff;}

floatを設定した場合には、必ずwidthプロパティを設定してください。

段組内の段落は，マージンを0px、パッディングを5pxに設定しました。

<div id="flt"> <div id="flt_header"> <p>これがヘッダー領域。高さは100px、幅は100％です。</p> </div> <div id="flt_side_bar"> <p>こちらがサイドバーの領域です。幅は全体の20%、高さは任意です</p> </div> <div id="flt_main_content"> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> </div> <div id="flt_footer"> <p>これがフッター領域です。幅は100％です。</p> <p>高さは自動です。</p> </div> </div>

左右3段組などさらに複雑な段組も、floatプロパティで設定できます。

floatを利用した段組みでは、古いブラウザの欠陥が顕著に表れる場合があります。微妙で繊細なレイアウトにしたい場合にはこの欠陥が問題になります。具体的な例およびその対策は、　をご覧ください。

positionプロパティによる段組

通常、ブロックレベル要素はソースに記述された順番で、上から下へ自動的に配置されます。positionプロパティを利用すると、その配置位置を指定することができます。

段組みのスタイル

段組みの設定・・・position型

#pst{position : relative;width : 100%;} #pst_header{height : 100px;width : 100%;background-color : #9999ff;} #pst_side_bar{width : 20%;background-color : #ffff33;position : absolute;top : 100px;left : 0px;} #pst_main_content{background-color : #ffccff;position : relative;left : 20%;width : 80%;} #pst_footer{width : 100%;background-color : #00ccff;} #pst p{margin : 0px;padding : 5px;}

<div id="pst"> <div id="pst_header"> <p>これがヘッダー領域。高さは100px、幅は100％です。</p> </div> <div id="pst_side_bar"> <p>こちらがサイドバーの領域です。幅は全体の20%、高さは任意です</p> </div> <div id="pst_main_content"> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> <p>これがメイン領域です。幅は全体の80％、高さは任意です。</p> </div> <div id="pst_footer"> <p>これがフッター領域です。幅は100％です。</p>

<p>高さは自動です。</p> </div> </div>

absoluteを指定したブロックレベル要素の高さが、relative指定の要素より高いと、フッターと重なりますので、必ず、高い要素にabsoluteを指定してください。

HPBのページ編集画面では、絶対配置に正しく対応していません。プレビューで確認してください。

サイドバーとメインは、いろいろな形式で指定できます。また、float型とposition型を組み合わせることもできますが、あまりこらない方がいいようです。

段組の背景色

これまで作成した段組には背景色をつけましたが、おかしいですね。サイドバーの下部に背景色がない部分があります。（HPBのソース画面では正しく表示されません。プレビューで確認してください）

サイドバー下部の背景色がありません。（縦に短い領域の下部に背景色がつきません）

解決方法

1・・・サイドバーとメイン領域全体を、グループ化する。（新しい<div>で）　　<div　id="flt_content"> 　　　　　　　　・サイドバー・メインの記述　　　　　　　　・　　</div>

2・・・"flt_content"に短い段（サイドバー）の背景色を設定する（短い段の背景色の設定は不要です）

短い段の背景色で全体の背景色が決まり，その後、新しい背景色を持ったブロックレベル要素がその上に配置されます。（背景色の上書き）

これで背景色が正しく設定されました。（HPBのソース画面では正しく表示されません。プレビューで確認してください）

短い段にfloatを指定してください。（右側の段が短い場合には、float : right です。）短い段の背景色を、グループ化したdiv要素の背景色にするのがポイントです。

ここの例は、メイン領域に左マージンを設定しています。メイン領域にfloat leftを指定いた場合には、うまくいきません。この場合には、#flt_contentの終了タグの直前にダミーのdiv要素を加え、その要素に、回り込みの解除を指定してください。

長さの違いが固定できない場合（どちらが短くなるかわからない）には、困りますネ。

こんな解決策があります。

背景の画像を準備します。

この画像を、flt_contentの背景画像（y方向に繰り返し　background-repeat : repeat-y;）に指定し，サイドバーとメインには背景を指定しません。

制約・・・横幅にサイズを固定幅（px等）にする必要があります。

段組みに背景色（背景画像）を設定すると、少しややこしくなりますので、最初は設定しないほうがいいと思います。

レイアウト概要

段組・・・ページ全体を、内容に応じていくつか部分に区切る方法です。