主にAU携帯電話（ezweb）からの閲覧の為のＣＳＳ

何故iモードではないのかというとiモードHTMLシミュレータIIを使用してみた感じ、スタイルシートはサポートしていないからです。というわけで今回は、なかなかのCSS実装度を誇る（とオレは思っている）AU携帯電話に内蔵されているOpenwave社のWAP端末用SDKを教材として「携帯端末へのCSS」というものを考えてみることにしましょう。

個別のCSSファイルを設ける: いくら「ユニバーサルだよう！」と叫んだところで膨大な内容のCSSをそのまま使うのは愚者の極み。例えばbody要素の margin や padding の単位にemを使っていたりするとする。そして、それが４辺 3em だったりすれば携帯電話の画面で3em四方（或いは二方）の空白スペースができることになります。酷いものになると文章全体が縦１行に表示されてしまったりします。実際そのようなサイトに遭遇して泣きながらスクロールしたことがあります。もはやそれは読み物ではなく拷問です。そうならない為にも適当な別シートを設けるべきでしょう。（AU携帯電話はオレの知る限りメディアタイプなんて理解できませんので）CSS振り分けスクリプトなどは多数発表されているので適当に探して見て下さい。※PHPでよければオレが使っているものを最後の方に書いてますのでそれを使うのも良いでしょう。以下、注意点など。間違いがあるかもしれません。あっても心の中で「バカめ！」とだけ思って脳内修正願います。
スタイル継承は出来ない: 「divの中のH3へ」なんて指定はできませんので男らしくH3要素そのものへ指定してあげてください。
最低限のスタイルに留める: 驚くほど最低限で十分です。個人的には見出しのマージン、段落の行間（line-height）と空白（margin）或いは字下げ（text-indent）、body要素への数px（或いは数%）の余白（margin or padding）だけで十分だと思います。特に「body要素への数px（或いは数%）の余白」は重要です。デフォルトだと画面いっぱいに文字が広がってとても気持ちが悪い。まあ気にならない人が多数だとは思いますが。あとはサイトにイメージカラーを用いてる場合はそれをちょろっとどっかに入れりゃあいいんじゃないですかね。

まあそんな感じでやや大げさに書いてみましたが、別にどうということもないです。携帯電話へのスタイル指定なんてそれこそオナニーみたいなものです。読めりゃあいいんです。ただ「読ませる」為にちょっとした計らいを行う、ということをほんの少しだけ考えてみるということは大切かもしれません。

ここまで書いてこう結論付けるのもなんですが、はてなダイアリーやその他携帯端末対応のサービスで文書発表するのが最も安全です。全ての責任を企業へ押し付けてしまいましょう！！やった！！

付録：CSS振り分けPHP

PHPでアクセスしたブラウザ（UA）の違いでCSSを切り替えます。大雑把なものなので適宜改良されるのも良いでしょう。


<?php
$UserAgent = getenv('HTTP_USER_AGENT');
if( eregi("MSIE",$UserAgent) ) {
// MSIE 6.0
$extend = 'msie';

} elseif( eregi("Firefox",$UserAgent) ){
// Firefox
$extend = 'fox';

} elseif( eregi("Gecko",$UserAgent) ){
// Firefox
$extend = 'fox';

} elseif( eregi("Opera",$UserAgent) ) {
// Opera
$extend = 'opera';

} elseif( eregi("KDDI",$UserAgent) ) {
// KDDI
$extend = 'kddi';

} else {
// common
$extend = 'common';
}
?>
<link rel="stylesheet" href="<?= $extend ?>.css" type="text/css">

書いた人：l-_-l
このページのURL：http://ima.pandach.com /cgi-bin/mt/2007/04/auezweb.php

« 210 »