on:2012年3月28日sponsors当サイトのようにサイドバーに広告を掲載している人には朗報のテクニックを紹介します。下記のようなサイドバーをもったレイアウトをスマートフォンなどの小さいサイズで表示する際、サイドバーのレイアウトをどのようにしますか?通常(デスクトップ)時のレイアウトサイドバーを全部、下に移動しますか?[ad#ad-2]サイドバーを全部下にしてしまうと残念な感じになるので、サイドバーの各広告をコンテンツの間に配置するテクニックを紹介します。Safari5.2でご覧ください。IE10もおそらく対応しています。デモページ:幅1200pxで表示スマートフォンやタブレットなど表示サイズが小さい時には、コンテンツの間にサイドバーの広告が配置されます。実装HTMLHTML5を使っての実装です。ポイントとなるのは、メインコンテンツの各記事のarticle要素の間に、サイドバーの広告の移動先であるdiv要素を配置しておきます。サイドバーはaside要素内は空にしておいて、広告は別に配置します。src="ads/4.png"></a></div>CSSまずは対象となる要素を定義します。「ads」は任意の名前です。ads;}※2012年3月現在、対応ブラウザはWebkit系とIE10なのでベンダープレフィックスも2つだけです。次に、サイドバー(aside)と記事間のdiv要素(ad-region)にこのコンテンツを配置してみましょう。Queriesを使って設定します。