の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

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

      2016/01/31

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

段組レイアウトサンプル

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

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

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

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

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

<div style="width: 240px;">
<div style="float: left;>Left</div>
<div style="float: right;>Right</div>
<div style="clear: both;>Body</div>
</div>

 

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

Left
Right
Body

 

まとめ

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

 - JS,PHP,CSS ,

336-280

  関連記事

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

paiza.IO を使ってみた

IT/WEBエンジニア向けの転職サービス会社paiza(パイザ)が提供するpai …

CSSボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

【CSS】div align=”center”を使わずにmargin autoでセンタリングする方法

divの入れ子でページ内センタリングせずに、左右のmarginをautoにするこ …

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bx …