【CSS】段組レイアウトの基礎・サンプル付き

CSSによる段組レイアウトの基礎とサンプルです。

段組レイアウトサンプル

サンプルは、あえてインラインで書いています。必要に応じて修正してください。

サンプルはLeft、Right、Bodyの3つのブロックをレイアウトしています。

CSSで段組レイアウトを実践するポイントは次の2つです。

• 段組したいブロックを包括するブロックが必要となること。そして、そのブロックにはwidthを指定すること。（本例では240px）
• 左ブロックにはfloat:left;、右ブロックにはfloat:right;、段組を解除するブロックにはclear:both;を指定すること。

コードは次のとおりです。

 

実際の表示は次のようになります。わかりやすいように、サンプル表示には背景色をつけています。
各ブロックには「width」が指定されていないため、文字の背景色のみになっています。

 

まとめ

ここでは、CSSによる段組レイアウトの基礎を紹介しました。