CSSで横並びのメニューボタンを配置する方法【HTML初心者向け】


HTMLのリストタグでつくる横並びのメニューボタンの作り方を、その場しのぎでいつもうやむやにしてきたが、今回は自分で一から作って仕組みを理解してみることにした。

横並びができるとスタイルシートで細かなデザインを設計することができるようになるので、HTMLを始めたばかりの初心者の方にもぜひ覚えておいて欲しい内容となっている。





横並びのメニューボタンを構成するHTML


次のようなリストタグを使ったHTMLで、横並びメニューを実現していく。



CSSを何もかけない状態だと、このように表示される。





まずはCSSでボタンっぽくする


横並びを実現する前に、CSSでメニューボタンらしく見えるようにしてみよう。

ulの操作

デフォルトで表示されるリストの 丸ぽち を取り除く。





liの操作

横幅を指定し、背景色とボーダラインをつけ、テキストを中央に表示する。





aの操作

aタグの下線(アンダーライン)を非表示にする。



そしてテキストを装飾した。





ここまでのまとめ1


ここまでのCSSをまとめると、次のようなコードになっている。



見た目はこんな感じ。
少しはメニューボタンらしくなったかな?






本題、floatで横並びを実現する


さて、ここからが本題だ。
いよいよ横並びを実現するCSSを書いていく。

まずは、liタグに float を指定することで、横並びにする。



このままだと次の要素も回り込んでしまうので、回り込みをさせないために ulタグに overflow: hidden; を追加する。



ボタンの高さを指定して、縦の中央に文字が並ぶようにする。
liタグの line-heightheight を同じ値にすることで実現できる。



ボタン同士の間隔を少し開けて、メニューボタンを押しやすいように padding を指定してみた。








ここまでのまとめ2


CSSをまとめるとこうなる。





以上がCSSで横並びメニューボタンを実現するやり方だ。
メニューの装飾と、横並びを分けて考えることでCSSの理解が深まった。

以上で説明を終わる。

Web制作者のためのCSS設計の教科書

モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

KindleAmazon

あなたにおすすめ