スマホ画面下に電話・問い合わせボタンを固定するHTML・CSS - webotool｜ホームページ作成・楽天EC運営を支援する無料Webツール

スマートフォンでホームページを見ているとき、電話番号や問い合わせボタンがページ下部にしかなく、探すのが面倒なことがあります。興味を持った瞬間に連絡先が見つからないと、そのままページを閉じられるかもしれません。

そこで役立つのが、画面下部に電話・問い合わせボタンを固定表示する方法です。本記事では、HTMLとCSSだけで設置できる基本コードと、使いやすさを損なわない注意点を紹介します。

スマホ固定ボタンが問い合わせにつながる理由
固定ボタンのHTMLを追加する
CSSでスマートフォン画面の下に固定する
パソコンでは非表示にする
設置後に確認するポイント
固定ボタンを付けすぎない
まとめ

スマホ固定ボタンが問い合わせにつながる理由

スマートフォンで店舗サイトを見ながら電話ボタンを押す利用者 — 読み進めた場所からすぐ連絡できる導線が、問い合わせ時の迷いを減らします。

固定ボタンは、ページをどこまで読んでも同じ位置に表示されます。利用者が料金や事例を確認した直後に電話やフォームへ進めるため、連絡先を探して上まで戻る必要がありません。

特に美容室、工務店、修理業、飲食店など、スマートフォンから電話や予約を受ける事業と相性がよい改善です。ただし、ボタンが本文を隠したり、常に大きく表示されたりすると逆に読みづらくなります。

固定ボタンのHTMLを追加する

次のHTMLを、ページの閉じタグ</body>の直前に追加します。電話番号と問い合わせページのURLは、自分のものに変更してください。

<div class="mobile-contact-bar">
  <a class="contact-tel" href="tel:0612345678">
    電話する
  </a>
  <a class="contact-form" href="/contact/">
    問い合わせ
  </a>
</div>

tel:の後ろには、ハイフンや空白を除いた電話番号を入れます。画面に番号も表示したい場合は、「06-1234-5678へ電話」のようにリンク内の文字を変更できます。

CSSでスマートフォン画面の下に固定する

スマートフォン表示とCSSコードを確認するWeb制作者 — 固定位置だけでなく、本文の下余白やスマートフォンの安全領域も設定します。

次のCSSをテーマの追加CSS、または使用中のCSSファイルへ追加します。

.mobile-contact-bar {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }

  .mobile-contact-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
  }

  .mobile-contact-bar a {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }

  .contact-tel { background: #087f5b; }
  .contact-form { background: #1261a0; }
}

bodyの下余白は、固定バーによって本文末尾が隠れるのを防ぐために必要です。safe-area-inset-bottomは、スマートフォン下部の操作領域にも配慮する指定です。