スタイルシートで段組み

スタイルシートでレイアウトする方法

スタイルシートによるレイアウトは多くのメリットがあるのでお薦めです。 ここでは、スタイルシートによるレイアウト方法、 段組み方法について解説しています。 また、段組みの注意についても解説しています。

スタイルシート段組みのメリット

スタイルシートによるレイアウトは、コンテンツごとにブロック化し、 ブロックの配置を指定するやりかたになります。 HTML文書では、メニュー部分はメニューブロックとして、 本文部分は本文ブロックとして分離され、HTMLソースが見やすくなります。

レイアウトとHTMLが分離されると、 レイアウト設定、変更はスタイルシートの編集のみで行えます。 このため、レイアウトに関係なく本文をHTMLの先頭に配置でき、 テキストブラウザでのアクセシビリティ向上や、検索エンジン対策にもなります。

position プロパティ

position プロパティによる配置の指定方法は、以下のようなものがあります。

static
配置方法を指定しない(通常の設定)
relative
staticで配置される位置からの相対的な指定
absolute
親要素を基準とした絶対的な指定
fixed
absoluteの位置指定で画面に固定

距離の指定は、top, left, bottom, right を利用して行います。

float プロパティ

float プロパティは、要素の回り込み方法を指定します。 float プロパティを利用する場合、要素の幅を指定しておく必要があります。

none
回り込み方法を指定しない(通常の設定)
left
要素を左寄せ(以降の要素は右に回り込み)
right
要素を右寄せ(以降の要素は左に回り込み)

例えば、2段組みの場合、以下のように記述します。 下の例の場合、右に本文、左にメニューのレイアウトになります。

スタイルシートの記述例
div.main {
    float: right;
    width: 70%;
}

HTML部分
<div class="main">
本文
</div>
<div class="menu">
メニュー
</div>

ブラウザでの表示
メニュー
・・・
・・・
本文
・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・

配置を逆にしたい場合(左に本文、右にメニューにする)は、 float:rightfloat:leftに変更すればOKです。 レイアウトはスタイルシートで設定できるので、 レイアウト変更時にHTMLを編集する必要はありません。

回り込みの解除

float プロパティによる回り込みを解除するには、 clear プロパティを利用します。

none
回り込み解除しない(通常の設定)
left
左回り込みを解除
right
右回り込みを解除
both
回り込みを解除

段組みする時の注意

スタイルシートを利用した段組みは非常に便利ですが、 ブラウザによってはW3C準拠の表示をしないことがあります。 レイアウトが崩れる理由としては以下のようなものがあるので、注意しましょう。

ブロックの多重埋め込み
ブロックを何重にも埋め込むと、ブラウザによってはバグが起きることがあります。
margin, paddingの指定
ブラウザによって未指定の場合の表示が異なるので、必ず指定しておきましょう。
floatプロパティ
IEはfloatの解釈がおかしいようです。

スタイルシートについて詳しく知りたい方は、書籍 「スタイルシートスタンダード・デザインガイド」 をお薦めします。

新着記事
人気記事ベスト3
全てのホームページ製作者に
アフィリエイトで稼ぐ方法
サーチエンジン最適化
携帯サイトの作り方
レンタルサーバの選び方
ホームページ作成ソフト
python入門
パソコン便利グッズ