携帯電話で使う事の出来るカスケーディングスタイルシート(CSS)を実際に書くに当たって注意すべき点を解説します。
多くは端末の実装などに依存したものなのですが、やはり配慮しておいた方が良いでしょう。
携帯電話向けのCSSで考えておかなければならない事 (平成19年 7月 2日 更新)
携帯電話には、PCに較べていくつか不利な点があります。
現在、日本国内では多くの端末がトゥルーカラーのQVGA液晶で高速通信が出来、またパケット定額使い放題が利用出来るものですが、そうでない端末の存在は否定出来ません。
このため、以下の点に注意すると良いでしょう。
font-sizeプロパティの値を大きくし過ぎると、一行に入る文字数が少なくなり、読み難くなります。
逆に小さくし過ぎても読めなくなる恐れがあります。
現在、日本の携帯電話はQVGA液晶が標準のようですが、それより解像度の低い端末や逆に高いVGA端末もあり、自分が持っている端末だけで判断するのは危険です。
1em=100%に統一するくらいでいいでしょう。
PCの場合は大半がウィンドウズとマック OSなので、font-familyプロパティの値に'ＭＳ Ｐゴシック'とか'Osaka'などの機種依存のフォント名が使えますが、携帯端末の場合にはそのようなフォント名を特定するのは不可能です。
フォントの系統(sans-serifなど)でさえ、希望する系統が使えない事もあると思っておいた方が良いでしょう。
一部のブラウザにバグがあるのも理由の一つですが、やはり画面が狭いので、下手に余白を取るとやはり一行に入れられる文字が少なくなり過ぎてしまいます。
オープンウェーヴ社のモバイルブラウザにはfloatプロパティが実装されておりません。
このため、画像などを片側に寄せるようなレイアウトをしようとした場合、オープンウェーヴ社のブラウザ(EZウェブのWAP 2.0端末全機種とソフトバンクの一部第三世代機)ではこれらのプロパティが効かないと言う事になります。
対策としては、floatプロパティが実装されていない場合にはフローティングを諦めてセンタリングさせるなどすると良いでしょう。
具体的には、画像を納めているブロックレヴェル要素に適切なクラス名を与え、そのブロックレヴェル要素にtext-alignプロパティを当てて内容となるインライン要素をセンタリングするようにして、画像には別途floatプロパティを当てておきます。
実際の記述は以下のようになるでしょう。この場合、画像の上位となるブロックレヴェル要素は<div class="images">要素となります。
div.images {text-align: center;…}img {float: left;}
このスタイルを当てた場合、floatプロパティを認識する環境なら画像は正しく左フロートされ、そうで無い環境でも画像がセンタリングされる事でそれなりの見栄えになるでしょう。
実はオープンウェーヴ社のモバイルブラウザには、何故かfloatプロパティを実装していないにも拘らず、<img>要素のalign属性は実装されております。
但し、<img>要素のalign属性はXHTML 1.0 トランジッショナルには含まれるものの、XHTML モバイル・プロファイルには含まれておりません。
従ってこれらの属性を使った場合、XHTML モバイル・プロファイルには不適合となってしまいます。
ｉモードとの兼合いから使わざるを得ないかも知れませんが、この事は覚えておいて下さい。
PCでも基本中の基本ですが、背景画像が読み込めなくても読めるような配色を心掛ける事です。
特に、通信速度が遅い環境やパケット従量制しか選択出来ない環境では画像の読込を停止しているかも知れません。
また、端末に依っては背景画像をサポートしていないものもあります。
最近ではトゥルーカラーに対応している端末が主流ですが、256色液晶とか白黒液晶の存在も否定出来ません。
このため微妙な色の違いでは判別が出来なくなる恐れがあります。
これも基本中の基本と言えます。
旧型の端末ではCSSが使えないものもあります。
ｉモードブラウザ 1.0対応機種でもフォーマ端末の多くはCSSが利用可能と言う事になっておりますが、本来のCSSの使い方が出来ず、事実上CSSには非対応となっております。
これらの点から、CSSに対応していない携帯端末は未だに多いと言えます。
CSS非対応機種の事を考えてXHTML 1.0 トランジッショナル規格でHTML文書を作成し、物理要素・属性を併用した場合、将来CSS対応端末で<font>要素を認識しない端末が現われる可能性があります。
このため、<font>要素をスタイル定義で無効にしてしまい、代りに論理要素に適切なスタイルを当てるようにします。
こうする事でCSS対応端末ではCSSに依るデザインで表示され、ｉモードブラウザ 1.0対応機種などの旧型機では<font>要素等に依るデザインが利用出来ます。
具体的例として、<h1>要素について、CSSを用いる用いないに拘らず緑色の文字でセンタリング表示したい場合には、以下のようにします。
まず、HTML側は以下のようにマークアップします。
<h1 align="center"><font color="#009900">○○のページ</font></h1>一方、CSS側は以下のように記述します。
font {/* <font>要素を無効にする。 */color: inherit;}…h1 {font-size 1em;text-align: center;border: #fd0 solid 2px;color: #090;}
このスタイルシートをHTML文書にリンクすると、
但し、ソフトバンク旧型機では<h○>要素は一部パケット機を除いてサポートしておりません。
このため、ソフトバンク旧型機ではセンタリングは機能しない場合があります。
当然の事ですが、一番良い方法は物理要素・属性を用いない事です。
しかし、その場合、CSS非対応端末ではプレーンな表示となります。CSS非対応端末が未だに大半を占めている現状では、ちょっと抵抗を感じるかも知れません。
