CSSのflexboxを使っていろいろなナビゲーションをレイアウトしてみる
flexboxを使ってよくあるナビゲーションのレイアウトを作ってみる。下記のHTMLをCSSでいろんなレイアウトにしてゆきます👀
<nav>
<a href="#" class="logo">
<img src="./logodammy.png">
</a>
<a href="#">about</a>
<a href="#">service</a>
<a href="#">products</a>
<a href="#">news</a>
<a href="#" class="contact">contact</a>
</nav>右寄せのナビゲーション
ロゴとナビゲーションを横に並べたベーシックなナビゲーション。
flexboxを使って、横一列に並べて間隔分のmarginを設定するだけ💡
body{
min-width:960px;
background:#f3f3f3;
font-size:15px;
}
nav{
display:flex;
align-items:center;
height:140px;
width:87.5%;
margin:0 auto;
}
a{
margin-right:40px;
color:#000;
text-decoration:none;
letter-spacing:.1em;
}
.logo{
width:70px;
height:20px;
margin-right:50px;
}
.logo img{
width:100%;
height:auto;
}
ロゴだけを左に置いた右寄せのナビゲーション
ロゴは左寄せで、ナビゲーションは右寄せに配置するバージョン。
このレイアウトもよくあるナビゲーション。
こういうレイアウトの場合にはオートマージンを使う💡
LOGO部分のmargin-rightをautoにすると、ナビゲーション部分を右寄せに配置できる。ナビゲーションは右寄せなので、marginは左側につけておけば、右側が親要素の右端と揃う。
body{
min-width:960px;
background:#f3f3f3;
font-size:15px;
font-family:sans-serif;
}
nav{
display:flex;
justify-content:center;
align-items:center;
height:140px;
width:87.5%;
margin:0 auto;
}
a{
height:60px;
margin-left:40px;
color:#000;
text-decoration:none;
letter-spacing:.1em;
}
.logo{
width:70px;
height:20px;
margin-right:auto;
margin-left:0;
}
.logo img{
width:100%;
height:auto;
}
ロゴとお問い合わせを独立させたナビゲーション
ロゴとお問い合わせをナビゲーションから独立させたタイプ。
こちらもオートマージンを使えば簡単🙆
ロゴのmargin-rightと、contactのmargin-leftをそれぞれautoにする。
body{
min-width:960px;
background:#f3f3f3;
font-size:15px;
font-family:sans-serif;
}
nav{
display:flex;
align-items:center;
height:140px;
width:87.5%;
margin:0 auto;
}
a{
margin:0 20px;
padding:1em 10px;
color:#000;
text-decoration:none;
letter-spacing:.1em;
}
.logo{
width:70px;
height:20px;
margin-right:auto;
margin-left:0;
}
.logo img{
width:100%;
height:auto;
}
.contact{
margin-left:auto;
margin-right:0;
padding:.5em 1.5em;
background:#ddd;
font-size:14px;
}
中央寄せのナビゲーション
こちらもおなじみのレイアウト、センター揃えのナビゲーション。
ロゴ部分とナビゲーションを折り返して表示したいので、flex-wrapで折り返し可にして、justify-contentでセンター揃えにする。
センター揃えにする場合のmarginは左右均等につける。
body{
min-width:640px;
background:#f3f3f3;
font-size:15px;
font-family:sans-serif;
}
nav{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
height:140px;
width:87.5%;
margin:0 auto;
}
a{
padding:1em 10px;
margin:0 10px;
color:#000;
text-decoration:none;
letter-spacing:.1em;
}
.logo{
width:100%;
height:20px;
margin-top:20px;
margin-left:0;
text-align:center;
}
.logo img{
width:70px;
height:auto;
}
ロゴ部分のリンクエリアが左右目一杯まで広がってしまうので、実際に使うときは、HTMLを少し変えるほうがよいです。
下記のようにして、flexアイテムの内側に作ってリンクエリアをロゴサイズ程度におさめておくほうが親切です。
こんな感じに👇
<nav>
<span class="logo">
<a href="#">
<img src="./logodammy.png">
</a>
</span>
<a href="#">about</a>
<a href="#">service</a>
<a href="#">products</a>
<a href="#">news</a>
<a href="#" class="contact">contact</a>
</nav>ボタンタイプのナビゲーション
リンクのエリアがわかりやすいボタンっぽいタイプのナビゲーション。
ボタンのサイズがバラバラだとちょっとカッコ悪いので、テキストだけの時と違って、同じサイズのボタンを均等に配置します🙆
justify-content:space-between;でエリア内の左右目一杯で均等に配置。各ボタンのwidthを100%÷6の値からボタンとボタンの間隔を引いた値にすればOK。
もしくは、flexboxは1列に収めるので、borderやmarginでボタンとボタンの間隔を作って、100%÷6よりも大きいwidthの値にしても同じレイアウトを作ることが可能です。
body{
min-width:640px;
background:#f3f3f3;
font-size:15px;
font-family:sans-serif;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
height:140px;
width:87.5%;
margin:0 auto;
}
a{
width:16.2%;
width:calc(100% / 6 - 1px);
height:60px;
line-height:60px;
text-align:center;
color:#000;
background:#c3c3c3;
text-decoration:none;
letter-spacing:.1em;
}
.logo{
background:#000;
}
.logo img{
width:100%;
max-width:70px;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
top:50%;
transform:translateY(-50%);
}
inline要素として配置したり、floatを使って配置してもよいのだけど、flexboxを使って色々なレイアウトにコーディングしてみました。
いろんなCSSのプロパティを知っていると、HTMLを極力シンプルに保てる🙌
.logoと.contactはCSSの擬似要素（:first-childや:last-child）を使ってもよいのだけど、後々のメンテナンス性などを考えると、クラス名で対応する方がよいかな。