CSS入門 レイアウトを作りこむ その2
スポンサーリンク
大枠は作成完了です。
デザインなどの変更はのちほどにします。
今度は"MENU"の中にボックスを作成して、それに画像を当てはめてボタンにしてみたいと思ってます。
あくまで、HTMLとCSSのみで作成するのでデザインに長けたHTML5とCSS3は現在は置いておきます。
ボックスを今度は連続して使用したいので"id"ではなく"class"で指定して作成します。
以下、記述とか。
"class"で指定し、ボックス名は…わかりやすく｢menubox｣として作成いたします。
-----------------------------------------
/* === memubox要素 === */
.menubox {
width : 120px ;
height : 120px ;
border-top : solid 1px black ;
border-bottom : solid 1px black ;
border-right : solid 1px black ;
border-left : solid 1px black ;
float : left ;
}
-----------------------------------------
新しく"float"というタグを使用します。回り込みを指定するタグですが、これを入れないデフォルトだと、下にどんどん表示されていくことになってしまいます。
そしてHTMLは"menu"の所をとりあえず以下の記述に変更
-----------------------------------------
<div id="menu">
<div class="menubox">
menu1
</div>
<div class="menubox">
menu2
</div>
<div class="menubox">
menu3
</div>
<div class="menubox">
menu4
</div>
<div class="menubox">
menu5
</div>
</div>
-----------------------------------------
これで"menu"のボックス内に新たな"menubox"が表示されるはずです。
floatなしだとボックスが縦に羅列してしまっています。回り込みはレイアウト崩れの原因なので注意してみました。
現状だと左に寄って表示されてしまっています。
これを今度はある程度均等に配置します。
"menubox"の所に以下を記述してみました。
-----------------------------------------
margin-left : 50px;
margin-right : auto;
-----------------------------------------
ボックスの左側を｢50px｣分ずらしました。右は特に指定していないのでautoにしてあります。
これで全体的にちゃんと表示されるでしょうか。
なにも考えず50pxで指定しましたが、かなりきれいに並びました(笑)増やしたり減らしたりする場合はこの値を変更させてバランスをとるといいかと思われます。
