- 2007-01-17 (水)
- Webデザイン
3カラムレイアウトのブログテンプレートの作り方です。
3カラムレイアウトの組み立てには、様々な方法がありますが、音声ブラウザやCSS未対応のブラウザでも記事部分を一番最初に閲覧出来るように、htmlの記述は以下のようにします（細かい部分は抜きにして、大枠のみ記述しておきます）。
<body>
<div id="mainBlock">
<div id="TopBlock">トップブロック</div>
<div id="wrapper">
<div id="EntryBlock">記事ブロック</div>
<div id="PluginBlockLeft">左プラグインブロック</div>
</div>
<div id="PluginBlockRight">右プラグインブロック</div>
<div id="FooterBlock">フッターブロック</div>
</div>
</body>
そして、CSSの記述は以下のようにします。
body {
}
#mainBlock {
width : 800px; /* wrapperとPluginBlockRightの幅の合計（600px+200px=）800pxに設定 */
}
#TopBlock {
}
#wrapper {
float : left;
width : 600px; /* EntryBlockとPluginBlockLeftの幅の合計（400px+200px=）600pxに設定 */
}
#EntryBlock {
float : right;
width : 400px; /* 幅を400pxに設定 */
}
#PluginBlockLeft {
float : left;
width : 200px; /* 幅を200pxに設定 */
}
#PluginBlockRight {
float : right;
width : 200px; /* 幅を200pxに設定 */
}
#FooterBlock {
clear : both;
}
このとき、幅の設定を誤ると、うまく表示されない場合がありますので、各ブロックの幅は帳尻を合わせるようにしましょう。また、各ブロックにおいて、「border」や、「margin」「padding」を設定すると、表示が崩れる場合があります。このことに関しては、またどこかで記事にしたいと思います。
Tags :3カラム?テンプレート?Css?レイアウト?デザイン?
カテゴリ「Webデザイン」の最新記事
-
2008-07-04 23:00 - クリックされやすい広告のヒント
-
2007-10-03 12:00 - IE6.0で文字が消える
-
2007-03-01 20:32 - スタイルシート切り替えスクリプトを設置
-
2007-02-21 23:22 - Web標準に準拠したWebデザイン(2) - XHTMLへの移行
-
2007-02-14 16:41 - Web標準に準拠したWebデザイン(1) - 序章
「3カラム」に関連する商品を...
- Newer: クローラーの巡回を促す
- Older: ロボット型検索エンジンの仕組み