ケータイサイトで画像の回り込みを実装する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>

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

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく