ウェブページのスタイルを iPad に最適化する方法

増えたデバイス

かつては、Mac (や PC) だけがウェブブラウザだった。今では iPhone に加えて、iPad が「普段使いのブラウザ」として加わった。Mac 向けに作ったページをそのまま開くこともできるけど、やはりデバイスに最適化されたデザインのページは見やすい。このブログも iPhone や iPad ですっきりと表示させたい。多少の手間はかかるけど、やるだけの価値はある。

iPad はウェブブラウザのリファレンスプラットフォームだ

以前にも、このブログを iPhone 対応させたことがあった(テンプレートを変えたために今ではその効果は失われている)。あのときは、単にサイドバーを非表示にしただけだった。今回は、レイアウト全体を見直してみよう。

iPad で見ることを前提に、幅を 768 ピクセル、および 1024 ピクセルで、レイアウト(メインとサブの 2 列構成)をデザインする。1024px仕様を手直しすることで、Mac 用のデザインを仕上げる。iPhone 用のものは、768px仕様からサイドバーを非表示にすることで作る。こうすることで、iPhone、iPad、そして Mac の 3 つのデバイスで、ほぼ同じ見た目にすることができる。

ともあれ、3 種類のデバイスに対応するのだから、デバイスごとにスタイルを指定しなければならない。まずはその方法を(前の iPhone 対応のときより少し詳しく)調べてみた。

デバイスごとにスタイルを指定する

CSS2 には、画面や印刷といった「表示の媒体」(メディア)に合わせてスタイルを指定する機能がある。 CSS3 では、これが拡張され、媒体(メディア)ごとの特性(幅、高さなど)に応じてスタイルを指定できるようになっている。 これがメディアクエリーと呼ばれる機能だ。 Mac 用の Safari はもちろん、iPhone/iPad 用のものもメディアクエリーをサポートしている。 このため、CSS スタイルを適切に記述してやれば、ひとつのウェブページを、開くデバイスに合わせて見た目が切り替わるようにすることができる。

デバイスを識別する

メディアクエリーを使いスタイルを切り替える場合、識別の鍵になるのは画面の幅だ。iPhone なら画面の最大幅が 480 ピクセル(横向きにしたとき)、iPad なら 1024 ピクセル(同じく横向き)になる。

通常、画面幅を鍵にして 2 つのデバイスごとにスタイルを指定する場合、以下のようになる。

(画面幅で切り替え; 2 デバイス)
@media only screen and (max-device-width: 480px) { ... }
@media only screen and (min-device-width: 481px) { ... }

前が画面幅が小さいデバイス(例: iPhone)向けのスタイル、後がそれ以外のデバイス向けになる。

デバイスが 3 つならどうなるか？

(画面幅で切り替え; 3 デバイス)
@media only screen and (max-device-width: 480px) { ... }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { ... }
@media only screen and (min-device-width: 1025px) { ... }

only というキーワードは、(メディアクエリーを知らない)古いブラウザに、この記述全体を無視させるための仕掛け。メディアクエリーをサポートしているブラウザは単に only を無視するので付けたところで影響はないが、(古いブラウザを使う人がまだいるかもしれないので)付けておく方が安全だ。

参考までに、iPhone 3G/3GS、iPad の画面幅についてまとめておく。

機種	横	縦
iPhone 3G/3GS	320	480
iPad	768	1024
iPhone 4	640	960

iPhone 4 のピクセル数は 3G/3GS の 4 倍(縦横が2倍)だが、(iPhone 4 の Safari は)画面幅のメディアクエリーに関して旧機種と同様に振る舞うらしい。このため、iPhone 4 を 3G/3GS と区別するためには、画面幅ではなく -webkit-device-pixel-ratio という特性を使うようだ(→ 詳細は「iPhone 4 の CSS を切り替える方法」を参照)。いかんせん、iPhone 4 をまだ手に入れていないから試しようがない。

デバイスの向きを検出する

ウェブページのほとんどは縦方向へのスクロールを前提にして作られているため、縦のサイズよりも横のサイズがレイアウトにとっては重要だ。iPhone や iPad のように向きを変えることで横(画面の幅)が変わるデバイスでは、向きに合わせてスタイルを指定したくなる。そのための特性が orientation だ。

以下は、iPad の縦向きに特有のスタイルを指定する際の記述。

(iPad 縦向き時のスタイル指定)
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
[...snip...]
}

横向きも同様に指定すれば良い。

(iPad 横向き時のスタイル指定)
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
[...snip...]
}

CSS ファイルの骨格

以上を踏まえ、1 つの CSS ファイルにまとめると、以下のようになる。

(Apple 社製各種デバイスに対応)
body { ... } /* common style (and old browsers) */
[...snip...]
/* iPhone 3G, 3GS, and 4 */
@media only screen and (max-device-width: 480px) {
[...snip...]
}
/* iPhone 3G,3GS, 4 in portrait only */
@media only screen and (max-device-width: 480px) and (orientation:portrait) {
[...snip...]
}
/* iPhone 3G,3GS, maybe 4 in landscape only */
@media only screen and (max-device-width: 480px) and (orientation:landscape) {
[...snip...]
}
/* iPad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
[...snip...]
}
/* iPad in portrait only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
[...snip...]
}
/* iPad in landscape only*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
[...snip...]
}
/* Mac */
@media only screen and (min-device-width: 1025px) {
[...snip...]
}

1 つにまとめるのは、Blogger のテンプレートに埋め込むことを前提にしているから。

デバイスの特性に合わせたスタイル

枠組みはできた。では、それぞれのデバイスと状況に合わせて、どんなスタイルを指定すれば良いだろう？ 今回、考慮したのは主に以下の点だ。

• 文字サイズ
• カラムやブロック要素の幅(マージン、パディングをふくむ)
• 画像の表示サイズ
• フォントの種類
• 背景画像の有無
• CSS3 サポートレベルの差

前半の 3 つは画面サイズによる制約、後半の 3 つは実行環境やソフトウェアの差を考慮したものだ。

フォントについては、iPhone/iPad と Mac ではインストールされているフォントに差がある。個人的に悲しいのは、iPhone、iPad にはヒラギノの丸ゴがないことだ。しかたなく、角ゴを指定している。

外部フォントの利用や背景画像を付けると、ページを開く際のダウンロードサイズが大きくなる。表示が遅くなる要因だ。iPhone のように本体のメモリが少なかったり(3G/3GS)、回線が細い状況で使われたりするデバイスでは気にすべきかもしれない。

最後の CSS3 サポートレベルは、角丸の枠線を引く際に気付いたこと。iPad の Safari は iPhone (iOS4) のそれとくらべて、少しバージョンが古いようだ。

このように、CSS3 のメディアクエリーを使うことで、各種デバイスに適したスタイルでウェブページを作れるようになる。もっとも、何でもかんでもメディアクエリーで切り替えれば良い、というものでもない。

外部 CSS ファイルにリンクできる環境なら、JavaScript を使って、エージェント文字列による判定で切り替えるのも良い。というより、その方がデバイスを識別しスタイルを切り替えるという考えに沿っている。特性の組み合わせをデバイスの識別に使うのは、やはり違うだろうと思ってしまう。

CSS ファイルを置く場所が確保できない状況ではしかたないんだけど。

追記@2010-10-31

その後、外部 CSS ファイルについては、その置き場所として Google App Engine (以下、GAE)を使うことで解決した。これについては以下の記事を参照のこと。

• 外部ファイルの置き場所を求めて…
• 外部ファイルの置き場所としての Google App Engine

さらにその後、単なるファイルの置き場所として GAE アプリを使うだけではなく、ユーザエージェントによるスタイルシートの切り替えをふくめたスタイルの提供までを GAE アプリとして実現している。

• GAE アプリによるスタイルシートの切り替え

関連リンク

• Media Queries (W3C)
• メディアクエリー (上記の日本語訳)
• iPad Orientation CSS (Revised) (desideratum; iPad の 向きに応じたスタイルの指定方法)

関連記事

• Google Font API を使ったフォントの表示
• iPhone 対応してみる
• ひとまず完成