詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ
- <ra:field></ra:field>
- <ra:area></ra:area>
隙間を解消するラウンドアバウトの拡張タグ「ra:field」「ra:area」は、端末グループによって次のように言語変換されます。
・<ra:field>
| au（テーブル対応するWIN端末） | それ以外 |
|---|---|
| <table border="0" cellpadding="0" cellspacing="0"> | <div> |
・</ra:field>
| au（テーブル対応するWIN端末） | それ以外 |
|---|---|
| </table> | </div> |
・<ra:area>
| au（テーブル対応するWIN端末） | それ以外 |
|---|---|
| <tr><td> | </div> |
・</ra:area>
| au（テーブル対応するWIN端末） | それ以外 |
|---|---|
| </td></tr> | </div> |
それでは、冒頭の隙間が発生してしまうHTMLソースを、拡張タグを使った書き方に変えてみましょう。手順は以下の３点で、大掛かりにHTMLを書き換えることなく使うことができると思います。
- 背景色付きのブロック（div要素）に接する画像のimg要素をra:area要素で囲む
- 背景色付きdiv要素をra:area要素に置き換える
- 画像・背景div・画像･･･と続く一連の要素全体をra:field要素で囲む
（隙間が発生するソース)
<body> <img src="image/beach.gif" /> <div style="background-color:#33CCFF"> <div class="center"> <span style="color:#000066;">8月のレジャー情報</span><br /> <br /> <a href="#">北海道・東北</a><br /> <a href="#">関東・甲信越</a><br /> <a href="#">東海・北陸</a><br /> <a href="#">関西</a><br /> <a href="#">中国・四国</a><br /> <a href="#">九州・沖縄</a><br /> </div> </div> <img src="image/sea.gif" /> <div style="background-color:#0066FF"> <div class="center"> <span style="color:#FFFF00">交通情報</span><br /> <br /> </div> </div> </body>↓
（拡張タグによって隙間を解消したソース）
<body> <ra:field> <ra:area><img src="image/beach.gif" /></ra:area> <ra:area style="background-color:#33CCFF"> <div class="center"> <span style="color:#000066;">8月のレジャー情報</span><br /> <br /> <a href="#">北海道・東北</a><br /> <a href="#">関東・甲信越</a><br /> <a href="#">東海・北陸</a><br /> <a href="#">関西</a><br /> <a href="#">中国・四国</a><br /> <a href="#">九州・沖縄</a><br /> </div> </ra:area> <ra:area><img src="image/sea.gif" /></ra:area> <ra:area style="background-color:#0066FF"> <div class="center"> <span style="color:#FFFF00">交通情報</span><br /> <br /> </div> </ra:area> </ra:field> </body>
拡張タグを使って表示した結果がこちらです。３キャリアで見ても同じように画像と背景が馴染んだデザインをすることができました。
0 コメント:
コメントを投稿