×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

スタイルシート(CSS)レイアウト

Home > スタイルシート(CSS)について目次 > スタイルシートレイアウト(段組)の基礎

スタイルシートレイアウト(段組)の基礎

boxモデル<div>について

<div></div>というタグを使用します。<div>タグはもともと見出しや文章といった個々のパーツをグループ化する為のboxです。

<div>の特徴として<div>〜</div>の範囲は限りなく横に広がる(他のどの要素にも邪魔されない)というのがあります。

簡単に説明すると下記の図のような感じです。

スタイルシートによる段組の画像

と同じ結果になります。因みに、boxAとboxBのwidth指定をしても

スタイルシートによる段組画像2

となります。面白いですね!

Home | 目次 | Page Top

boxを横に並べるには

【float】という属性を指定してやります。floatは、 要素の配置や回り込みを指定するためのタグです。

【boxA】に【float:left】を設定

スタイルシートによる段組画像boxAスタイルシートによる段組画像boxB

こんな感じ!

【boxA】に【float:right】を設定

boxAにfloat:rightを指定した画像boxAにfloat:rightを指定した際のboxB画像

こんな感じ!

当サイトの設定では【boxAにfloat:left】【boxBにfloat:right】を設定します

boxAにfloat:leftを指定した画像boxBにfloat:rightを指定した画像

こんな感じ!

【float】を指定する際は【width】を必ず指定して下さい!レイアウトが崩れる要因のひとつです。

Home | 目次 | Page Top

floatの解除

当サイトでは【clear: bothを指定してます。まあ当サイトに限らずこれを指定しておけばまず安心です!

Home | 目次 | Page Top

無料サーバー
お薦めサーバー
ネットショップ
CMSブログソフトウェア

サイトマップ