いつも携帯サイトのコーディングを行う際、PCとの勝手の違いに苦労する。
AU・DOCOMO・SOFATBANKとコーディング方法が微妙に困るのでそれぞれ表記してあげる必要がある。
基本的な部分のコーディングを自分なりにまとめてみた。
①リンクの色
まずは、全体のリンク色の設定。ヘッダー内に以下のように記述する。
1 2 3 4 5 6 7 8 |
<textarea class="html" cols="60" rows="5" name="code"> <style type="text/css"> <![CDATA[ a:link { color:#fff799; } a:visited { color:#fff799; } ]]> </style> </textarea> |
②背景色
背景色は基本bodyタグに記述するが、キャリア・機種によっては反映されない場合があるので、
bodyダクとdivタグと両方同じ記述をしてあげると安心。
1 2 3 4 5 |
<textarea class="html" cols="60" rows="5" name="code"> <body style="background-color:#000;text-align:center;font-size:small;color:#d8d8d8"> <div style="background-color:#000;text-align:center;font-size:small;color:#d8d8d8"></div> </body> </textarea> |
③画像の回り込み
画像の回り込みは、機種依存をなくすために、以下のようにstyleのfloatだけでなくalignでも指定してあげる必要がある。
1 2 3 |
<textarea class="html" cols="60" rows="5" name="code"> <img align="left" style="float: left;" src="sample.jpeg"/> </textarea> |
④文字サイズ
携帯サイトの文字サイズは数値ではDocomoが効かなかったり、、
また、キャリア毎に数字の基準が違うので使いづらいです。styleに下記のキーワードで指定する必要あり。
ただ、x-smallとxx-smallが同じ大きさだったりするので、small < medium < largeの3サイズ位で留めておいてもよいかも。
xx-small < x-small < small < medium < large < x-large < xx-large
1 2 3 |
<textarea class="html" cols="60" rows="5" name="code"> <div style="font-size:smaller;">文章文章文章文章</div> </textarea> |
⑤テーブルタグ・リストタグ
対応している機種もありますが、基本使用しないほうがよい。
brタグと空白とfloatをうまく使って頑張る。
⑥hrタグ
hrタグは使用できるが、これまた各キャリア・端末によって勝手が違うのでごちゃごちゃ記述する。
下記は高さが1pxの時。
1 2 3 |
<textarea class="html" cols="60" rows="5" name="code"> <hr size="1" style="width:100%;height:1px;margin:2px 0;padding:0;color:#C40669;background:#C40669;border:1px solid #C40669;" /> </textarea> |
⑦センタリング方法
これは普通にstyleのtext-alignを使用。
1 2 3 |
<textarea class="html" cols="60" rows="5" name="code"> <div style="text-align:left>文字<div> </textarea> |
思いつき次第追記していく。。かも。