スタイルシートで段組み
スタイルシートでレイアウトする方法
スタイルシートによるレイアウトは多くのメリットがあるのでお薦めです。 ここでは、スタイルシートによるレイアウト方法、 段組み方法について解説しています。 また、段組みの注意についても解説しています。
スタイルシート段組みのメリット
スタイルシートによるレイアウトは、コンテンツごとにブロック化し、 ブロックの配置を指定するやりかたになります。 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:rightをfloat:leftに変更すればOKです。 レイアウトはスタイルシートで設定できるので、 レイアウト変更時にHTMLを編集する必要はありません。
回り込みの解除
float プロパティによる回り込みを解除するには、 clear プロパティを利用します。
- none
- 回り込み解除しない(通常の設定)
- left
- 左回り込みを解除
- right
- 右回り込みを解除
- both
- 回り込みを解除
段組みする時の注意
スタイルシートを利用した段組みは非常に便利ですが、 ブラウザによってはW3C準拠の表示をしないことがあります。 レイアウトが崩れる理由としては以下のようなものがあるので、注意しましょう。
- ブロックの多重埋め込み
- ブロックを何重にも埋め込むと、ブラウザによってはバグが起きることがあります。
- margin, paddingの指定
- ブラウザによって未指定の場合の表示が異なるので、必ず指定しておきましょう。
- floatプロパティ
- IEはfloatの解釈がおかしいようです。
スタイルシートについて詳しく知りたい方は、書籍 「スタイルシートスタンダード・デザインガイド」 をお薦めします。