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

2023年7月6日

画面をスクロールしても表示が固定される、フッターボタンやサイドバナーを作るには？

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

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

なお、基本的なやり方は同じですが、固定表示のヘッダーを作る方法については別記事でも紹介しています。合わせてご覧ください。

固定表示エリアは、CSSプロパティの「position: fixed;」を使う

position: fixed;を使うことで、特定の要素をブラウザのビューポートに対して固定位置に配置できます。スクロールしても位置はそのままで、ナビゲーションバーやスクロールバックボタンのような、常に特定の位置にあるべき要素を作るのに便利です。

また、このプロパティを設定した要素は通常の配置から外れてしまい、あたかもその要素がなかったかのように次の要素が配置されていきます。

基本的な使用例は以下のとおり。
top、right、bottom、leftのプロパティを組み合わせることで、表示位置を指定します。

div {
  position: fixed;
  top: 0;
  right: 0;
}

top: 0;は要素の上辺をビューポートの上辺に
right: 0;は要素の右辺をビューポートの右辺に

配置するため、この例ではdiv要素がビューポートの右上角に固定されます。

右上から100px内側の位置に表示させたい場合は、以下のように指定します。

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

追従するフッターボタンの実装例

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」を設定することで自由に表示位置を変えられます。慣れるまでは少し癖があると思いますが、ぜひ使ってみてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。