ホームページのレイアウトをするとき、
何に重点を置くでしょう？

・見た目のかっこよさ
・見易さ
・わかりやすさ
・使いやすさ

等々、きっといろんなことが出てきますよね。

制作する人、デザインする人、管理する人、使う人･･･

その立場によって要望も変わってくるでしょう。

一番いいのは、
どんな要望も満たせるページなのでしょうが、
それはなかなか難しい･･･

それでも最近はどんな人にでも使いやすいページを作りたいなと思います。

そんな、ユーザビリティ、アクセシビリティをどんどん良くしていって、
それからデザインも良くできていったらいいな
なんて思いつつ作業をしています。

良いテンプレートができたときは、
テーマ配布もできるかもしれませんね

divを左右に浮かべてならべる為に、
floatを使うと思います。

でもfloatを私用すると、
背景の設定がうまくいかなかったり、
指定したはずのborder-bottomが表示されなかったり・・・

[img align=left]http://www.obitastar.co.jp/uploads/img4732c045aa6c7.gif[/img]　それは、左図のようになっているせいかもしれません。

浮かべているdivを囲んだdiv（左図:赤点線）が、
中のdivの高さに連動できていないのです。

なので、
赤点線のdivに背景やborder-bottomなどを指定していても
中のdivに邪魔されて表示されません。

では、ここからが解決法です！

赤点線のdivを中のdivの高さに連動させるには、
赤点線のdivにfloat:left;を追加すること!!

これだけです

[img align=left]http://www.obitastar.co.jp/uploads/img4732c05480732.gif[/img]　これだけで、
左図のように赤点線のdivが
中のdivの高さにつられてくれます

魔法の言葉、
float: left;です

左の画像のように、
メニューリストの背景に画像をはりつけて、
ボタン風に表示してみましょう

まず、
HTMLのソースは・・・

<div id=”menu”>
<ul>
<li>What’NEW</li>
<li>News&info</li>
～～～～～省略～～～～～～
<li>利用規約</li>
<li>プライバシーポリシー</li>
</ul>
</div>

いたって普通のリストです

次に、
CSS(スタイルシート)、

リストのときに表示される黒点を表示しないように指定。
div.menu ul {list-style:none;}

div.menu li {background:url(画像アドレス) no-repeat 50%;
※liに背景画像を指定します。
背景画像
真ん中に画像がくるようにポジションは50％に！

line-height:30px;
※あまりメニュー同士にくっついて欲しくないときは、line-heightで調節。
heightでは文字の位置があわなかったりするので、ここはline-height!!

あとは、ここにtext-alignや、margin、paddingを使ってお好みの位置に表示しましょう。