携帯サイト制作のヒント：回り込みはできますか？

ページレイアウトを工夫する際画像のテキスト回り込みは携帯サイトでもよく見られます。ドコモ・ソフトバンクはCSSのfloatプロパティ、auはalign属性とキャリアによって方法が異なり、一般的にはベタベタに両方を書いたりキャリアによって記述を分けたりします。

ラウンドアバウトなら言語変換と外部CSSで簡単にワンソースで回り込みができます。外部CSSに対応しないiモードブラウザ1.0のFOMAにはCSSプロパティをインライン展開し、floatプロパティが効かないau向けにはalign属性に言語変換します。

ラウンドアバウトはサンプルCSSファイルに回り込みと回り込み解除用のクラスセレクタを用意しています。これを利用しワンソースで回り込みする例をお見せします。

●使用するセレクタ（CSS）

.float_l {float:left;}
.clear {clear:both;}

●XHTML例

<img src="image/ayu.jpg" class="float_l" />
本日から鮎解禁！ここに来たら釣りたての鮎塩焼きは欠かせませんよね。
<div class="clear">
<div class="right"><a href="comment.html">ｺﾒﾝﾄを見る</a></div>
</div>

●画面(docomo N905i)

(出力XHTML)

<img src="image/ayu.jpg?s=101424&w=120" style="float:left" />
本日から鮎解禁！ここに来たら釣りたての鮎塩焼きは欠かせませんよね。
<div style="clear:both">
<div style="text-align:right"><a href="comment.html">ｺﾒﾝﾄを見る</a></div>
</div>

●画面(SoftBank 932SH)

(出力XHTML)

<img src="image/ayu.jpg?s=303288" class="float_l" />
本日から鮎解禁！ここに来たら釣りたての鮎塩焼きは欠かせませんよね。
<div class="clear">
<div class="right"><a href="comment.html">ｺﾒﾝﾄを見る</a></div>
</div>

●画面(au W61K)

(出力XHTML)

<img src="image/ayu.jpg?s=127124&w=116" class="float_l" align="left" />
本日から鮎解禁！ここに来たら釣りたての鮎塩焼きは欠かせませんよね。
<div clear="all" class="clear">
<div class="right"><a href="comment.html">ｺﾒﾝﾄを見る</a></div>
</div>

class属性に回り込み用のクラスセレクタを書くだけで３キャリア全てうまくいきます。見ての通り元のXHTMLには携帯向けの特別な記述は何もなく、ごく普通のXHTMLとCSSの書き方です。ラウンドアバウトがあれば専門知識なく誰でも携帯サイトが作れることを示す一例といえます。