携帯電話で使う事の出来るカスケーディングスタイルシート(CSS)を実際に書くに当たって注意すべき点を解説します。
多くは端末の実装などに依存したものなのですが、やはり配慮しておいた方が良いでしょう。
携帯電話向けのCSSで考えておかなければならない事 (平成22年 4月 8日 更新)
携帯電話には、PCに較べていくつか不利な点があります。
現在、日本国内では多くの端末がトゥルーカラーのQVGA液晶で高速通信が出来、またパケット定額使い放題が利用出来るものですが、そうでない端末の存在は否定出来ません。
このため、以下の点に注意すると良いでしょう。
font-sizeプロパティの値を大きくし過ぎると、一行に入る文字数が少なくなり、読み難くなります。
逆に小さくし過ぎても読めなくなる恐れがあります。
現在、日本の携帯電話はQVGA液晶が標準のようですが、それより解像度の低い端末や逆に高いVGA端末もあり、自分が持っている端末だけで判断するのは危険です。
1em=100%に統一するくらいでいいでしょう。
PCの場合は大半がウィンドウズとマック OSなので、font-familyプロパティの値に'ＭＳ Ｐゴシック'とか'Osaka'などの機種依存のフォント名が使えますが、携帯端末の場合にはそのようなフォント名を特定するのは不可能です。
フォントの系統(sans-serifなど)でさえ、希望する系統が使えない事もあると思っておいた方が良いでしょう。
一部のブラウザにバグがあるのも理由の一つですが、やはり画面が狭いので、下手に余白を取るとやはり一行に入れられる文字が少なくなり過ぎてしまいます。
旧オープンウェーヴ社のモバイルブラウザ(KDDI/沖縄セルラーのEZウェブ対応端末全機種とソフトバンクの一部初期の第三世代機種)にはfloatプロパティが実装されておりません。
このため、画像などを片側に寄せるようなレイアウトをしようとした場合、旧オープンウェーヴ社のブラウザではこれらのプロパティが効かないと言う事になります。
対策としては、floatプロパティが実装されていない場合にはフローティングを諦めて代わりにセンタリングで表現するようにすると良いでしょう。
具体的には、画像を納めているブロックレヴェル要素に適切なクラス名を与え、そのブロックレヴェル要素にtext-alignプロパティを当てて内容となるインライン要素をセンタリングするようにして、画像には別途floatプロパティを当てておきます。
実際の記述は以下のようになるでしょう。
<div class="images"><img alt="堀北真希ちゃん" src="HORIKITA_Maki.JPG" width="160" height="160" /></div>(後続テキスト)
このHTMLに対して、CSSを以下のように書きます。
div.images {text-align: center;}img {float: left;}
このスタイルを当てた場合、floatプロパティを認識する環境なら画像は正しく左フロートされ、そうで無い環境でも画像がセンタリングされる事でそれなりの見栄えになるでしょう。
実はオープンウェーヴ社のモバイルブラウザには、何故かfloatプロパティを実装していないにも拘らず、<img>要素のalign属性は実装されております。
但し、<img>要素のalign属性はXHTML 1.0 トランジッショナルには含まれるものの、XHTML モバイル・プロファイルには含まれておりません。
従ってこれらの属性を使った場合、XHTML モバイル・プロファイルには不適合となってしまいます。
ｉモードとの兼合いから使わざるを得ないかも知れませんが、この事は覚えておいて下さい。
この場合のHTML及びCSSの書き方は以下のようになります。
先ず、HTMLは以下のようになります。
<?xml version="1.0" encoding="shift_jis"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…<p><img align="left" alt="堀北真希ちゃん" src="HORIKITA_Maki.JPG" width="160" height="160" />(後続テキスト)</p>
このHTMLに対して、CSSは以下のように書きます。
img {float: left;}
これなら、CSSの対応に拘らず(現在の国内の端末であれば)必ず左寄せになります。
<br clear="方向">要素とCSSを併用する。ところで、左右へ寄せた画像に続くテキストの廻り込みを解除したい場合はどうすべきでしょうか。
旧オープンウェーヴ社のモバイルブラウザにはfloatプロパティが実装されておらず、当然clearプロパティも効きません。
しかし、<br>要素のclear属性は実装されております。
ただ、旧オープンウェーヴ社のモバイルブラウザでは、画像を含んでいるブロックレヴェル要素が終わると、後続のテキストは廻り込みをやめてしまうので、従って<br>要素での廻り込み解除は同一ブロック内で解除が必要でない限り不要となります。
HTMLで言えばこのような感じになります。
<p><img align="left" alt="堀北真希ちゃん" src="HORIKITA_Maki.JPG" width="160" height="160" />(この部分のテキストは画像の右に廻り込みます)</p><p>(この部分は、旧オープンウェーヴ社のモバイルブラウザでは画像の右には廻り込みません)</p>
それでも、携帯電話にはCSS非対応環境がまだまだ多いので、画像を含んだブロックレヴェル要素の末尾には必ず<br clear="方向">要素を入れておくと良いでしょう。
尚、この<br>要素はCSS対応環境では意味がないので、レイアウト崩れ防止のために非表示にしておけばば良いでしょう。
<p><img align="left" alt="堀北真希ちゃん" src="HORIKITA_Maki.JPG" width="160" height="160" />(この部分のテキストは画像の右に廻り込みます)<br clear="left" /></p><p>(この部分は、旧オープンウェーヴ社のモバイルブラウザとCSS非対応ブラウザでは画像の右には廻り込みません)</p>
また、本来はブロックレヴェル要素にはデフォルトとして clear: none; プロパティが与えられているので、予めCSSではブロックレヴェル要素(<p>要素や<h○>要素など)には clear: both; プロパティを与えておく必要があります。
具体的には以下のようになります。
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, table, form, fieldset {clear: both;…}br[clear] {display: none;}
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文書にリンクすると、
当然の事ですが、一番良い方法は物理要素・属性を用いない事です。
しかし、その場合、CSS非対応端末ではプレーンな表示となります。CSS非対応端末が未だに大半を占めている現状では、ちょっと抵抗を感じるかも知れません。
