ページレイアウトをデザインする

ブロックの概要

このページではレイアウトをデザインする前提として、ブロックの特徴について記述しています。

本来、各ブロックは一つ上の親要素（その要素を挟んでいる要素）の左端から右端までを占めます。

ブロックの範囲例

この段落（p）の親要素はbodyなので、bodyブロック内にぴったりとpブロックが収まっています。
このページでは余白を0に指定していますが、特に指定しない場合、bodyにはブラウザ側で自動的に指定する余白ができています。
この余白の幅は表示するブラウザによって異なります。

ブロックにwidthを指定して幅を縮めることもできますが、そのままでは空白部分に別のブロックが入り込む=文字や画像が表示されることはありません。

幅を縮めたブロック例１

この段落（p）には400ピクセル幅を指定しているので、ウィンドウが400ピクセル以上ならば右に空白ができます。
（このブロックの左余白は0に設定。）
ただしその空白部分に次のブロックが表示されることはありません。

幅を縮めたブロック例２

この段落（p）には親要素（ここではbody）の30%幅を指定しているので、右に70%分の空白ができます。
（このブロックの左余白は0に設定。）
ただしその空白部分に次のブロックが表示されることはありません。

floatを利用すると、下の例のようにいくつかのブロックを隙間なく並べることで、複雑なレイアウトを表示することができます。
（下のブロックの左余白は10ピクセルに設定。）

floatの指定方法はこちらから。