CSSで中央に大きなボタンがあるフッターを作ろう！
こんにちは！CSSのお時間です！
完成物
フッター中央のボタンを大きく表示しています！スマホアプリっぽい感じにしてみました．
ポイントは
中央ボタンの縁取りです．白の余白とそれを囲うようにグレーの縁をつけています．
ソース
まずは，<body>部分から載せます．
<body>
<header></header>
<main></main>
<footer>
<div id="center-frame"></div>
<div id="container">
<div><!-- 等間隔に確保するための空要素 --></div>
<a href="./">
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="./" id="center">
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
</div>
</a>
<a href="./">
<div class="item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
</div>
</a>
<div><!-- 等間隔に確保するための空要素 --></div>
</div>
</footer>
</body>今回はレイアウトをflexで並べています．mainをflex: 1で引き伸ばしoverflow-y: scrollとすることではみ出た要素は自動的にスクロール可能な表示となるのでおすすめです．勿論stickyやfixedの配置も可能です．
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-style: normal;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color-scheme: 'light';
}
body {
display: flex;
flex-direction: column;
height: 100svh;
overflow: hidden;
}
header {
background-color: #5f2dd3;
width: 100%;
height: 3.5rem;
font-size: large;
color: white;
font-weight: bold;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
main {
flex: 1;
overflow-y: scroll;
}
footer {
border-style: solid;
border-width: 1px 0 0 0;
border-color: lightgray;
background-color: white;
width: 100%;
height: 4rem;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
#container {
background-color: white;
position: relative;
width: 100%;
height: 100%;
z-index: 101;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}まずは，外枠のスタイルだけ掲載します．全体用プロパティにあるこの指定はreset.cssやnormalize.cssでも代用可能です．
margin: 0;
padding: 0;ヘッダーは中央にテキストを配置するプロパティが書かれています．
そして、フッターのコンテナー部分は上側に縁をつけておきます．
フッター中央の縁
フッターコンテナーの後ろに円の背景をおきます．
#center-frame {
background-color: lightgray;
border-radius: 3rem;
position: absolute;
width: 5.1rem;
height: 5.1rem;
bottom: 0.435rem;
z-index: 99;
}ボーダー色と同じ背景色にし，position: absoluteのデフォルト配置の力で中央に配置します．
- 縁の中央配置について
footerで指定したプロパティの中に
display: flex;
justify-content: center;
align-items: center;がありますが，この状態で子要素をabsolute配置するとデフォルトで中央へといきます．これを利用してdiv要素をleft/rightなしで配置しz-indexで下に持っていきます．
フッターのリンクボタン
フッターのリンクはaタグの中にdivを配置して周辺全体がクリックできるようにしアクセシビリティを向上させます．
footer a {
position: relative;
display: block;
pointer-events: none;
}
footer a#center {
bottom: 1rem;
}
.item {
color: white;
border-radius: 10rem;
border-style: solid;
border-width: .2rem;
border-color: transparent;
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
pointer-events: auto;
}
a#center .item {
background-color: #5f2dd3;
border-color: white;
border-width: .15rem;
border-style: solid;
width: 5rem;
height: 5rem;
}
.item svg {
fill: gray;
width: 1.7rem;
height: 1.7rem;
}
a#center .item svg {
fill: white;
width: 2.7rem;
height: 2.7rem;
}#centerのid持ちは上書きでスタイルを適用しています．後は:hoverのオプションを付与するだけで完成です！
最後に
アイコンは以下を使用しています．
また，::beforeで#centerの後ろに配置すれば良いのではという考えがあったのですが，
<div class="back">
<div class="parent">
<div class="child"></div>
</div>
</div>の場合にchildをbackよりも後ろに配置することが難しい(無理かも)です．z-indexで1つ上の親との順番関係は入れ替えたり可能ですが，2つ上の親との前後関係は変えることが難しそうです．childが間に挟まった場合は灰色の縁が下側にも見えるため今回は断念しています．もし可能になればこの手法のほうが簡単なんですけどね...(もし解決できる方がいらっしゃればコメントで教えて下さい🙇♂️)
