CSS(スタイルシート)レイアウト:2カラム 3／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート)レイアウト:2カラム 3

divタグとpositionを使った、メニュー部分は固定で、メインコンテンツ部分は可変幅の2段組レイアウトの作り方。

CSS(スタイルシート)のソース

body {margin:0; padding:0;}

#header {height:100px;}

#left {position:absolute; top:100px; left:0; width:200px;}

#right {margin-left:200px;}

#footer {height:100px;}

HTMLのソース

<body>

</body>

サンプル

表示例はこちら→サンプルページ（わかりやすいように背景色をつけてます。）

解説

body

bodyはデフォルトだと間隔ができるので、margin、paddingを0にしておきます。
これはleftブロックの位置を計算しやすくするためです。

header

ここでは高さを100ピクセルとしました。

left

position:absoluteで絶対位置指定とし、topから100px(headerの高さの分)、左から0の位置にしました。
ブロックの幅を200ピクセルとしました。

right

左に200ピクセル(leftの幅の分)の余白を取ります。
rightには幅を指定していませんので、rightの幅は「ブラウザ表示幅－ 200px」になります。

footer

ここは特に何も設定することはないのですが、適当に高さを100ピクセルにしました。

positionでの絶対位置指定の注意点

サンプルページではピッタリの位置にleftブロックが表示されている(はず)と思いますが、ユーザーがブラウザの設定で文字サイズを大きくした場合に、ホームページ作成者の意図とは違うレイアウトになる可能性があります。

サンプルではheaderブロックの高さ(height)を100pxにしていますが、ユーザーがフォントサイズを大きくして、header内のテキストの高さが100pxを超えた場合、leftブロックが妙な位置に表示される可能性があります。

positionで絶対位置指定をする場合は、そういうことを計算に入れて使いましょう。
なお、文字の大きさを固定できないことはこちらで説明しています。
→文字の大きさ(フォントサイズ)について

CSS(スタイルシート)レイアウト

CSS(スタイルシート)レイアウト:3カラム 3｜HOME｜CSS(スタイルシート)レイアウト:3カラム 2

お名前(N)
タイトル(T)
メールアドレス(M)
URL(U)
コメント(C)	コメントをどうぞ。
パスワード(P)
送信(S)

トラックバック