の まとめ

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

  関連記事

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

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

no image
【JavaScript】getElementByIdでゲットした値を数値にするにはparseIntを使う

JavaScriptの個人的なメモです。 getElementByIdでゲットし …

paiza.IO を使ってみた

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

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

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

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

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