携帯サイトで背景色を個別指定していく方法まとめ

モバイル 携帯サイト作成 i-css i-xhtml


◆方法1
＜div bgcolor="カラーコード"＞文字＜/div＞
でも個別背景色を指定できます。

・・が、901以前のドコモ機種に対応していません。

◆方法2
tableタグを利用する。

これも901以前のドコモ機種に対応していないですが、個人的に楽なのでこれを使うことが多いです。詳しくはこっちの記事に。

・手っ取り早く携帯サイトを作成する時のhtmlテンプレート
http://d.hatena.ne.jp/moba13/20100916

◆方法3
i-cssを利用する。

i-css=iモード対応XHTML用のCSSです。
ドコモ独自仕様のめんどくさいやつです。

au・softbankは基本的に外部cssに対応しており、
背景色の個別指定もある程度できるのですが、
ドコモの仕様上、これに合わせていくしかありません。

この仕様に合わせて作成すれば、
3キャリアほとんどの携帯で、
背景色の個別指定が可能となります。


・i-css使い方
1.i-cssを利用するための設定を行う。
http://papalion.tv/Css/set.php
※おタグるーむ様より。

2.インラインで背景色の指定を行う。
＜div style="background:#CCCCCC;"＞
＜span style="color:#666666;"＞文字列＜/span＞＜br /＞
＜/div＞
みたいなソースを毎度毎度書かなければいけないということです。

細かいことは、iモード対応XHTMLよりどうぞ。



◆方法3＋α
Perl・PHPでi-cssを外部化するライブラリが公開されているようです。

Perl
http://d.hatena.ne.jp/tokuhirom/20070809/1186617282

PHP
http://blog.asial.co.jp/411




ドコモさんがいろいろと対応してくれたら、
サイト作成がすごく楽になる気がします。


⇒参考記事。
モバイルサイトのCSS
http://blog.livedoor.jp/ld_directors/archives/50771690.html
[mobile] ｉモードで background-color で背景色を指定できる判別条件
http://kawa.at.webry.info/200712/article_5.html
ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
http://d.hatena.ne.jp/tokuhirom/20070809/1186617282
iモードHTMLとiモードXHTMLを正しく切り替える方法
http://dspt.blog59.fc2.com/blog-entry-36.html
ドコモ端末でCSSを利用するには
http://ke-tai.org/blog/2008/04/03/docomocss/