menu

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

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

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

※実際に私が設定したレスポンシブサイトはこちら

スマホ3

このような人におすすめ

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

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

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

 

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

 

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

まとめ

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

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

menu2簡単!レスポンシブメニューをjQueryでドロップダウンできるように設定する方法

28818787 - businessman protect cloud lock symbol with handsさくらインターネットでwordpressを完全SSL化する方法

関連記事

  1. ど素人が独学でサイトを公開するまでにした失敗と成功

    ど素人が独学でサイトを公開するまでにした失敗と成功

    独学でwebサイトを作成して公開するのって何から手をつけたらいいかわからないですよね。私も全…

  2. gigafile

    メールで大容量ファイルを送信できないことはない!GigaFile…

    メールで大容量の写真や動画を渡したい時ってありますよね。実際にメールでスムーズに送れる容量は…

  3. 28818787 - businessman protect cloud lock symbol with hands

    さくらインターネットでwordpressを完全SSL化する方法

    最近サイトをSSL化にしなければという話を聞き、個人情報やクレジットを取り扱うわけではないですが、今…

  4. 絶対できる年賀状作成!無料のプリントマジックの使い方

    絶対できる年賀状作成!無料のプリントマジックの使い方

    普段あまりパソコンを使わないので年賀状を作ろうとしたら、わからなくて何をどう始めたらいいのだ…

  5. 簡単!photoshopを使ったトイカメラ風写真の作り方

    簡単!photoshopを使ったトイカメラ風写真の作り方

    今や簡単にInstagramで写真を加工できるようになりましたが、自分の好きな色彩で微妙な調…

  6. こんなに簡単でいいの?パスワード付きホームページの作り方

    こんなに簡単でいいの?パスワード付きホームページの作り方

    自分のサイトをパスワード設定したい時ってありますよね。例えば、あなたのメルマガ会員に…

  7. カフェロゴアイキャッチ

    チョーク風素材の使い方でこんなに印象が変わるの?!(photos…

    チョーク風のデザイン素材を使いたいけど、どのように使えば良いかわからずに悩みますよね。私も…

  8. HPのワイヤレスプリンターの設定方法(Photosmart Premium C309g)

    HPのワイヤレスプリンターの設定方法(Photosmart Pr…

    年賀状やハガキを印刷する時ぐらいにしかプリンターを使わないので、設定方法を忘れることってあり…

PAGE TOP