divタグを使ったレイアウト(4)

今回でdivタグを使ったレイアウトに関するCSS解説も最終回となります。できれば今までのhtmlとCSSを実際にファイル保存して、そのファイルをブラウザで表示させてみて下さいね。また各属性の値を変更して、どのように表示されるかも試して下さい。

それでは、本題に入る前にまずは人気ブログランキングをご覧下さい。

.my_header {
text-align:center;
border-bottom:solid 1px;
margin:0;
}
.my_left {
float:left;
margin-left:0;
text-align:center;
width:49px;
}

.my_right {
border-left:solid 1px;
float:left;
margin-right:0;
text-align:center;
width:49px;
}

.my_footer {
text-align:center;
clear:left;
margin:0;
border-top:solid 1px;

今回一番重要なのはmy_leftmy_rightで定義されているfloat属性です。このfloat属性を使うことにより異なる段落を横並び表示させることができるわけです。具体的に説明しますと、floatは文字列や段落等の回り込みについて定義するための属性です。この例では値をleftにしていますが、これは「直後の文字列や段落等の左側に自身を配置する」という意味になっています。

今回使っているhtmlタグを再掲しますが、

(1)
<div class="my_box">
<div class="my_header">ヘッダ</div>
<div class="my_left">左側</div>
<div class="my_right">右側</div>
<div class="my_footer">フッタ</div>
</div>

float属性を設定してあるmy_leftは直後のmy_rightの左側に配置されることになります。同様にmy_rightは直後のmy_footerの左側に配置されることになります。実際の見た目ではmy_footerはmy_rightの下に配置されていますが、よほどのことがない限り、my_leftとmy_rightのfloat属性は共にleftを指定しておいた方が良いでしょう。その理由としては、my_rightの文字数がmy_leftの文字数より多くなってしまうと、ブラウザによってはmy_rightで超過した文字がmy_leftの下に溢れ出された形で表示されることがあるからです。

そして最後のmy_footerをご覧下さい。目新しい属性としてclear属性がありますね。値はleftが指定されています。この意味は「直前の文字列や段落で指定されている左側への回り込みを解除する」というものです。直前のmy_rightではfloat属性をleftにして、左側への回り込みを指定していましたね。これを解除して新たな行の左側から表示させることを意味しているのです。

長くなってしまいましたが、今までに説明してきた属性を使って、tableタグを使っているかのように、表組み表示を実現させていたわけです。

ところで、float属性を使う場合に注意すべき点があります。それは値にleftを指定できるのなら、rightも指定できるんですか?という疑問があると思うのですが、CSSの記法としては、値にrightを設定して、右回り表示を実現させることは可能です。

しかしSEO対策の視点から言えば、rightを使うことはやめておいた方が良いでしょう。なぜなら検索ロボットはhtmlソースを上から下へ(左から右へ)という至って当たり前の読み方をしていきます。そして人間も同じように読んでいくはずだという前提でいるのです。ところがfloat属性をrightにするとhtmlソースを読む場合と、ブラウザで見た場合とで、表示順序が矛盾するわけですね。検索ロボットはこの矛盾をとても嫌います。俗にいう検索スパム行為とみなされてしまう可能性が非常に高いんですね。

せっかくdivタグとCSSですっきりとした見やすいhtmlソースを書いて、検索ロボットにとって見やすい状態にしたのに、検索スパムだと判断されてしまっては本末転倒ですよね。

検索スパム行為は他にもあるのですが、それについてはまたの機会に解説したいと思います。

posted by ひっそり | Comment(0) | TrackBack(0) | div
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/15571280
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。