【CSS】画面に追従するボタンやバナーを作る方法

CSSで固定表示エリア(追従エリア)を作る方法

画面をスクロールしても表示が固定される、フッターボタンやサイドバナーを作るには?
このページの下「実装例:問い合わせ」と右「仮バナー」のような領域です。)

「position: fixed;」を使うことで、画面下や右端に固定表示される領域を作る方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

まさに、本ページのフッターと右サイドに表示されているエリアです。

  • 下側:問い合わせのボタンが、画面をスクロールしても常に表示されています。
  • 右側:仮バナーが、画面をスクロールしても付いてきます。

特定の要素を固定配置させるには、CSSプロパティ「position: fixed;」を使います!

ウィンドウ画面の左上を起点とし、「top」で上→下に/「bottom」で下→上に/「right」で右→左に/「left」で左→右に、どの位置に配置するか自由に指定できます。

div {
 position: fixed;
 top: 100px;
 left: 100px;
}

であれば、画面上端から下に100px、左端から右100pxの位置に、div要素が固定配置されます。

なお、このプロパティを設定すると通常の配置から外れてしまうため、あたかもその要素がなかったかのように次の要素が配置されていきます。レイアウトを組む際には注意しましょう。

追従するフッターボタンを作る

HTML/CSS コードはこちら
<div class="bottom-fixed-button">
  <button>お問い合わせ</button>
</div>
.bottom-fixed-button {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  padding-top: 8px;
  text-align: center;
  background: skyblue;
  border-top: 4px solid #fff;
}

.bottom-fixed-button button {
  font-size: 24px;
  cursor: pointer;
  vertical-align: middle;
}

.bottom-fixed-button button:hover {
  opacity: 0.8;
}

追従するサイドバナーを作る

HTML/CSS コードはこちら
<div class="right-fixed-banner">
  <div class="banner-box" id="banner-1">仮</div>
  <div class="banner-box" id="banner-2">バ</div>
  <div class="banner-box" id="banner-3">ナ</div>
  <div class="banner-box" id="banner-4">ー</div>
</div>
.right-fixed-banner {
  position: fixed;
  bottom: 20%;
  right: 0;
  width: 10%;
  margin-right: 10%;
  text-align: center;
  line-height: 100px;
  font-size: 36px;
}

.banner-box {
  height: 100px;
  border: 1px solid #000;
}

#banner-1 {
  background: skyblue;
}

#banner-2 {
  background: tomato;
}

#banner-3 {
  background: lime;
}

#banner-4 {
  background: yellow;
}

まとめ

以上、フッターやサイドバーにボタンやバナーを固定表示する方法を紹介しました。

「position: fixed;」を設定した後に、「top」「bottom」「right」「left」を設定することで自由に表示位置を変えられます。慣れるまでは少し癖があると思いますが、ぜひ使ってみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次