●よくある要望
- スマートフォンで縦持ち、横持ちどちらでも横幅ぴったりに合わせる
- タブレットの縦持ちは専用ビュー、横持ちはPCと同じスタイルに
MediaQueriesについて説明すると、これらが期待されます。
●デザイナーとの兼ね合いで難しい点
一見するとかんたんですが、デザイナーがCSSを理解していない場合や、MediaQueriesに対応していないIE678にもある程度対応させる必要がある場合、特に１が意外と大変な作業になってくると思います。
また、スマートフォン専用サイトであれば、横幅を100%などリキッドなデザインで組む事で、いわゆる「横幅ぴったり」が実現できると思いますが、PCにも対応となると、ある程度横幅を制限しないと1行あたりの文字数が大幅に間延びしてしまい、結果として非常に読みづらい段落スタイルが出来上がってしまいます。
●汎用的なMediaQueriesを使ったソースコード
これらの問題を解決するために使える汎用的なMediaQueriesのデバイス用の区切りを備忘録として残しておきます。HTML→
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>~~~</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0">
</head>
</head>
<body>
<div class="container">
<h1>~~~</h1>
<p>~~~</p>
</div>
<div class="container">
<h1>~~~</h1>
<p>~~~</p>
</div>
<div class="container">
<h1>~~~</h1>
<p>~~~</p>
</div>
</body>
</html>
</html>
CSS→
/* モバイル縦持ち（Portrait）に - 最大767pxのビューエリアの端末へ */
@media (max-width: 767px) {
.container { width: 300px; }
/*ここにモバイル用に使う汎用的なスタイルを書きます。*/
/*なぜこんな指定をするかというと、横用は別に記載するからです。*/
/*最大横幅は320pxです。*/
/* モバイル横持ち（Landscape）に - 最小480pxから最大767pxまでのビューエリアの端末へ */
@media (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
/*ここに横持ち専用の限定的なスタイルを書きます。*/
/*最大横幅は480pxです。それ以上は左右にbodyの余白が出ます。*/
}
}
/* タブレット縦持ち（Portrait）に - 最小768pxから最大959pxまでのビューエリアの端末へ */
@media (min-width: 768px) and (max-width: 959px) {
.container{ width: 768px; }
/*ここにタブレット縦持ちの限定的なスタイルを書きます。*/
/*指定する最大横幅は768pxです。それ以上は左右にbodyの余白が出ます。*/
}
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-device-pixel-ratio: 1.5) {
/*ここにCSS内で画像を指定しているエレメント用に、
実際の2倍サイズの画像を定義し、
background-size:横px 縦px;を指定します。*/
}
これらはiPhone3～iPhone4Sまでを考慮した指定ですが、Androidでも余白が出る程度で、大きな問題にはならずにきれいに収まるはずです。
●MediaQueriesのおさらい
Max Width：
ビューエリアの最大幅。このサイズより小さい場合に適用。基本pxで指定。
@media (max-width: 320px) {~~}などと書きます。
@media (max-width: 320px) {~~}などと書きます。
andでつなぐと「～から～まで」という事になります。Min Width：
ビューエリアの最小幅。このサイズより大きい場合に適用。基本pxで指定。
Max Device Width：
デバイスサイズの最大幅。このサイズより小さい場合に適用。基本pxで指定。
Min Device Width：
デバイスサイズの最小幅。このサイズより大きい場合に適用。基本pxで指定。
Device Pixel Ratio：
デバイスの解像度（webkit） - -webkit-device-pixel-ratio:1.5などと書きます
指定された値より大きいRatioの時に適用されます。 カンマで区切って複数指定もできます。
指定された値より大きいRatioの時に適用されます。 カンマで区切って複数指定もできます。
Orientation：
デバイスの向き - "landscape" or "portrait"の2値
Resolution：
解像度をDPIで定義します。 - min-resolution: 240dpiなどと書きます。
この場合は240dpi以上のデバイス、という意味になります。
Resolution：
解像度をDPIで定義します。 - min-resolution: 240dpiなどと書きます。
この場合は240dpi以上のデバイス、という意味になります。
Orientationを使えば？と考えるかもしれませんが、意外と実機で検証するというのは大変なものですし、JavaScriptなどで組まなくても端末をロテートさせればビューエリアも変わりますから、特段Orientationを使う理由もないと言えます。
●その他気をつけたい事
その他デザインやコーディングに気をつけたい点としては以下の事があるでしょう。- デザイナーにはあらかじめベクターデータでデザインしてもらうか、横持ち時の2倍の横幅でデザインしてもらう事（上記例だと横幅960pxでモバイル用のデザインをする）
- ここで、Illustratorでデザインをしておけば、Web用に書き出しの時に画像サイズタブで、200%で書き出す事で、きれいに2倍サイズでラスタライズされた素材を切り出す事ができます。
- 注意したいのは2分の1サイズの画像も必要だという事です。つまり、960pxでモバイル用のデザインをする際は、どのオブジェクトも縦横偶数でなければなりません。
- 細部をデザインするときも、常にプログレッシブ エンハンスメントでデザインすることを意識し、極力CSS3で再現できる範囲の表現にとどめる。
- 最近はツールも充実しているので、グラデーションやドロップシャドウなどは余裕です。
- 三角形は再現できると言えばできますが、クロスブラウザ対応が難しいので避けるべきです。やるなら画像にしましょう。
- box-sizing:border-boxlを使わない
- IE67対策のため、box-sizingはやめましょう。凄く便利なので、モバイル向けサイトの構築には積極的に使っていきましょう。
