ホームページ作成素材 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段組の基本パターンA

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;
}

floatプロパティによる2段組の基本パターンB

CSSにおける2段組(2カラム)レイアウト設定の評価を是非お願いします!
(星の上へマウスを乗せてクリックするだけでOKです)

  • Currently 2.93/5
  • 1
  • 2
  • 3
  • 4
  • 5

評価: 2.9/5 ( 428 投票 )

CSSにおける2段組(2カラム)レイアウト設定に関連する素材 & コンテンツ

目的に合ったコンテンツが見つからなかったあなたへ

このサイトでなら役に立つコンテンツが見つかるかも

0574 W.S.R