Fantastic website design in Flintshire, North Wales from Stuff and Nonsense

iPhoneやAndroid携帯といったスマートフォンからiPadのようなポータブルデバイス、従来のPCやノートPCにいたるまで、ネットワークにアクセスするデバイスの種類は多様化している。こうしたディスプレイサイズも解像度密度も異なるデバイスに対してそれぞれに適したデザインを提供するというのが、最近のWebデザイナの間で取り上げられることが多いトピックになっている。

こうしたトピックで取り上げられることが多いテクニックがCSS3のMedia Queryを使う方法だ。デバイスの解像度や密度の情報を取得して、それに応じて適用するCSSを切り替えるというもの。これまで多くのブログでこのテクニックが取り上げられ、サンプルコードとともに紹介されている。

そうしたCSS3 Media Queryを使ったテクニックのテンプレートと呼べるものがWebデザイナAndy Clarke氏によってHardboiled CSS3 Media Queries - Stuff and Nonsenseで公開された。スマートフォン、PC/ノートPC、iPad、iPhone、大きなディスプレイ、縦方向と横方向の区別、またはその両方に対応したスタイルを区別して適用するためのテンプレートファイルになっている。公開されているテンプレートファイルは次のようになっている。

/* スマートフォン (縦向き、横向き両対応) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
/* スマートフォン (横向き) ----------- */
@media only screen and (min-width : 321px) {
}
/* スマートフォン (縦向き) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (縦向き、横向き両対応) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/* iPads (横向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPads (縦向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/* デスクトップとノートPC ----------- */
@media only screen and (min-width : 1224px) {
}
/* 大きなディスプレイ ----------- */
@media only screen and (min-width : 1824px) {
}
/* iPhone 4および解像度密度の高いデバイス ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}

テンプレート名はHardboiled CSS3 Media Queries。Andy Clarke氏が制作したもので、ライセンスはCreative Commons CC Zero Declarationで、かつ、著作権を主張しないと明記されている。自由に使っていいコードにしてあるようだ。ひとつのスタイルシートにすべてのデバイス向けのスタイルを書き込むのを好まないユーザ向けに、それぞれ個別のスタイルシートに分けるためのHTMLヘッダファイルのコードも掲載されている。それぞれのスタイルシートを指定されているCSSファイルに分けて記述すればいい。

<head>
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"> <link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">
</head>

iPhoneやAndroidを使ったスマートフォンからiPad、PC、ノートPC、大きな画面のPCにいたるまで、多種多少なデバイスに対応したWebページを制作するときのメディアクエリテンプレートファイルとしてAndy Clarke氏の公開したHardboiled CSS3 Media Queriesは参考になる。