CSSだけでレスポンシブ対応の追従する電話ボタンを設置する方法

最近、クライアントからレスポンシブサイトを作成するのに、スマホから電話をすぐにかけられるようにできないか？とお願いされる方が多いと聞きます。おそらく、スマホからインターネットを閲覧して、そのまま電話で予約や、問い合わせをすることが多くなってきてるからだと思います。そのような状況だからこそ、インターネットを見ながら、すぐに電話をかけられるようなユーザリビティを考えたレスポンシブサイトが必要とされているのではないでしょうか。
それで今回、スマホで操作中にいつでも電話をかけられるように、スクロールしても画面下部に電話ボタンが追従する設定方法を紹介したいと思います。

レスポンシブ対応の追従する電話ボタンの見本

※実際に私が設定したレスポンシブサイトは
幅を狭めると電話をかけるボタンが出現します。

このような人におすすめ

• 飲食店や病院など電話での予約や問い合わせが多い店舗のサイトを作成する人
• javascriptなどを使わずに簡単に追従する電話ボタンを設置したい人
• スマホで見る時だけに電話ボタンを表示させたい人

レスポンシブ対応の追従する電話ボタンの設置方法

クリックして電話がかかるようにするには＜a　href=”tel:00-0000-0000″＞のようにhrefの中にtel:を入れるだけでOKです。
↓のコードは私のサイトのHTMLコードです。

↓は私のサイトのCSSコードです。positionをfixedとしてスクロールしても固定して表示できるようにします。ブロック要素にしたので、左から５０％の中央に指定しても、ブロックの左上が中央に来るので、その分横幅の半分の100px左方向に移動させ、位置が中央寄せになるようにマークアップしました。
※スマホはタップするのに縦横が最低４４px必要です。ユーザリビティの低下につながりますのでそれ以下にならないようにして下さい。

↓私のサイトのCSSです。パソコン用とタブレット用のブレイクポイントに、電話ボタンを非表示にするようにマークアップしました。これでスマホ以外では表示されなくなります。

まとめ

いかがでしたでしょうか？レスポンシブサイト対応のスクロールに追従する電話ボタンは他にもあるかと思いますが、その中で最も簡単な方法だと思います。
例として私のサイトのコードを挙げましたが、それを参考にしてあなたの好みの電話ボタンをカスタマイズしてみてはどうでしょうか。

無料で簡単にクオリティーが高いボタンを作る方法↓

2015.11.30

たった２分でできる！ボタン画像をサイトに設置するボタンマルシェの使い方

リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画像を自分で作ることもできないし、そもそもやり方がわからないって思ってました。 しかし、今回、紹介するボタンマルシェは、無料でクオリティーの高いボタン素材を提供して下さっており、初心者の...

プログラミングを覚えるなら↓

2017.07.13

本気でスキルを身に付けたい人におすすめのプログラミングスクール５校のまとめ

本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みたいと考えている人へ、最短で習得する為にはスクールを利用することをおすすめしたいと思います。 なぜなら、私はwebと関係ない世界から今はこうやってブログを書いていますが、初めは独学で勉強して...