掲載日： 2004年 11月 19日
常にメインコンテンツを先に記述できる!? スタイルシートの段組のメリット
スタイルシートで段組を構成するメリット
先週の記事「スタイルシートだけで段組を作る」で、HTMLのtable要素(タグ)ではなく、スタイルシートを利用して段組を実現する方法をご紹介致しました。
スタイルシートのfloatプロパティを利用して段組を構成する方法には、単にスタイルシートでデザインできるというだけでなく、 ページ(HTML)の構成上、大きなメリットがあります。
メインコンテンツを先に記述できる
大きなメリットは、HTML中で常に※「メインのコンテンツを上部に記述できる」ということです。
※例外もあります。（後述）
最も重要なメインのコンテンツが、段組の左側でも右側でも中央でも、どこに配置されても、 HTML中に記述する際には、最初（上部）に記述することができます。
今回は、その方法についてご紹介致します。
デザインに関係なく メインの文章を先に書ける
例えば、右図のような2段組を考えて下さい。
メインのコンテンツは左側にあります。
この場合だと、おそらくみなさん、HTML内でメインのコンテンツを先に記述できることはお分かりでしょう。
この構成だと、tableを利用した場合でも、メインのコンテンツは先に記述できることになりますね。
※tableは左側のセルから順に記述するため。
例えば、ソースは次のようになるでしょう。
※メインのブロック要素（<div class="main">〜</div>）に対して、floatプロパティに「left」を指定しています。
スタイルシート部分：
<style type="text/css">
div.main {
float: left;
width: 80%;
}
</style>
HTML部分：
<div class="main">
メインのコンテンツ(左側) 80%
※こちらを先に記述できていますね。
</div>
<div class="sub">
端のコンテンツ(右側) 20%
</div>
それでは、右図のような2段組を考えて下さい。
メインのコンテンツは右側です。
この場合でも、やはり（右側の）メインのコンテンツを、HTML内で先に記述できます。
お分かりでしょうか？
この場合は、右側の段組を構成するブロック要素（ここでは <div class="main">〜</div>）に対して、「 float: right; 」を指定すれば、
右側の段を先に記述できます。
※メインの後に続く内容を左側に回り込ませることになります。
スタイルシート部分：
<style type="text/css">
div.main {
float: right;
width: 80%;
}
</style>
HTML部分：
<div class="main">
メインのコンテンツ(右側)
※やはりこちらを先に記述できています。
</div>
<div class="sub">
端のコンテンツ(左側)
</div>
お分かり頂けたでしょうか？
このように、スタイルシートで段組を構成すると、メインのコンテンツが段組のどちら側にあっても、HTML中ではメインのコンテンツを先に記述できるのです。
メインのコンテンツを先に記述できるということは
メインのコンテンツをHTML中の先に記述できると言うことは、メインのコンテンツが先に読み込まれると言うことです。 真っ先にメインのコンテンツが表示されるため、ページ自体が大きくても、閲覧者は待たされることなく読み進めることができます。
また、検索エンジンのクローラーの中には、ページを最後まで読まずに途中で打ち切ってしまうものや、 先に記述されている文章ほど重要度が高い文章だと判断するものもあります。 そういったクローラーに適切に情報を取得させるためにも有効でしょう。
3段組の中央がメインのコンテンツの場合は？
さて、3段組の中央がメインのコンテンツな場合はどうでしょうか？
この場合でも、やはりメインのコンテンツを一番最初に記述することが可能です。 どう記述すればよいかお分かりでしょうか？
| ★関連記事・リンク |
