CSS | display: flexを使ったレスポンシブなヘッダーナビ
CSSのflexbox（display: flex）を利用したレスポンシブなヘッダーナビメニューのデザインサンプルです。
可変幅、均等幅、固定幅と3つのタイプを紹介しています。
display: flexでレスポンシブ + 可変幅
レスポンシブで、並べる要素のサイズに合わせた可変幅メニューナビのサンプルです。
See the Pen CSS flexbox header nav menu （Equal width） by yochans (@yochans) on CodePen.
このページを表示しているブラウザサイズによっては少しわかりにくいですが、サンプルでいうところの文字列が収まるように可変されていきます。
幅が足りている残りの要素は均等幅でサイズが決定されます。
サンプルは文字数の多い「JavaScript」の部分が最初に足りなくなり、一番大きなサイズとなります。
<header>
<div id="site-name">SITE NAME</div>
<nav>
<p><a href="">PHP</a></p>
<p><a href="">CSS</a></p>
<p><a href="">Python</a></p>
<p><a href="">JavaScript</a></p>
</nav>
</header>#site-name {
padding: 10px;
}
header nav {
display: flex; /* flexbox */
flex-wrap: wrap; /* 折返し指定 */
gap: 1px; /* 余白（縦 横） */
}
header nav p {
margin: 0;
flex-grow: 1; /* レスポンシブ化 */
display: flex; /* flexbox */
}
header nav a {
width: 100%; /* 全体をクリック可能領域に */
padding: 4px 0;
color: #FFF;
text-decoration: none;
text-align: center;
background: #000;
}
header nav a:hover {
background: #404040;
}display: flexでレスポンシブ + 均等幅
レスポンシブで、並べる要素のサイズを割合による均等幅としたメニューナビのサンプルです。
See the Pen CSS flexbox header nav menu （Equal width） by yochans (@yochans) on CodePen.
並べる要素を割合による固定幅にした場合、ブラウザのサイズによって常に3等分、4等分した固定幅の表示が可能となります。
注意点としては、文字列など要素に必要な横幅以上小さくなってしまった場合は、文字列であれば改行または切り取りされる部分です。
サンプルですと、最初に文字数の多いJavaScriptが自動改行される事になります。
<header>
<div id="site-name">SITE NAME</div>
<nav>
<p><a href="">PHP</a></p>
<p><a href="">CSS</a></p>
<p><a href="">Python</a></p>
<p><a href="">JavaScript</a></p>
</nav>
</header>レスポンシブ+可変幅との違いは、flex-grow:1は指定せずにwidthで割合の横幅を指定している部分です。
並べる要素が4つの場合は25％となりますが、gapで指定している余白分の1pxを計算する必要があるため、calc(25% – 1px)としています。
※gapで余白を指定した場合は外側は余白が作られないので余白分の計算は指定値×-1となります。
要素同士の区切り線、余白、隙間を作らない場合は普通に25％などで問題ありません。
#site-name {
padding: 10px;
}
header nav {
display: flex; /* flexbox */
flex-wrap: wrap; /* 折返し指定 */
gap: 1px; /* 余白（縦 横） */
}
header nav p {
margin: 0;
width: calc(25% - 1px);
display: flex; /* flexbox */
}
header nav a {
width: 100%; /* 全体をクリック可能領域に */
padding: 4px 0;
color: #FFF;
text-decoration: none;
text-align: center;
background: #000;
}
header nav a:hover {
background: #404040;
}display: flexでレスポンシブ + 固定幅
レスポンシブで、並べる要素のサイズを固定幅とし、残りの余白部分を可変幅にしたメflexboxで作るニューナビのサンプルです。
See the Pen CSS flexbox header nav menu （Fixed width） by yochans (@yochans) on CodePen.
残りの余白部分をHTMLで追加しています。
サンプルではpタグにspaceというクラス名をつけてみました。
<header>
<div id="site-name">SITE NAME</div>
<nav>
<p><a href="">PHP</a></p>
<p><a href="">CSS</a></p>
<p><a href="">Python</a></p>
<p><a href="">JavaScript</a></p>
<p class="space"></p>
</nav>
</header>横並びにする要素の幅をwidthで固定して指定。
余りの部分となる要素、クラス名「space」にflex-grow: 1を指定しています。
#site-name {
padding: 10px;
}
header nav {
display: flex; /* flexbox */
flex-wrap: wrap; /* 折返し指定 */
gap: 1px; /* 余白（縦 横） */
}
header nav p {
margin: 0;
width: 100px;
display: flex; /* flexbox */
}
header nav .space {
flex-grow: 1;
background: #000;
}
header nav a {
width: 100%; /* 全体をクリック可能領域に */
padding: 4px 0;
color: #FFF;
text-decoration: none;
text-align: center;
background: #000;
}
header nav a:hover{
background: #404040;
}flexboxの並べる要素を固定幅にした場合、あまりの部分をどう表現するかの方法は、他にも全体の背景色をつけて余白部分を作る場合はborderで指定したりと、いくつもあるかと思います。
サンプルではHTMLの追加が必要なものの、最後の要素を可変幅にすることで対応してみました。