Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。Templateデモページ[ad#ad-2]上記キャプチャは、デモを幅1200pxで表示したものです。以下、サイズ変更してみます。デモページ:幅1024pxで表示デモページ:幅768pxで表示デモページ:幅480pxで表示[ad#ad-2]HTMLの構造テンプレートはブログを想定して作成されています。ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></body></html>CSSのスタイリングスタイルシートは3ファイルで構成されています。reset.cssブラウザのスタイルを初期化するスタイルシートです。Queries用のスタイルシートです。各サイズでの指定とimg要素を定義します。style.cssメインとなるスタイルシートです。サイドバーのレイアウト変更などにアニメーションが使用されています。