携帯電話向けのCSSを書くに当たって。

携帯電話で使う事の出来るカスケーディングスタイルシート(CSS)を実際に書くに当たって注意すべき点を解説します。

多くは端末の実装などに依存したものなのですが、やはり配慮しておいた方が良いでしょう。

携帯電話向けのCSSで考えておかなければならない事。(平成22年 4月 8日 更新)

携帯電話には、PCに較べていくつか不利な点があります。

  • 画面が小さい
  • 表示可能色が少ない端末がある
  • フォントが限られる
  • 通信速度の遅い端末がある
  • 通信量に依り課金される端末がある

現在、日本国内では多くの端末がトゥルーカラーのQVGA液晶で高速通信が出来、またパケット定額使い放題が利用出来るものですが、そうでない端末の存在は否定出来ません。

このため、以下の点に注意すると良いでしょう。

font-sizeプロパティの値は極端な値にしない。

font-sizeプロパティの値を大きくし過ぎると、一行に入る文字数が少なくなり、読み難くなります。

逆に小さくし過ぎても読めなくなる恐れがあります。

現在、日本の携帯電話はQVGA液晶が標準のようですが、それより解像度の低い端末や逆に高いVGA端末もあり、自分が持っている端末だけで判断するのは危険です。

1em=100%に統一するくらいでいいでしょう。

font-familyプロパティは当てにしない。

PCの場合は大半がウィンドウズとマック OSなので、font-familyプロパティの値に'ＭＳ Ｐゴシック'とか'Osaka'などの機種依存のフォント名が使えますが、携帯端末の場合にはそのようなフォント名を特定するのは不可能です。

フォントの系統(sans-serifなど)でさえ、希望する系統が使えない事もあると思っておいた方が良いでしょう。

左右の余白は余り弄らない。

一部のブラウザにバグがあるのも理由の一つですが、やはり画面が狭いので、下手に余白を取るとやはり一行に入れられる文字が少なくなり過ぎてしまいます。

  • 引用などでも余り大きな余白を取ると読み難くなるので、枠線を付けるなどして引用と分かるようにすると良いでしょう。

floatプロパティが機能しなくても困らないようにする。(平成22年 4月 8日 更新)

旧オープンウェーヴ社のモバイルブラウザ(KDDI/沖縄セルラーのEZウェブ対応端末全機種とソフトバンクの一部初期の第三世代機種)にはfloatプロパティが実装されておりません。

このため、画像などを片側に寄せるようなレイアウトをしようとした場合、旧オープンウェーヴ社のブラウザではこれらのプロパティが効かないと言う事になります。

対策としては、floatプロパティが実装されていない場合にはフローティングを諦めて代わりにセンタリングで表現するようにすると良いでしょう。

  • どうしてもフローティングをしたい場合には、後述のように、<img>要素にalign属性を当ててフローティングを行う事も考えられますが、この場合XHTML モバイル・プロファイルに適合しなくなります。

具体的には、画像を納めているブロックレヴェル要素に適切なクラス名を与え、そのブロックレヴェル要素に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プロパティを認識する環境なら画像は正しく左フロートされ、そうで無い環境でも画像がセンタリングされる事でそれなりの見栄えになるでしょう。

どうしても画像をフロートしたい場合には。(平成22年 4月 8日 更新)

<img>要素のalign属性を用いてフロートさせる。

実はオープンウェーヴ社のモバイルブラウザには、何故かfloatプロパティを実装していないにも拘らず、<img>要素のalign属性は実装されております。

  • ｉモードなどとの互換性を考慮してなのかも知れませんが、だったら何故CSSでも同様の機能となるfloatプロパティが実装されないのか解せません…。

但し、<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>
  • align属性が入った事で、XHTMLモバイル・プロファイルとして不適合となるため、適合するXHTML 1.0 トランジッショナルの文書型とします。

この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が利用出来なくても困らないようにする。

これも基本中の基本と言えます。

旧型の端末ではCSSが使えないものもあります。

ｉモードブラウザ 1.0対応機種でもフォーマ端末の多くはCSSが利用可能と言う事になっておりますが、本来のCSSの使い方が出来ず、事実上CSSには非対応となっております。

  • 平成21年 5月に漸くCSSに完全対応したｉモードブラウザ 2.0対応機種が発売されましたが、まだまだｉモードブラウザ 1.0対応機種からの移行は進んでいない模様です。

これらの点から、CSSに対応していない携帯端末は未だに多いと言えます。

  • 実際には正しいマークアップをしていればCSSが機能しなくても閲覧に支障は出ない筈です。

CSS非対応機種との兼ね合い。

CSS非対応機種の事を考えてXHTML 1.0 トランジッショナル規格でHTML文書を作成し、物理要素・属性を併用した場合、将来CSS対応端末で<font>要素を認識しない端末が現われる可能性があります。

  • 特に海外の端末でそう言う機種が出る可能性があります。

このため、<font>要素をスタイル定義で無効にしてしまい、代りに論理要素に適切なスタイルを当てるようにします。

こうする事でCSS対応端末ではCSSに依るデザインで表示され、ｉモードブラウザ 1.0対応機種などの旧型機では<font>要素等に依るデザインが利用出来ます。

具体的なCSS非対応端末との兼合いの例。

具体的例として、<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対応端末では黄色の枠が付いた緑色の文字で表示され、
  • 非対応端末でも<font>要素により、緑色に表示されます。

一番良い方策は物理要素を使わない事です。

当然の事ですが、一番良い方法は物理要素・属性を用いない事です。

しかし、その場合、CSS非対応端末ではプレーンな表示となります。CSS非対応端末が未だに大半を占めている現状では、ちょっと抵抗を感じるかも知れません。

  • ｉモードブラウザ 1.0対応機種の場合、CSS対応端末でも原則としてXHTMLで配信するページにstyle属性でスタイルを指定しないと利用出来ないので、未だに物理要素を用いざるを得ないかも知れません。

しらぎくのウェブサイト作成入門サイトマップ