HTML メニューボタンの作り方１（CSS フッターの謎の隙間をなくす方法）
はじめに
今回はメニューボタンを作成します。フッター部分に、リストを一行で配置して外枠を付けてリンクできるようにします。前から少し気になってた「フッターの余白が消えない問題」も解決していきます。
ソースコード
base.html
<link rel="stylesheet" type="text/css" href="/static/base.css">
<footer>
<ul>
<li>ホーム</li>
<li>検 索</li>
<li><a href="/blog/create">新規作成</a></li>
<li><a href="/blog/logout">ログアウト</a></li>
</ul>
<span id="c">(c)2020 ふたり暮らし</span>
</footer>
<ul>~</ul>
リストを表示します。
<li>~</li>
リストの項目を記述します。<ul>~</ul>の間に複数入れることができます。
<span>~</span>
インライン要素としての範囲を指定します。idやclassを指定したい時に使います。
ブロック要素<div>のインライン要素版です。<div>では前後の行に改行が入ってしまうため、前後に改行を入れたくない時は<span>を使います。
base.css
footer{
position: fixed; /*絶対位置で固定*/
bottom: 0px; /*下に配置*/
left: 0px; /*左の隙間をなくす*/
width: 100%; /*幅*/
height: 60px; /*高さ*/
font-weight: bold; /*文字を太字にする*/
text-align: center; /*中央に表示する*/
background-image: url("back_image.jpg");
/*画像を背景に指定*/
}
ul{
margin: 0; /*上の余白をなくすため*/
padding: 5px 0; /*左の余白をなくすため*/
}
li{
display: inline-block; /*要素をインライン表示にする*/
width: 120px; /*幅*/
text-align: center; /*中央に表示する*/
border: outset 2px; /*外枠を作る（スタイル、太さ）*/
cursor: pointer; /*カーソル（指のかたち）*/
}
a {
text-decoration: none; /*下線を消す*/
}
@media screen and (max-width: 600px) {
li{
width: 80px; /*スマホなどの時のボタン幅*/
}
}
#c{
position: absolute; /*絶対位置（rightのために必要）*/
right: 30px; /*右に配置*/
margin: 0; /*上の余白をなくすため*/
フッターの上に謎の余白がある場合は、「フッターの範囲内の余白（padding）」ではなく、「フッターの中の要素の範囲外の余白（margin）」が原因です。
padding: 5px 0; /*左の余白をなくすため*/
リスト「<ul><li>~</li></ul>」には初期値で左に「範囲内の余白」が付いてます。（中央寄せにしていても、なぜか少し右に寄っているのはこれが原因です）
まとめ
HTMLで<ul>を使ってリストを作って<li><a href=~>を使ってリンク先（ページの移動）を設定します。CSSで<li>をインライン表示にして横並びにします。横並びにした<li>に外枠を付けて装飾してボタンのように表示すれば完成です。今回はフッターに作成していますが、ヘッダーに作成してもよさそうです。
ボタンを押すとメニュー一覧が表示されるメニューボタンの作り方も一緒に解説したかったのですが、少し長くなりそうなので次回にします。
↓よかったらポチッとしていってください。
