【追従型メニューの作り方】スクロールして固定させたい！ーお問い合わせボタン編ー

サムネイル
               

 

キニナリ
悩む人

メニューとは別に問い合わせボタンを作りたい

問い合わせボタンをスクロールした時に固定したい

レスポンシブ対応した時には、画面下部に固定させたい

 

そんな疑問にお答えします。

 

 

 

 

See the Pen
contact by moridai1104 (@moridai1104)
on CodePen.

 

 

このCSSコードは、画面幅が768px以下の場合に適用されるメディアクエリを含んでいます。基本的な構造は、`#header`内の`.contact`というクラスを持つ要素にスタイルを適用しています。

 

通常の画面サイズでは、`#header .contact`の要素は横幅が200px、高さが80pxで、画面の右上隅に固定されます。また、ホバー時に背景色が変わるように設定されています。

 

一方、画面幅が768px以下の場合、メディアクエリ内のスタイルが適用されます。この場合、要素の横幅が100%、高さが60pxに変更され、位置は画面の下部中央に固定されます。これにより、モバイルやタブレットなどの小さい画面でも適切に表示されるようになります。

 

共通して、`position: fixed;`が使用されており、要素が画面のスクロールに追従するように設定されています。そして、`top`や`right`がレスポンシブ時に無効化され、`bottom`と`left`が使用されて位置が調整されています。

 

このCSSコードは、ヘッダー内のお問い合わせボタン（`.contact`要素）が通常画面とレスポンシブ画面の両方で適切に表示され、スクロールに追従するように設定されています。

 

moridai
moridai
ちょっと難しく感じるかもしれませんが、コピペするだけで簡単に実装できます！

 

【追従型メニューの作り方】スクロールして固定させたい！ーお問い合わせボタン編ー

画面上や下部に固定されたお問い合わせボタンは、ユーザーエクスペリエンスの向上に役立ちます。このセクションでは、基本的なHTMLとCSSを使用して、追従型メニューを作成する手法を詳しく解説します。

 

HTMLを用意する

<header id="header">
<a class="contact" href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">お問い合わせ</a>
</header>

まずは、HTMLを書いていきます。

 

「お問い合わせ」の場所は、画面上部なのでheaderが多いと思います。クリックすると、お問い合わせ画面にジャンプするのでaタグですね。

 

 

CSSで実現するお問い合わせボタンのスクロール追従設定の手順

#header .contact {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  display: inline-block;
  text-align: center;
  position: fixed; /* 画面に固定する */
  top: 0;
  right: 0;
}

 

position: fixed;を使って要素をスクロールに追従させることができます。これはHTML要素を画面上の特定の位置に固定するCSSプロパティです。

 

 

レスポンシブ対応：画面幅に応じてお問い合わせボタンの位置を調整する方法

#header .contact {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  display: inline-block;
  text-align: center;
  position: fixed; /* 画面に固定する */
  top: 0;
  right: 0;
}
/* hoverで色の変更 */
#header .contact:hover {
  background-color: #333;
}
@media screen and (max-width: 768px) {
  #header .contact {
    width: 100%;
    height: 60px;
    line-height: 80px;
    background-color: #000;
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
    position: fixed;
    bottom: 0; /* ディスプレイ最下部に固定 */
    left: 50%; /* 中央揃え */
    transform: translateX(-50%);
    z-index: 999; /* 必要に応じて他の要素の上に表示 */
    top: unset; /* topを無効にする */
    right: unset; /* rightを無効にする */
  }
}

画面幅がPCの時とタブレットやスマホ画面と時で別々の動きを作ります。

 

デスクトップ用（画面幅が768pxより大きい場合）

 

デスクトップ画面ではヘッダーの右上に固定された幅200px、高さ80pxの要素を表示し、ホバー時に背景色が変化します。

 

画面上部右端に固定され、スクロールしてもposition: fixed;で「お問い合わせ」が固定され続けます。

 

モバイル用（画面幅が768px以下の場合）

 

モバイル用のスタイル（メディアクエリ）: 画面幅が768px以下の場合のスタイルを指定します。

 

幅を100%にし、高さや位置を調整してディスプレイ最下部に固定されるように設定します。また、topやrightをunsetに設定して固定位置を無効にします。

 

画面の下部に固定されるので、小さいディスプレイには最適ですね。

 

まとめ

お問い合わせボタンを追従型にするには、HTMLでヘッダー内に`<a>`タグを配置し、CSSで`position: fixed;`を使用して画面上部または下部に固定します。

 

デスクトップ用とモバイル用のスタイルを別々に指定し、レスポンシブに対応させます。

 

これにより、スクロールに追従しながら、画面幅に応じた適切な表示が可能になります。