Flexboxでメニュー制作に挑戦！

WEBサイト制作　メニュー制作編

WEB制作

2019.01.24

あんまり進んでませんがWEBサイト制作の進捗です。

とりあえず現状報告

今現在こんな感じです。

うさみぃ

メニューができてる！

そうです。メニューとかナビゲーションとか言われる部分をつけました。これさえあればなんかそれっぽくなりますね！
ただし、ブログ以外何もリンクしてないです・・・・

横並びメニューといえばfloatやinline-blockを使って作る方法しか知りませんでした。
が、css3にflexboxなるものがあると知り、今回挑戦してみました。

うさみぃ

急に難しいコトバが・・・・

私も初心者なので、ここからは詳細は省いてこうしたらできたっていう話だけをします。
HTML、CSSがわかる人向けなので詳しく知りたい人は他のサイトを探して下さい。

うさみぃ

丸投げだー！

まずは<ul>タグを使ってメニューをリストにします。
メニューなので<a>タグでリンクも張ります。

<ul>
 <li><a href="#">menu01</a></li>
 <li><a href="#">menu02</a></li>
 <li><a href="#">menu03</a></li>
 <li><a href="#">menu04</a></li>
</ul>

続いてCSSですが、メニューのデザインは人それぞれなので、とりあえず私が使ったCSSを載せておきます。

ul {
  display: flex;
  justify-content: space-around;
  background-color: #4169e1;
  color: #fff;
  font-size: 16px;
  padding: 5px;
}

こうすると大体こうなります。

メニューイメージ

メニューの幅は別の場所で指定していますが、今回は省きます。

ここで大事なのはdisplay: flex;です。
これだけでもうリストが横並びになります。すごいです！楽です！感激です！

そして justify-content: space-around; でメニューの幅に合わせて要素を均等に並べます。
並べ方は色々変えられるので気になる人は調べてみて下さい。

並べるだけでは味気ないので、その下の記述で背景を青くしたり文字の色、サイズを変えたり、メニューの間隔などの調整をしています。
各プロパティの意味がわからない人は調べて下さいぃ

うさみぃ

細かいところは、ほんとに丸投げね・・・・

さらにマウスオーバーで色が変わるようにしたり、リンク文字に出る下線を消したりと色々していますが、上のHTMLとCSSだけで横並びのメニューはできてしまいます。

今までは floatを使ってメニューを作っていたのでこの簡単さは驚きです！
雑な解説で申し訳ないですが、ぜひ参考にしてメニューを作ってみて下さい！

うさみぃ

もっと親切なサイトを参考にして下さいね・・・・