AtelierKanae トップページに戻るbit-edge - WEBクリエイターのためのサイト -What's New? - 新着情報・お知らせ等 -for Beginner - 初心者の方はまずこちらへ -Works - アトリエ鼎の制作物 -Garage - ガレージ -
for Beginner - 初心者のためのエリア -
仕切り線

コンテンツリスト
Webサイトリフォーム入門

ch.01準備はOK?

ch.02コンテンツは質が命

ch.03デザインCheck

ch.04タグはどうなってる?

ch.05最後はおさらい

初心者向け厳選リンク集
リスト終了
大見出し:Ch.4タグはどうなってる? Ch: I II まとめ
前のページに戻るpage15/21次のページに進む
仕切り線

センター揃え固定幅レイアウト

センター揃え固定幅の解説図

このレイアウトはスタイルシートを用いるのにもっとも適しています。構造的に特に問題も無いので簡単です。

基本構造

<DIV ID="base">
<DIV ID="top">
上
</DIV>
<DIV ID="contents">
コンテンツ
</DIV>
<DIV ID="bottom">
下
</DIV>
</DIV>

まず3つのエリアを作ります。そしてこれらを囲むようにして、もうひとつ<DIV>を設置します。そしてbaseにスタイルを設定します。左右のマージンをautoにすることでセンター揃えになります。固定幅にするためにwidthを設定します。

スタイル設定

#base { margin: 0 auto; width: 600px; text-align:left;}

※marginに関しては短縮形の設定法です。設定値が2個の場合 上下 左右 の値を設定したことになります。

バグ対策

基本的には先の設定で完成ですが、ブラウザのバグへの対処のために少し付け加えます。

BODY { text-align: center; } /* IE対策 */

#base { padding-right: 0.1px; } /* mozilla系対策 */

これを付け足して終了です。完成したレイアウトを見てみましょう。


次は左揃え伸縮自在幅レイアウトです>>

仕切り線
前のページに戻るpage15/21次のページに進むCopyright 1999-2002 Ateiler Kanae. All rights reserved.