この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:ぼうず
更新日時:2023-04-03 03:23:13

タイトル: Bootstrapで両サイドを固定して広告を表示させる方法
SEOタイトル: 【CSS】 Bootstrapで両サイドを固定して広告を表示させる方法

  <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>

 

<style>
  .ad-left, .ad-right {
    position: fixed; /* 広告を固定する */
    padding-top: 10px;
    padding-bottom: 10px;
    top: 50%; /* 画面の縦方向の真ん中に広告を配置 */
    transform: translateY(-50%); /* 広告自体の縦方向の真ん中を基準にする */
  }

  .ad-left {
    left: 0; /* 画面の左側に広告を配置 */
  }

  .ad-right {
    right: 0; /* 画面の右側に広告を配置 */
  }

  .main-content {
    padding: 20px;
  }
</style>