タイトル: Bootstrapで両サイドを固定して広告を表示させる方法
SEOタイトル: Bootstrapで左右サイドバー広告を固定表示するレイアウト（position:fixed + 12カラムグリッド実装）
| この記事の要点 |
|
サイドバー固定広告の 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 col | 6/12 col | 3/12 col |
| ≥ 992px (lg) | 2/12 col 固定 | 8/12 col | 2/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で確保し、表示時のレイアウト揺れを防ぐ