画面をスクロールしてもずっと固定で表示されるボタンがほしい！
画面をスクロールしてもずっと固定で表示されるボタンがほしい！
今回は俗に言う追従ボタンの作り方を説明するぞっっ！
そもそも追従ボタンとは？
そもそも追従ボタンとはどのようなものなのか、皆様にご覧いただこう
おわかりいただけただろうか？
画面右端、スクロールしてもスクロールしても付いてくる怪しげなボタンを
今回はこんな感じの追従ボタンを作っていくよ！
追従ボタンのHTML・CSS
それでは早速コードを紹介していきます。
<div class="header_box">
<p class="header_btn-green"><a href="">問い合わせ</a></p>
<p class="header_btn-blue"><a href="">申し込み</a></p>
</div>上記コードは主に全体を囲むheader_boxと各ボタンを構築しているheader_btn-⚪︎⚪︎で組まれています。
.header_box {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
background: #fff;
z-index: 500;
background-color: transparent;
}
@media screen and (min-width: 768px) {
.header_box {
position: fixed;
top: 13.6rem;
right: 0;
display: flex;
flex-direction: column;
width: 4rem;
}
}
.header_box p {
font-size: 1.4rem;
line-height: 1.6rem;
font-weight: bold;
}
.header_btn-green,
.header_btn-blue {
position: relative;
display: inline-block;
display: flex;
align-items: center;
color: #fff;
font-weight: 300;
text-align: center;
font-size: 1.9rem;
width: 100%;
border: 1px solid #fff;
border-right: none;
}
@media screen and (min-width: 768px) {
.header_btn-green,
.header_btn-blue {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 1.8rem;
padding: 5.5rem 2rem 2.5rem;
letter-spacing: 0.25em;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
}
.header_btn-green {
background-color: #6cb95d;
}
@media screen and (min-width: 768px) {
.header_btn-green {
border-top-left-radius: 7px;
}
}
.header_btn-blue {
background-color: #23114d;
}
@media screen and (min-width: 768px) {
.header_btn-blue {
border-bottom-left-radius: 7px;
}
}
.header_btn-green::before,
.header_btn-blue::before {
position: absolute;
content: "";
top: 50%;
left: 18%;
transform: translateY(-50%);
padding: 1.5rem;
}
@media screen and (min-width: 768px) {
.header_btn-green::before,
.header_btn-blue::before {
top: 8%;
left: 50%;
transform: translateX(-50%);
padding: 1.4rem;
}
}
/* アイコンが必要な場合 */
.header_btn-green::before {
background: url("icon_mail.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header_btn-blue::before {
background: url("icon_yoyaku.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media screen and (min-width: 768px) {
.header_btn-blue::before {
left: 50%;
}
}
.header_btn-green a,
.header_btn-blue a {
width: 100%;
padding: 1rem;
padding-left: 4rem;
display: block;
}
@media screen and (min-width: 768px) {
.header_btn-green a,
.header_btn-blue a {
padding: 0;
width: auto;
}
}長いCSSがあるけど、今回解説するのは下記コードぼ部分
.header_box {
position: fixed;
top: 13.6rem;
right: 0;
display: flex;
flex-direction: column;
width: 4rem;
}position: fixed;で要素の配置方法を指定
position: fixed;を指定すると、その要素はビューポート（ブラウザウィンドウ）に対して固定された状態で表示されます。
つまり、今回のようにスクロールしても画面上の特定の位置に要素が固定されたまま表示されるようになります。
他にもよく見る「トップへ戻るボタン」なんかもこれが使われています。
ボタンの位置と配置について
top: 13.6rem;
right: 0;
display: flex;
flex-direction: column;right:0;これを指定することにより、画面右端にボタンを配置することが可能となります。
そして、今回はボタンを縦に配置するので、全体にflex-direction:column;をかけることにより縦にボタンを配置しております。
まとめ
いかがでしたでしょうか？
コーポレートサイトやLPなどでよく見る追従ボタンとなります。
ぜひ皆さんも作ってみてください！