はじめに
こんにちは！@70days_jsです。
今日はロゴとメニューが別れているシンプルなナビバーを作成しました。
今日は34日目。(2019/11/21)
よろしくお願いします。
サイトURL
https://sin2cos21.github.io/day34.html
やったこと
こんな感じのナビバーをシンプルに作りました。↓
以前もナビバーを作りましたが、それは横に均等に並ぶタイプのものでした。
今回はナビだけ左端に寄せて、メニューは右側にあるものです。
htmlはこんな感じです。↓
<divclass="header-more-than-751px"><divclass="header-menu"><ahref=""class="header-logo"></a></div><divclass="header-menu"><ahref="">メニュー1</a></div><divclass="header-menu"><ahref="">メニュー2</a></div><divclass="header-menu"><ahref="">メニュー3</a></div><divclass="header-menu"><ahref="">メニュー4</a></div></div>ロゴもメニューも1つのdivに入れています。
cssはこんな感じです。↓
.header-more-than-751px{display:flex;justify-content:flex-end;width:100vw;height:50px;}.header-menu{margin-right:5%;line-height:50px;}.header-menu:first-of-type{margin-right:auto;margin-left:5%;}.header-logo{display:inline-block;height:50px;width:50px;background-image:url("day34-logo2.png");background-size:cover;}大枠はflexboxflex-endを指定しているので右に寄っています。
ポイントはheader-menu:first-of-typeのこの一行です。↓
margin-right: auto;
これで最初の要素だけ右側に寄るようになります。
感想
とてもシンプルなものですが満足感は高いです。
実際にサイト制作で使うものを今後も積極的に作っていこうと思います。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
