まほ〜のあいらんどけんきゅ〜

テーブルレスメニュー寄せ

1.CSSでとりあえず寄せてみる

今さら言うまでもないことかもしれませんが、テーブルは本来はレイアウトに用いるものではなく、表を表示するために使う要素です。 iらんどの編集画面においては、PC拡張エリアに記述しておけば、それほど問題にならないテーブルタグですが、他にメニューなどを左右に寄せたりするいい方法はないのでしょうか? 実はメニューを寄せるだけだったら、実に簡単なタグでできます。

<div style="width:40%">

上記のタグをPC拡張エリアに書くだけで、メニューを左に寄せることができます。

サンプル(左寄せ)

真中に寄せたい場合には、その前に<center>、右側に寄せたい場合には、 <div align="right">を記述するだけです。 閉じタグがないと、ブラウザによって問題が生じる可能性がありますので、 PC拡張Endエリアに</div>を記述した方がよいでしょう。(センタリング、右寄せタグも同様)

2.メニューに背景色を付ける

それでは、今度は寄せたメニューに背景色を付けてみましょう。 ソースとしては下のような感じになります。

<div style="width:50%;background-color:navy">

右寄せにしたサンプルです。

サンプル2

メニュー部分に半透明のフィルタをかけることもできます。(IE限定)

<div style="width:50%;background-color:black;filter:alpha(opacity=60)">
サンプル3

テーブルの場合ほとんどのブラウザでは最後まで読み込まないと表示されない (Mozilla Firefoxなどでは読み込んでいる途中でも上のセルから表示していきます) ので、重い印象を受けますが、 divを使うと読み込んだところから順番に表示するので、その点でもお勧めです。

3.ボーダーを飾る

今度はボーダーを飾ってみましょう。例えば、こんな感じで。

<div style="width:50%;border:10px ridge silver">
サンプル4

次にテーブルでよくやる背景色を重ねていくやつをと思いましたが、こんなに長ったらしいソースになってしまいました。 (そうでもないかな?)

<div style="width:50%;height:600px;background-color:red">
<div style="height:590px;margin:5px;background-color:blue">
<div style="height:580px;margin:5px;background-color:yellow">
<div style="height:570px;margin:5px;background-color:white">
サンプル5

これでは、テーブルの方がソースが短くていいですかね? やってみるとなかなかうまくいかないものです。

4.2列、3列表示に挑戦

ここまで来たら、テーブルのように内容を2列、3列で表示することに挑戦しましょう。 3列ができれば2列もできるので、3列のサンプルのみ書きます。

<div style="width:30%;height:600px;background-color:red;position:absolute;top:10px;left:0%">左の内容</div>
<div style="width:40%;height:600px;background-color:blue;position:absolute;top:10px;left:30%">真中の内容</div>
<div style="width:30%;height:600px;background-color:yellow;position:absolute;top:10px;left:70%">右の内容</div>
サンプル6

5.floatで寄せる

position:absoluteを使う方法は画像などを使って細かい配置をするのには向いていますが、ディスプレイの大きさが変わったり、 ウィンドウサイズを縮小したりしたときなどに、文字が重なったりする可能性があります。 そこで、テーブルのようにウィンドウサイズが変わっても、それなりに表示されるような方法をご紹介します。

CSSのfloatプロパティを使用する方法です。 floatプロパティはHTMLのalign属性のように回り込みを指定することができます。 そして、テーブルを使わずにボックス領域に横幅を指定して、それを回り込ませます。 div要素にCSSで横幅を%で指定し、floatプロパティにleftを指定して左に回りこませます。 右に回り込ませるボックス領域はfloatrightを指定してもいいのですが、 3列組などに対応することを考えてleftを指定します。 それによって一番左側のボックスの右に回りこんだボックスの更に右にもボックスを回りこませることができます。

回り込みを解除するプロパティとしてはclearがあります。 clearプロパティにleftを指定するとfloat:leftの回り込みを解除し、 rightを指定するとfloat:rightの回り込みを解除します。 両方の回り込みを解除するときはclear:bothとします。

2列表示の例です。

<style><!--.hidari{float:left;width:50%}.kaijo{clear:left}--></style>
<div class="hidari"> 左側の内容 </div> <div class="hidari"> 右側の内容 </div> <br class="kaijo">
サンプル

3列表示の例です。

<style><!--.hidari{float:left;width:33%}.kaijo{clear:left}--></style>
<div class="hidari"> 左側の内容 </div> <div class="hidari"> 真ん中の内容 </div> <div class="hidari"> 右側の内容 </div>
<br class="kaijo">
サンプル
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送