最近携帯向けのページを作成することが多いので、携帯向けのXHTMLと格闘しておりますkayです。
その際に個人的に感じたこと等をまとめてみましたので、少しでもご参考になればと思います。
なお、ここでご紹介しますものはあくまでも個人的な趣味に基づいており、一定時期より古い機種は配慮しておりませんのでご了承ください。
3キャリア対応の携帯サイトを作成する場合、docomoに合わせてCSSをインラインで書く必要があります。
これはPCサイトを作成したことのある人にとってはきっととても気持ち悪いことなんですが、我慢してstyle=""を使っています。
また携帯ですので、実際に出来ることはとても限られており、機種やキャリアによっても異なりますので個人的にはベーシックなものを中心に使用してデザインすることをおすすめします。
その際、一番制限が厳しいのは相変わらずdocomoですので、いつもはそれに合わせて作成しております。
よく使うものたち
- フォントカラー
<span style="color:red;">赤文字</span> <div style="color:blue;">青文字</div>
<div style="text-align:center;">真ん中に来る文字</div>
<span style="text-decoration:blink;">点滅している文字</span>
<div style="background:yellow;margin:0px 5px;border:1px orange solid;"> 文章 </div>
上記の場合、1pxのボーダーに囲まれた左右に少しマージンのあるボックスになりますが、marginとborderは機種によってはきちんと表示されません。
正しく表示されない場合はただの黄色背景のボックスとして表示されます。
個人的に気を付けていること
- フォントカラー
- フォントサイズ
絵文字の色に注意する必要があります。
docomoの絵文字のみ色を変更することが出来ますので、意図しない場所で勝手な色にならないよう、普通はspanタグのほうで絵文字以外の部分だけの色を変えるように心がけています。
font-size:xx-large font-size:x-large font-size:large font-size:medium font-size:small font-size:x-small font-size:xx-small
で指定することが多いかと思いますが、docomoの場合large,medium,smallの3パターンしかなかったり、機種によって文字の大きさが異なっていたり、pxで指定する必要があったりとバラバラです。
ある程度妥協が必要な部分ですが、こだわる場合はいろいろなキャリアや機種で実際に表示させてみるのが一番かと思います。
携帯の場合、画像が全部表示されるとは限りません。せっかちなユーザは全て表示されなくても先に進んでしまいますし、電波の問題で途中までしかロード出来ないケースもしばしばあります。
それを配慮して、携帯向けサイトの場合はaltとheight・width属性を忘れずに記述してあげたほうがとても親切です。
また、style="float:left;"等で文字の回り込みを指定出来ますが、一部機種ではきちんと表示されないことがあるので合わせてalign="left"も記述しておくと安全です。
PCサイトではあまり推奨出来ないtableタグでのデザインも、携帯サイトではどうしても必要になることがあります。
携帯でウェブを見るする時に、隣通しで並んでいるリンクが2つ以上ある場合、左から順に追っていくことになるかと思いますが、そのリンクの上下の位置が微妙にずれていると少しでも上に位置しているものから追っていくことになる機種もあり、少々気持ち悪いことになります。
それを解消するためにも、style="vertical-align:top;"でテキストの位置をきちんと揃えてあげることが大事です。
更に、機種によっては、フォントサイズを既に指定していてもtable内ではそれがリセットされてしまうものがありますので、<td>の度にサイズを再度指定してあげましょう。
以上
ほんの一部のみ紹介させて頂きましたが、他にもこんなのに気を付けているよ等ありましたら、ぜひぜひ教えて下さい。