Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。Queries[ad#ad-2]下記は各ポイントを意訳したものです。Queries完成したデモの確認デモページの確認チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。デモページ左から、ノーマル、ナロウ、スマフォ時のレイアウトページは、1024pxより広いサイズの場合には980pxで最適化されるように設定しています。980pxより狭い場合は幅は流動的になり、さらに650pxより狭い場合は1カラムのレイアウトになります。id="footer">footer</footer></div>HTML5.jsデモページはHTML5で実装されています。IEの古いバージョンではサポートしていないため、「html5.js」を使用して、認識するようにします。src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><!&#91;endif&#93;-->CSSHTML5への対応HTML5の各要素をブロック要素として、リセットします。block;}CSS:メインの構造メインとなる「pagewrap」の幅は、980pxです。headerの高さは160pxに固定し、contentはフロートさせ幅を600pxに固定し、sidebarもフロートさせ幅を280pxに固定します。both;}ここまでのデモページは、下記のようになります。これはまだビューポートのサイズを変更しても、レイアウトは変更されません。Queriesを実装します。Queriesをサポートしていないブラウザ(IE8以前)のために、JavaScirptファイル「css3-mediaqueries.js」を加え、利用できるようにします。Queries用に新しいスタイルシートファイルを作成し、外部ファイルとして指定します。Queries用のスタイルシートを記述します。type="text/css">980pxより小さいビューポートの場合ビューポートが980pxより狭い場合、下記のようにします。10px;}}650pxより小さいビューポートの場合ビューポートが650pxより狭い場合、下記のようにします。0;}}480pxより小さいビューポートの場合iPhoneなどビューポートが480pxより狭い場合、下記のようにします。画像をフレキシブルにするために、「max-width:100%;」と「height:auto;」を加えます。これはIE7でも機能しますが、IE8ではバグがあるため機能しません。auto\9;」を使用します。動画を埋め込む際には、画像と同様のトリックを使います。原因は不明ですが「max-width:100%;」がSafariでは機能しません。そのため、ここでは「width:100%;」を使用します。auto;}スケールメタタグデフォルトで、iPhoneはHTMLページをiPhoneのスクリーンにフィットさせて表示します。これは次のメタタグを使うことで、デバイスの幅をビューポートの幅として使用し、スケールを中止する宣言です。完成したデモページを改めて確認してみてください。Androidなどのスマートフォン、iPadなどでもチェックしてみてください。Posts関連記事が見つかりませんでした。