ケータイサイトで画像の回り込みを実装するTips

ケータイサイトのコーディングは、ウェブと違ってキャリアによる違いや端末の違いで、コーディング方法が変わります。
その為、ほとんどのキャリア公式サイトでは、キャリアごとに構築するんですが、勝手サイトは、予算的にあまりいい方法だとは言えません。できるだけひとつのテンプレートで3キャリアに対応できるコーディングする必要があります。

そんな中で、特にこれというのが、「画像の回り込み」です。

あくまでも3G機種に限られた話になりますが、多くの3G機種はXHTMLに対応しています。その為、サイトのデザインも幅が広がっており、現在は各サイトがXHTMLを利用しているのですが、中にはコーディングが上手くいかずに大変なことになっているままのサイトもあったりします。

また、auの場合は、そもそもXHTMLなのにfloatが利用できないという難点も抱えているんですね。

それらを一気に解決して、たったひとつのテンプレートだけで3キャリアに対応した画像の回り込みさせるコーディング。それは、要素内にスタイル指定を併記するという方法です。
つまり、実際に書いてみると以下の通りになります。

<img src="hoge.jpg" style="float:left;" align="left" />あいうえおかきくけこさしすせそたちつてとなにぬねの....

さらに、このスタイルを解除する方法も覚えましょう。これも3キャリア共通にできます。

auとSBMの場合は、

<br style="clear:both;" clear="all" />

と併記してもスタイル解除出来るのですが、DoCoMoの場合、<br />に対してstyleを設定することが出来ません。その為全キャリア共にdiv要素を利用することになります。書き方は以下のようになります。

<div style="clear:both;" clear="all"></div>

まとめると以下の通りに書くことで、3キャリア共通の画像回り込みが実装できます。

<img src="hoge.jpg" style="float:left;" align="left">あいうえおかきくけこさしすせそたちつてとなにぬねの...
<div style="clear:both;" clear="all"></div>

テンプレートをキャリアごとに分けてコーディングする必要というのは、場合によって、もしくは予算によってアリだとは思いますが、同一テンプレートでこういうことも可能なんだということを覚えておくと、後々役に立ちますよ。

モバデビの最新情報をチェック