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
が間に挟まった場合は灰色の縁が下側にも見えるため今回は断念しています.もし可能になればこの手法のほうが簡単なんですけどね...(もし解決できる方がいらっしゃればコメントで教えて下さい🙇♂️)