◀ 14.

Bootstrapで左右サイドバー広告を固定表示するレイアウト（position:fixed + 12カラムグリッド実装）

編集
この記事の要点
  • Bootstrap の 12 カラムグリッドで「左広告 2 / メイン 8 / 右広告 2」を組み、左右広告に position:fixed を適用するのが定番パターン
  • モバイル時は広告を非表示にするため d-none d-md-block を付ける
  • 広告を画面の縦中央に置く: top:50%; transform:translateY(-50%);
  • コンテンツとの重なりを避けたい場合は main 側に左右 padding を持たせる
  • 長尺ページではスクロール追従にしつつ、フッターとの衝突を JS で抑制する設計もある

サイドバー固定広告の HTML 構造

Bootstrap 5 のグリッドを使い、3 カラム構成（左広告・メイン・右広告）で組みます。

<div class="container-fluid">
  <div class="row">
    <!-- 左サイドの広告 -->
    <div class="col-lg-2 col-md-3 d-none d-md-block">
      <div class="ad-left">
        <!-- ここに左側の広告コード -->
      </div>
    </div>

    <!-- メインコンテンツ -->
    <div class="col-lg-8 col-md-6">
      <div class="main-content">
        <!-- ここに Web サイトのメインコンテンツ -->
      </div>
    </div>

    <!-- 右サイドの広告 -->
    <div class="col-lg-2 col-md-3 d-none d-md-block">
      <div class="ad-right">
        <!-- ここに右側の広告コード -->
      </div>
    </div>
  </div>
</div>

CSS で広告を固定表示

.ad-left, .ad-right {
  position: fixed;            /* 広告を固定 */
  padding-top: 10px;
  padding-bottom: 10px;
  top: 50%;                   /* 画面の縦中央 */
  transform: translateY(-50%);/* 自分自身の半分上にずらす */
  width: 160px;               /* 標準的なバナー幅 */
}

.ad-left  { left: 0; }
.ad-right { right: 0; }

.main-content {
  padding: 20px;
}

クラス指定の意味

クラス意味
col-lg-2≥992px で 2 カラム幅（12 列中 2 列）
col-md-3≥768px で 3 カラム幅
d-noneすべてのサイズで非表示（初期）
d-md-block≥768px で display:block に戻す

結果として、スマホでは広告非表示・タブレット以上で表示になります。

レスポンシブ動作のおさらい

画面幅左広告メイン右広告
< 768px (sm)非表示全幅非表示
768〜991px (md)3/12 col6/12 col3/12 col
≥ 992px (lg)2/12 col 固定8/12 col2/12 col 固定

スクロール追従にしたい場合

ページが長くて広告を常に追従表示したいなら position:sticky も選択肢になります。

.ad-left, .ad-right {
  position: sticky;
  top: 80px;          /* ヘッダーの高さ分下げる */
  align-self: flex-start;
}

position:sticky は親要素の高さ内でのみ追従するため、Flex/Grid の子要素として配置するのがコツです。

注意点と Tips

  • 横スクロール禁止: 広告幅が col-lg-2 を超えるとレイアウト崩れの原因。広告枠は固定幅 (160 / 200px 程度) を推奨
  • z-index: メインコンテンツのモーダル等と重なる場合は z-index 調整
  • AdSense ポリシー: Google AdSense は position:fixed での固定表示を禁止しているため、AdSense 利用なら sticky か通常配置に
  • Cumulative Layout Shift (CLS): 広告の高さを min-height で確保し、表示時のレイアウト揺れを防ぐ
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. CSSで色を指定する方法（HEX / RGB / HSL / oklch）
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法
2026-06-11 07:29:05 ぼうず 203

人気ページ

最近更新/作成されたページ