モバイルデザインテンプレートを使うことでできることを調べてみました。今回はリストビュー表示したいときに使えるCSSについてです。
リストビュー(Standard)のCSS
list-view
ulタグとliタグに対してリストビュー用のデザインを適用することができます。
right-one-icons
アイコンを表示するために右側にpadding-rightを指定してくれるみたいです。
複数アイコンを表示したいときは「right-two-icons」と「right-three-icons」まで用意されています。
h1タグとpタグ
list-view内ではh1タグとpタグはタイトルと補足のような感じで使用されます。
h1タグだけでなくh2以降も使用できるみたいです。
list-view-icons
リストビュー内でアイコンを表示したいときに指定します。
icon-right-arrow
icon-plus
icon-minus
リストビュー(Tabbed)のCSS
リストビューでタブ機能を使用するときに使えるCSSです。
tabbed-list-view-nav
タブナビゲーションを表示できます。
タブ使用には以下のルールがあるそうです。
タブの上限は 4 つです。タブを 2 つ表示する場合は span-50、3 つの場合は span-33、4 つの場合は span-25 を使用します。
tabbed-list-view
タブ毎のコンテンツを表示できます。
リストビューのStandardとTabbedはこんな感じです。Tabbedの方がブラウザでは問題なく動くのですが、タブレット端末だと表示が少しうまくいきませんでした。他にも指定が必要な要素があるみたいです。
