[CSS]HTML5対応、さまざまなデバイスのMedia Queriesを使ったリセット用スタイルシート -320 and up

Post on:2011年4月14日

sponsorsr

CSS3のMedia Queriesを使ってさまざまなサイズのビューポートを想定した、リセット用のスタイルシートを紹介します。

[ad#ad-2]

Media Queriesとはビューポートのサイズやカラーなどユーザーの環境ごとに異なる最適なスタイルシートを条件式のように適用できるもので、下記のようにブラウザのサイズを変更すると、レイアウトがそれに合わせて最適なものを提供できるようにすることができます。

サイトを1024x768で表示したデザイン

サイトを640x480で表示したデザイン

Media Queriesの詳しい説明は、以前の当サイトの記事も参考にしてください。

CSS3のMedia Queries（メディアクエリ）の使い方と実装例

[ad#ad-2]

320 and upのスタイルシートの構成

スタイルシートの構成は、最小限なものとなっています。

リセット用のスタイルシート
カラー用のスタイルシート
タイポグラフィ用のスタイルシート

Media Queriesで予め用意されているのは、下記のサイズです。

480px
768px
992px
1382px

320 and upでは、2つのバージョンが用意されています。

ビューポートのサイズのそれぞれのスタイルシートが分かれたタイプ
一つのスタイルシートにまとめられたタイプ

分かれたタイプ：HTML

サイズごとにスタイルシートを分けて管理します。

<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css?v=1">
<link rel="stylesheet" media="only screen and (min-width: 1382px)" href="css/1382.css?v=1">

まとめられたタイプ：CSS

一つのファイルにまとめて管理します。それぞれストラクチャが用意されています。

/*480px __________________________________________________________________________________________________________ */
@media only screen and (min-width: 480px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/