の まとめ

デジタルガジェットレビュー、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

  関連記事

ulタグ、liタグを使った横並びメニューの作成方法

はじめに ヘッダーなどに使う横並びのメニュー。 HTMLの構造的にもulタグ、l …

文字化けしたファイルがWebサーバーから削除できないときの対処方法

文字化けしているファイルが、Webサーバーから削除できない場合の対処方法を紹介し …

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

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

no image
【PHP】ユーザーがフォームで入力した内容を表示するなら「htmlspecialchars」する

Webアプリケーション作成で必要なセキュリティ対策として、htmlspecial …

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

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