固定配置バナー デザイン見本
CSS の position: fixed を使って、フッターボタンや右端バナーをスクロールに追従させる実装デモ。コピーしてすぐに使えるHTML・CSSのコードを掲載しています。
① position: fixed — top / right / bottom / left で位置を指定する
現在: top: 0; right: 0;
<div class="fixed-element">Fixed!</div>.fixed-element {
position: fixed;
top: 0;
right: 0;
z-index: 100;
}position: fixed を指定すると、要素はスクロールに関係なく画面（ビューポート）上の指定位置に固定されます。top・right・bottom・left のうち2つを組み合わせることで四隅や中央などへ配置します。z-index を大きく設定して他のコンテンツより前面に表示させることが重要です。fixed を指定した要素はドキュメントフローから外れるため、その分のスペースは後続コンテンツに引き継がれません。なお上のデモは記事内確認用のため position: absolute で代用しています。実際の実装では position: fixed を使用してください。
② フッターボタン — 画面下部に固定するCTAボタン
コンテンツエリア
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
コンテンツここまで
<div class="footer-fixed">
<button>お問い合わせ</button>
</div>.footer-fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
padding-top: 8px;
text-align: center;
background: #2563eb;
border-top: 3px solid rgba(255, 255, 255, 0.2);
z-index: 100;
box-sizing: border-box;
}
.footer-fixed button {
font-size: 1rem;
font-weight: 700;
color: #fff;
background: none;
border: none;
cursor: pointer;
}
.footer-fixed button:hover {
opacity: 0.85;
}bottom: 0 と left: 0 を組み合わせ、width: 100% を指定することで画面下端いっぱいにボタンを固定できます。常に画面に表示されるため、ユーザーへの行動喚起（CTA）として効果的です。固定バーの高さ分だけ本文エリアに padding-bottom を設けると、コンテンツがバーに隠れるのを防げます。なお上のデモは記事内確認用のため position: sticky で代用しています。実際の実装では position: fixed を使用してください。
③ サイドバナー — 画面右端に固定する縦型バナー
コンテンツエリア
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
スクロールできます
↓↓↓
コンテンツここまで
<div class="side-banner">
<div class="banner-item bx1">仮</div>
<div class="banner-item bx2">バ</div>
<div class="banner-item bx3">ナ</div>
<div class="banner-item bx4">ー</div>
</div>.side-banner {
position: fixed;
bottom: 20%;
right: 0;
width: 50px;
text-align: center;
z-index: 100;
}
.banner-item {
height: 60px;
line-height: 60px;
font-size: 1rem;
font-weight: 700;
color: #fff;
}
.bx1 { background: #3b82f6; }
.bx2 { background: #8b5cf6; }
.bx3 { background: #ec4899; }
.bx4 { background: #f59e0b; }right: 0 で画面の右端にぴったり配置し、bottom: 20% などで縦方向の位置を調整します。バナーはコンテンツに重なるため、スクロール時もユーザーの視野に入り続けます。スマートフォンでは画面幅が狭くバナーが邪魔になる場合があるため、@media (max-width: 768px) { display: none; } で非表示にすることも検討してください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
