ホームページ作成素材 Cool Liberty > WEBデザインチュートリアル > CSSにおける2段組（2カラム）レイアウト設定
CSSにおける2段組（2カラム）レイアウト設定
このWEBデザインチュートリアルでは、テーブルタグを使わない、CSSを利用した2段組（2カラム）レイアウト法をレクチャーしていきます。
floatプロパティによる2段組の基本パターンA
floatプロパティを使った、シンプルな2段組レイアウトの方法です。サイドバー（幅の狭いほうの段）に幅を指定し、floatプロパティで一方に寄せて配置します。メインコンテンツのエリアでは、サイドバーの幅と同じ幅のマージンを指定します。メインコンテンツにも幅を指定して全体の幅を固定したり、サイドバーの幅をパーセントで指定して完全なリキッドレイアウトにするなど、色々と応用が可能になります。
ただし、HTML上では、メインコンテンツより先にサイドバーが配置されることになるので、アクセシビリティやSEOには少し不利かと思われます。
■XHTMLソース
<div id="sidebar">
・・・・・・
</div>
<div id="main">
・・・・・・
</div>■CSSソース
#sidebar {
width: 200px;
float: left;
#main {
margin-left: 200px;
}
floatプロパティによる2段組の基本パターンB
floatプロパティを使った、2段組レイアウトの方法です。floatプロパティで一方の段は左に寄せ、もう一方の段は右に寄せて配置します。この方法では、両方の段に必ず幅を指定する必要があります。また、左右の段の間に隙間ができないようにするために、両方の段全体を囲うdiv要素（wrapper）を用意し、左右の段の幅の合計分の幅を指定する必要があります。
この方法を使えば、HTML上では常にメインコンテンツがサイドバーよりも先に配置されるようにすることが可能になります。
■XHTMLソース
<div id="wrapper">
<div id="sidebar">
・・・・・・
</div>
<div id="main">
・・・・・・
</div>
</div>■CSSソース
#wrapper {
width: 700px;
}
#main {
width: 500px;
float: right;
}
#sidebar {
width: 200px;
float: left;
}
CSSにおける2段組（2カラム）レイアウト設定の評価を是非お願いします！
（星の上へマウスを乗せてクリックするだけでOKです）
CSSにおける2段組（2カラム）レイアウト設定に関連する素材 & コンテンツ
目的に合ったコンテンツが見つからなかったあなたへ
このサイトでなら役に立つコンテンツが見つかるかも
0574 W.S.R
