の まとめ

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

  関連記事

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …

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

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

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

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

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

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

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …