PC版メニューのスタイリングを完成させていきます。
- リストのスタイル
- リンクのスタイル
- ホバーのスタイル
リストのスタイル
・前回まででpc版のメニューを作ったので今回はそちらをスタイリングしていきたいと思います。
・具体的には横並びにし横幅の設定やホバーすると背景色が薄くなったりといったスタイルをしていきます。
・まずはリストのスタイリングをしていきたいのでulに対してのスタイリングを書いていきましょう。
・先頭の黒点がいらないのと余白は0にしておきたいのと横並びにしていきたいと思います。
・セレクタは.pc-menu ulとしてあげて、もちろんメディアクエリの中で書いていきます。
・先頭の黒点はlist-style-typeをnoneにして、余白に関してはmarginとpaddingをそれぞれ0にして、最後に横並びにしたいのでdisplayをflexにしてあげましょう。
・こんな感じですね。
.pc-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
リンクのスタイル
・次にリンクのスタイリングをしていきます。要素を広げてクリックできる範囲大きく見やすく使いやすいUIにしていき、文字の中央揃えもやっていきます。
・セレクタは.pc-menu a でいいでしょう
まず横幅と縦を設定できるようにdisplayをblockに設定しておきましょう。次に横幅は80pxくらいにしたいのでwidthを80pxと指定します。
・縦は文字の大きさに合わせたいのでline-heightをいじっていきます。64pxくらいでいいでしょう。あとは文字を真ん中に持ってきたいのでtext-alignをcenterに持ってきます。
・こんな感じです。
.pc-menu a {
display: block;
width: 80px;
line-height: 64px;
text-align: center;
}
ホバーのスタイル
・あとはホバーしたときに背景を薄くなるように設定していきます。
・まずセレクタは.pc-menu a:hoverとしてあげます。
・背景はbackgroundで指定できるので#f2f2f2を指定してあげます。
・こんな感じです。
.pc-menu a:hover {
background: #f2f2f2;
}
・これがハンバーガーメニューの作り方になります。もちろん一例ではありますが基本的なことが網羅できたと思います。
・みなさんもぜひ作ってみてくださいね。
