コピペでできる！固定フッターメニュー！
こんにちは。きっしーです。
今日はHTML/CSSだけで固定フッターメニューを作成してみます。最近（2018年5月）のブログやアプリケーションでよく見かけるようになったメニューです。
固定フッターメニューのメリット・デメリット
これまでよく目にしたメニューは、ヘッダー部にハンバーガーメニューボタンを用意して、ボタン押下でメニューを開くナビゲーションドロワーが多くありました。しかし、スマホの場合は片手で操作することが多く、画面の最上部にあるヘッダー部の操作はしにくいという課題がありました。
固定フッターメニューの場合、指の届く範囲にメニューがあるので、スマホで片手で操作しやすいメリットがあります。
一方の固定フッターメニューにもデメリットもあります。ヘッダー部はページ先頭に戻る方法がいくつか存在するので、戻りやすいです。このため、ヘッダーメニューは固定しなくても、それなりに操作はしやすいです。
ページ最下部に移動する方法は基本的にスクロールせざるを得ません。フッターメニューはどうしても固定になってしまいます。
メニューが固定されているとコンテンツの表示領域が狭くなります。
それでも、指の届く範囲にメニューがあるメリットは大きいです。
もう1点、固定フッターメニューのメリットがあります。それは実装しやすいというものですが、これは別途「固定ヘッダーメニュー」の記事を書いて説明することとします。
ソースコード＆プレビュー
まずはいつもの通り、ソースコードとプレビューからです。
いい感じです。指を伸ばすストレスがなくていいですね。
ソースコードの解説
メニューを作成する
メニューはいつもの通り、ul要素で作成します。ボタン風に表示するため、FontAwesomeでアイコンをつけ、その下にspan要素でラベルを付けています。
HTML
<nav class="global-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#">
<i class="fas fa-home"></i>
<span>Home</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fas fa-star"></i>
<span>Star</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fas fa-history"></i>
<span>History</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fas fa-cart-arrow-down"></i>
<span>Buy</span>
</a>
</li>
</ul>
</nav>
メニューのラベルをアイコンの下に表示する
i要素、span要素はインライン要素です。このままでは、アイコンとラベルが横並びになってしまうので、CSSのdisplay: blockを使ってブロック要素にします。これでアイコンの下にラベルが表示されるようになります。
CSS
.nav-item i {
display: block;
font-size: 24px;
}
.nav-item a span {
display: block;
font-size: 10px;
}
アイコンは大きめに、ラベルは小さめに表示するためフォントサイズを調整します。
メニューを横方向に並べる
li要素はブロック要素なので、デフォルトでは縦方向に並んでしまいます。CSSのdisplay: tableとdisplay: table-cellを使って、横並びにします。
また、list-style: noneでリストの黒ぽちを消しつつ、text-align: centerでli要素の中央にアイコンとラベルが表示されるようにします。
CSS
.nav-list {
display: table;
padding: 0;
list-style: none;
text-align: center;
}
.nav-item {
display: table-cell;
padding: 4px 0px;
}
メニューの幅を均等にする
次にメニューの幅を均等にします。display: tableを使っているので、table-layout: fixedを使うと簡単に幅均等にすることができます。
CSS
.nav-list {
table-layout: fixed;
width: 100%;
}
メニューにボーダーをつけ、ボーダーの重複をなくす
メニューをボタン風に表示するため、ボーダーをつけたいと思います。
borderプロパティでボーダーをつけますが、このままでは、セルとセルの間（ボーダーが重なるところ）でボーダーが太く表示されます。これはデフォルトでボーダーが重ならないため、太く見えています。
これを解消するため、border-collapse: collapseを指定しています。
CSS
.nav-list {
border-collapse: collapse;
}
.nav-item {
border: solid 1px gray;
}
メニューをページ下部に固定する
display:fixedを使って、メニューをページ下部に固定します。
CSS
.global-nav {
position: fixed;
left: 0;
bottom: 0;
}
これで、固定メニューはほぼ完成です。後は微調整になります。
ページ下部にマージンをつけて調整する
固定していないコンテンツは固定した要素の裏に隠れる問題があります。display: fixedを使った場合の問題ですがこれを解消するため、固定ヘッダーメニューの高さ分だけ、マージンをつけます。
CSS
.footer {
margin-bottom: 48px;
}
おめでとうございます！これで固定フッターメニューが完成です！
まとめ
いかがでしたでしょうか。最近見られるようになってきた「固定フッターメニュー」を作ってみました。
操作のしやすい「固定フッターメニュー」をあなたのサイトにも追加してみてはいかがでしょうか？
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。