CSSで横並びでメニューボタン配置してみる

うやむやにしてきたメニューボタンの作り方。
これを機会に一から作ってみる。





01.Htmlの用意







02.CSSでボタンを作成する。



ulの操作


丸ぽちを取り除く




liの操作


横幅を指定、背景色ボーダライン、テキストを中央に




aの操作


下線を消す。



テキストの装飾。




06.ここまでのまとめ1


現状のCSSをまとめるとこんな感じになっている。







07.本題


いよいよ横並びにしてく。

liにfloatで横並びになる。



このままだと次の要素も回り込んでしまうので、ulに回り込みをさせないための処理を追加。



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



ボタン同士の隙間を空ける。ボタンを押しやすいようにpaddingも指定する。




08.ここまでのまとめ2


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







09.参考


http://uxmilk.jp/60712




あなたにおすすめ