CSS | display:flexを使ったレスポンシブなフッターナビ
CSSのflexbox（display:flex）を使ったレスポンシブなフッターナビのデザインサンプルコードです。
レスポンシブなフッターナビ 2カラム
2カラム構造のレスポンシブなフッターナビのサンプルです。
See the Pen CSS flexbox footer nav （2 column） by yochans (@yochans) on CodePen.
<footer>
<nav>
<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
</nav>
<p id="copyright">Copyright 2021</p>
</footer>footer nav{
display: flex; /* flexbox */
flex-wrap: wrap; /* 折返し指定 */
gap: 0 4px; /* 余白（縦 横） */
}
footer nav div {
flex-grow: 1; /* レスポンシブ化 */
background: #ffe4e1;
}
footer nav p{
margin: 2px;
padding: 2px 6px;
}
#copyright {
display: flex; /* flexbox */
justify-content: center; /* 中央揃え */
align-items: center; /* 中央揃え */
margin-top: 4px;
padding: 10px;
background: #ffe4e1;
}背景色は確認用に設定しているだけですので、不要になれば削除して下さい。
その場合、#copyrightのmargin-topも不要になりそうです。
flex-grow: 1を指定することで、レスポンシブにしています。
footer nav pでサイトメニューなどを表示するリストの余白などを調節しています。
copyrightもflexbox（display:flex）を使ってコピーライトのテキスト部分が縦横中央にくるようにしています。
スマホ他、モバイル端末での表示時にカラム数を1カラムに変更する場合はfooter nav divにmin widthを指定します。
指定した値よりディスプレイサイズが小さい端末では1カラムの状態になります。
footer nav div {
flex-grow: 1; /* レスポンシブ化 */
min-width: 600px; /* モバイル端末サイズ */
background: #ffe4e1;
}レスポンシブなフッターナビ 3カラム
3カラム構造のレスポンシブなフッターナビのサンプルです。
2カラムとの違いは単純にHTMLで要素のブロックを増やしているだけです。
See the Pen CSS flexbox footer nav by yochans (@yochans) on CodePen.
<footer>
<nav>
<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
</nav>
<p id="copyright">Copyright 2021</p>
</footer>footer nav{
display: flex; /* flexbox */
flex-wrap: wrap; /* 折返し指定 */
gap: 0 4px; /* 余白（縦 横） */
}
footer nav div {
flex-grow: 1; /* レスポンシブ化 */
background: #ffe4e1;
}
footer nav p{
margin: 2px;
padding: 2px 6px;
}
#copyright {
display: flex; /* flexbox */
justify-content: center; /* 中央揃え */
align-items: center; /* 中央揃え */
margin-top: 4px;
padding: 10px;
background: #ffe4e1;
}サンプルのようなコードであれば、3カラム、あるいは4カラムなどに増減する場合は必要なHTMLを追加しているだけで実装可能です。
背景色は確認用に設定しているだけですので、不要になれば削除して下さい。
その場合、#copyrightのmargin-topも不要になりそうです。
スマホ他、モバイル端末での表示時にカラム数を1カラムに変更する場合はfooter nav divにmin widthを指定します。
指定した値よりディスプレイサイズが小さい端末では1カラムの状態になります。
footer nav div {
flex-grow: 1; /* レスポンシブ化 */
min-width: 600px; /* モバイル端末サイズ */
background: #ffe4e1;
}