携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。
和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。）
基本からスタートしよう。
既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもしれません。XHTMLやCSSをサポートできるものもであれば、HTML3.2に準拠しているものもあります。モノクロのスクリーンもあれば、カラーのものもあります。
何やらIEとネスケのブラウザ戦争の時のようですが、私たちはあの時と比べて、2つのことを知っています。1つ目はセマンティックなマークアップを用いて、標準に準拠した書き方を知っていること、そして2つ目はどうすればCSSを用いた視覚とコンテンツを分離できるかということ。ちゃんとあなたがこの2つのことを知っていれば、携帯のレンダリングに心配することなく、自信を持って開発ができるはずです。
サイトをテストしよう。（無料版）
サイトをテストするには、もちろんできる限り本当の携帯電話を買うべきなのですが、全ての携帯を買うわけにはいきません。信頼できるテストの方法は無料のものもあれば、有料のものもあります。そこで、まずは無料のものから。
Operaを開いて、「表示」 > 「スモールスクリーン表示」を選択すると、大体携帯と同じディスプレイのサイズになります。また、Operaのweb developer bar（たぶん、Web Developer Toolbar & Menuのこと）でCSSを適用させないようにすることもできます。
Operaのスモールスクリーン表示は画像を表示します。確認しておくべき点は、Operaはコンテンツをソースの順に並べます、つまり、HTMLにおいて要素が表れた順に表示していくわけです。見出しや段落、リンク、引用などをそのまま表示するので、構造的でセマンティックなHTMLの基盤をしっかりと支え、コンテンツを読みやすく、使いやすいものにしてくれるのです。
Operaでは、Opera miniというhandheld向けのブラウザを無料でダウンロードすることができます。また、そのシミュレーターもあります。Opera miniのページがロードされれば、本当の携帯を使うように、キーボードやマウスで操作することができます。
また、FirefoxのWeb Developerという拡張機能を用いる方法もあります。このツールを使って、CSS、JavaScript、画像を全てオフにします。すると、昔の携帯でもサイトが利用できるかどうかを確認するよいツールになります。また、昔の携帯ではtableを読み込めないこともありますし、フレームを読み込めないこともあります。この点からも標準に準拠し、セマンティックなマークアップをする重要性が分かることかと思います。
handheldメディアスタイルシートをテストしよう。
FirefoxのWeb Developerには、「CSS」 > 「Display CSS by Media Type」 > 「Handheld」という大事な機能が備わっています。著者のサイトのWeb TeacherにもhandheldのCSSが適用されており、通常の表示モードではシンプルな2カラムになっていますが、handheldを適用させると、1カラムに移り変わります。
このCSSファイルへのリンクは、全てのメディアタイプのあとにlinkさせています。ここで、link要素を使う理由は、携帯のCSSへの対応が@importよりもlink要素のほうが進んでいるからです。（いくつかの携帯は@importにも対応しています。）コードは以下です。
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld">
UAが文書を表示する際、1つのメディアタイプしかサポートしません。ただ、もしほかのメディアタイプで使っているCSSファイルをhandheldメディアにも適用したいと思う場合はどうすればいいでしょうか。その場合はもう1ステップ踏み、そのCSSファイルをallのメディアタイプで指定し、更にカンマを用いて、handheldも適用させます。
<link href="2col.css" rel="stylesheet" type="text/css" media="handheld,all"> <link href="mobile.css" rel="stylesheet" type="text/css" media="handheld">
これで、例えば、2col.cssを通常のPC用ディスプレイへのCSSとしておき、mobile.cssではカラムのみを取り外すという方法を取ることができます。
サイトをテストしよう。（有料版）
BrowserCamでは、Windowsの携帯ベースのPDAやいくつかのバージョンのBlackBerryをテストすることができます。
また、Adobeの最新バージョンであるCS3では、Adobe Device Centralがリリースされ、こちらでも数多くの携帯のチェックができることになりそうです。
handheldスタイルシートを書く際のTips
handheldスタイルシートを書くときには、ダウンロー時間を考慮して、とにかく小さく、コンパクトに書くことが大切です。では、携帯用CSSを書く際にシンプルに、より使いやすくするためにはどうすればいいでしょうか。まずは、いくつかの要素を取り外してしまいます。
- floatやframe。
- カラム（コンテンツが先に来るカラムがよりよい）。
- ポップアップなどのスクリプトベースのものをHTMLやシンプルなテキストに入れ替える。
- ダウンロード時間を短くするために、装飾目的の画像を取り外す。不必要なものを全てdisplay: none;を使って取り外す。しかし、覚えておいてほしいのは、携帯によってはCSSを解釈できないため、display: none;が効かないこと。必要な画像は小さなディスプレイでも見れるようにし、HTMLにwidthとheight属性を入れておこう。
- 入れ子になったtableやレイアウト目的のtable。
これで、小さくシンプルになりました。次はCSSに付け加えるべきもの。
- もし相対単位を使っていないのなら、pxを使うよりもパーセントやemを使おう。
- marginやpadding、borderを小さなスクリーンに合わせるために縮小しよう。
- 見出しや段落にはより小さなfont-sizeを指定しよう。
- もしページの始めに長いナビゲーションがあるのなら、スキップリンクを用意するか、ナビゲーションをコンテンツの後方に移動させよう。必要なコンテンツにたどり着くためのクリック数をできる限り減らそう。Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.（ちょっと意味が掴めない）
- 背景色と前景色のコントラストをよりよい状態にしよう。特に、携帯は色の選択肢が少ないことを考慮して。
これで、和訳は以上です。ここからは少し僕の意見。
そもそも、携帯でサイトをチェックするなんてことあるの？
使わない人は全く使わないと思いますが、僕はこんな時にPCサイトを携帯でチェックすることがあります。
- ネット環境がない電車や喫茶店で、はてぶのホットエントリーを斜め読み。
- わざわざPCを開くのは面倒だけど、メールをチェックしておきたいときに、Gmailのサイトへ。
- 自分のブログのコメントやはてブ数をチェック。
と、こんな感じです。最近だったら、twitter関連のmobile向けのもので遊んでいる人も多いかなと思います。というわけで、携帯用CSSはそろそろ書き始めてもいいんじゃないかなと思うのです。
ただ、日本の携帯はCSSを適用できるものがあまりにも少ない。このへんの状況については、しらぎくさいとさんの携帯電話向けコンテンツの書き方(ウェブの作り方)。やインターネット帳面さんの主にAU携帯電話（ezweb）からの閲覧の為のＣＳＳ が詳しいので、ぜひ参考に。
追記（2007年5月20日）はてぶのsonosonosonoさんのコメントを受けて。
実際に書くとなると、やっかいな要素がimgとtable。大きさによって切れる可能性がある。あと、携帯フルブラウザを意識するなら、positionプロパティは使わないのを推奨。
positionもそうでしょうね。使わないほうが吉な予感。imgやtableはある程度の最新機種なら自動的に縮小してくれたりはするみたいですが、見てほしい画像ではないのなら、CSSで切ってしまったほうがよさげな印象です。
なんにせよ、img要素の画像の種類によっては携帯が対応していないという状況もあるようなので、PC向けサイトを即座に携帯向けというのはなかなか難しいようですが、「できる限り読みやすくする」範囲には対応しておくべきかなと思うのです。
