レスポンシブデザイン|スマホのページ下部に問い合わせボタンを付ける方法を解説

今回はレスポンシブデザイン(スマホ対応)を勉強中の方向けに、スマホでよく見る問い合わせボタンをページ下部に固定表示させる方法を紹介させていただきます。

完成デモ

上記のデモのようにPC画面では表示されていなかったページ下部の問い合わせボタンを表示させることで、スマホページからのコンバージョン率をグッとぐっと上げることができます。

CSSのメディアクエリを利用するだけで簡単に実装できるテクニックなので、これを機会に実装できるようになりましょう。

HTMLの書き方

それではまずHTMLの書き方から見ていきましょう。

<body>
	<main>
		<p>
			画面幅を小さくしたらスマホ用のメニューが下部に表示されます
		</p>
	</main>

	<!-- ここからスマホ用下部メニュー -->
	<div class="sp-menu">
		<a href="">
			お問合せページ
		</a>
	</div>
	<!-- ここまで -->
</body>

上のソースコードを見ていただければわかるように、記事本文の最後(bodyの閉じタグ前)にスマホ用下部メニューを用意するだけです。今回はclass名を「sp-menu」としましたが、class名は好きな名前で大丈夫です。

CSSの書き方

それではCSSの書き方を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		body,
		p{
			margin: 0;
			padding: 0;
		}

		p{
			text-align: center;
			padding-top: 100px;
		}

		main{
			width: 100%;
			max-width: 800px;
			height: 1000px;
			margin: 0 auto;
			background: rgba(0,0,0,.1);
		}

		.sp-menu{
			display: none;
		}

		/* ここからメディアクエリ 画面幅500px以下のスタイル */
		@media(max-width:500px){
			.sp-menu{
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 60px;
				background: #fff;
			}

			.sp-menu > a{
				width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #337FFF;
				color: #fff;
				border-radius: 5px;
				padding: 8px 0;
				text-decoration: none;
			}
		}
		/* ここまで */
	</style>
	
</head>
<body>
	<main>
		<p>
			画面幅を小さくしたらスマホ用のメニューが下部に表示されます
		</p>
	</main>
	<div class="sp-menu">
		<a href="">
			お問合せページ
		</a>
	</div>
</body>
</html>

上記が完成デモのソースコードです。

重要なポイントを一つ一つ解説していくので、どういう意味かわからないところがあったらしっかり理解できるようにしていきましょう。

28行目

PC画面ではスマホ用の問い合わせボタンは表示させないので、display:noneを使って非表示にしています。

34〜36行目

display:noneで非表示になっていた要素をdisplay:flexで表示させると同時に、フレックスボックスを使って子要素を綺麗に上下左右中央揃えにしています。フレックスボックスがよくわからない方は、[CSS練習問題] Flexboxで自由自在に要素を整列しようの記事を読んで勉強しましょう。

37〜38行目

position:fixedを使うことで問い合わせボタンの要素を固定表示させ、bottom:0とすることで画面の下にぴったりとくっつけるようにしています。


解説は以上になります。ボタンの大きさや色などのスタイルを変更する場合は自由に修正してみてください。

比較的簡単な方法で高い効果が得られるテクニックなので、レスポンシブデザインをする際は是非覚えておきましょう!