携帯サイト制作のヒント：綺麗な箇条書きを実現するには？

箇条書きリストは情報を整理して見せるのに効果的ですが、PCサイトでは一般的でも携帯サイトでは使われません。下の例のように字下げ幅やマーカーの見た目の違いが大きいことや、ドコモはCSSプロパティでアレンジできることがほとんどないことから、見た目をアレンジしたくても３キャリアで同じような表示ができないのです。

（画面：左からdocomo 904i、au G9、SoftBank 920P）


ドコモはデザイン的に貧弱です。しかもマーカーの見た目が変えられないので対処できません。ソフトバンクだけやけに字下げし過ぎて短いテキストもすぐに折り返してしまいます。情報量がさほど多くなくてもスクロールがたくさん必要な縦に間延びしたコンテンツになりがちです。auはまあまあバランスがいいですが、マーカーとテキストとの間隔がもう少し狭くてもいいかと思います。

そのため、リストを使うのはやめて単純に絵文字や中黒（・）などを使ったインラインなテキストになってしまいます。そうすると、テキストがある程度長くなると折り返した次の行がインデントされません。これではちょっと見づらいことになります。

そこでラウンドアバウトは、リストのタグ（ul / li）に代わるものとして次のような箇条書きを実現する拡張タグを用意しました！

（画面 docomo N905i）

使い方を説明します。

●箇条書きタグ（ラウンドアバウト拡張タグ）

<ra:ul></ra:ul>

<ra:li></ra:li>

このように使います。

●XHTMLサンプルコード

<ra:ul>
 <ra:li class="marker_lv1_a">ﾄｯﾌﾟﾆｭｰｽ</ra:li>
 <ra:li class="marker_lv2_a">台風18号暴風域に</ra:li>
 <ra:li class="marker_lv2_a">暫定税率を10年度廃止へ</ra:li>
 <ra:li class="marker_lv2_a">台風18号:災害対策本部</ra:li>
 <ra:li class="marker_lv2_a">25日投開票－参院2補選</ra:li>

 <ra:li class="marker_lv1_a">社会</ra:li>
 <ra:li class="marker_lv2_a">台風18号本州北上2人死亡</ra:li>
 <ra:li class="marker_lv2_a">富士山 今季初冠雪</ra:li>
 <ra:li class="marker_lv2_a">ﾀｹﾉｺ偽装2人に有罪</ra:li>
 <ra:li class="marker_lv2_a">裁判員裁判:初めて被告人質問</ra:li>
</ra:ul>

●使用するCSSプロパティ

.marker_lv1 {width:8%;vertical-align:top;text-align:right;}
.marker_lv2 {width:18%;vertical-align:top;text-align:right;}

●画像の用意
マーカーに使う画像を2種類用意します。画像作成の目安は以前の解説を参考にしてください（携帯サイト制作のヒント：アイコンを使ったわかりやすいナビゲーション）。

ファイル名と画像への参照パス（XHTMLファイルから見た相対パス）は次のようにします。

• ./images/marker_lv1_a.gif
  
• ./images/marker_lv2_a.gif
  

●表示結果
ラウンドアバウトを通すと、キャリアの違いも無く、綺麗な箇条書きが実現できるのが分かります。

（画面 docomo N905i）


（画面 au W61K）


（画面 SoftBank 920P）


仕掛けはラウンドアバウトの言語変換・外部CSS利用・画像変換の組み合わせです。必要なものは全て携帯サイト開発者が編集できるところにあります。クラスセレクタ名や画像ファイルへのパスは自由に変えることができます。