今さら言うまでもないことかもしれませんが、テーブルは本来はレイアウトに用いるものではなく、表を表示するために使う要素です。 iらんどの編集画面においては、PC拡張エリアに記述しておけば、それほど問題にならないテーブルタグですが、他にメニューなどを左右に寄せたりするいい方法はないのでしょうか? 実はメニューを寄せるだけだったら、実に簡単なタグでできます。
上記のタグをPC拡張エリアに書くだけで、メニューを左に寄せることができます。
真中に寄せたい場合には、その前に<center>、右側に寄せたい場合には、 <div align="right">を記述するだけです。 閉じタグがないと、ブラウザによって問題が生じる可能性がありますので、 PC拡張Endエリアに</div>を記述した方がよいでしょう。(センタリング、右寄せタグも同様)
それでは、今度は寄せたメニューに背景色を付けてみましょう。 ソースとしては下のような感じになります。
右寄せにしたサンプルです。
メニュー部分に半透明のフィルタをかけることもできます。(IE限定)
テーブルの場合ほとんどのブラウザでは最後まで読み込まないと表示されない (Mozilla Firefoxなどでは読み込んでいる途中でも上のセルから表示していきます) ので、重い印象を受けますが、 divを使うと読み込んだところから順番に表示するので、その点でもお勧めです。
今度はボーダーを飾ってみましょう。例えば、こんな感じで。
次にテーブルでよくやる背景色を重ねていくやつをと思いましたが、こんなに長ったらしいソースになってしまいました。 (そうでもないかな?)
これでは、テーブルの方がソースが短くていいですかね? やってみるとなかなかうまくいかないものです。
ここまで来たら、テーブルのように内容を2列、3列で表示することに挑戦しましょう。 3列ができれば2列もできるので、3列のサンプルのみ書きます。
position:absoluteを使う方法は画像などを使って細かい配置をするのには向いていますが、ディスプレイの大きさが変わったり、 ウィンドウサイズを縮小したりしたときなどに、文字が重なったりする可能性があります。 そこで、テーブルのようにウィンドウサイズが変わっても、それなりに表示されるような方法をご紹介します。
CSSのfloatプロパティを使用する方法です。 floatプロパティはHTMLのalign属性のように回り込みを指定することができます。 そして、テーブルを使わずにボックス領域に横幅を指定して、それを回り込ませます。 div要素にCSSで横幅を%で指定し、floatプロパティにleftを指定して左に回りこませます。 右に回り込ませるボックス領域はfloatにrightを指定してもいいのですが、 3列組などに対応することを考えてleftを指定します。 それによって一番左側のボックスの右に回りこんだボックスの更に右にもボックスを回りこませることができます。
回り込みを解除するプロパティとしてはclearがあります。 clearプロパティにleftを指定するとfloat:leftの回り込みを解除し、 rightを指定するとfloat:rightの回り込みを解除します。 両方の回り込みを解除するときはclear:bothとします。
2列表示の例です。
3列表示の例です。
SEO | [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送 | ||