[CSS]スマートフォンで表示した際、サイドバーの広告を効果的な配置にするテクニック

当サイトのようにサイドバーに広告を掲載している人には朗報のテクニックを紹介します。

下記のようなサイドバーをもったレイアウトをスマートフォンなどの小さいサイズで表示する際、サイドバーのレイアウトをどのようにしますか？

通常（デスクトップ）時のレイアウト

サイドバーを全部、下に移動しますか？

[ad#ad-2]

サイドバーを全部下にしてしまうと残念な感じになるので、サイドバーの各広告をコンテンツの間に配置するテクニックを紹介します。

• Content Folding

スマートフォンなどのレイアウト

[ad#ad-2]

• デモ
• 実装

デモ

このCSSのテクニックはCSS3 Regionsを使用しているため、Chrome16+, Safari5.2でご覧ください。
IE10もおそらく対応しています。

デモページ：幅1200pxで表示

スマートフォンやタブレットなど表示サイズが小さい時には、コンテンツの間にサイドバーの広告が配置されます。

デモページ：幅800pxで表示

実装

HTML

HTML5を使っての実装です。
ポイントとなるのは、メインコンテンツの各記事のarticle要素の間に、サイドバーの広告の移動先であるdiv要素を配置しておきます。また、サイドバーはaside要素内は空にしておいて、広告は別に配置します。

<section class="main-content">

  <article> ... </article>

  <div class="ad-region-1">
    <!-- empty, ads flow into here as needed -->
  </div>

  <article> ... </article>

  <div class="ad-region-2">
    <!-- empty, ads flow into here as needed -->
  </div>

  <article> ... </article>

  <div class="ad-region-3">
    <!-- empty, ads flow into here as needed -->
  </div>

</section>

<aside>
   <!-- Fallback content in this flow region, probably clone #ad-source -->
</aside>

<!-- Source of flowing content, essentially hidden as an element -->
<div id="ad-source">
  <a href="#"><img src="ads/1.jpg"></a>
  <a href="#"><img src="ads/2.jpg"></a>
  <a href="#"><img src="ads/3.jpg"></a>
  <a href="#"><img src="ads/4.png"></a>
</div>

CSS

まずは対象となる要素を定義します。「ads」は任意の名前です。

#ad-source {
  -webkit-flow-into: ads;
  -ms-flow-into: ads;
}

※2012年3月現在、対応ブラウザはWebkit系とIE10なのでベンダープレフィックスも2つだけです。

次に、サイドバー（aside）と記事間のdiv要素（ad-region）にこのコンテンツを配置してみましょう。

aside, [class^='ad-region'] {
  -webkit-flow-from: ads;
  -ms-flow-from: ads;
}

最後に、Media Queriesを使って設定します。

[class^='ad-region'] {
  display: none;
  height: 155px;
  width: 100%; /* Weird that this is required */
}

@media (max-width: 800px) {
  [class^='ad-region'] {
    display: block;
  }
  [class^='ad-region']:last-child {
    height: 300px; /* I wish height auto worked */
  }
  aside {
    display: none;
  }
}