スマートフォンらしいリスト表示
リスト表示
- リストは、コンテンツ領域内（data-role="content"）にul要素を記述し、ul要素に対してカスタムデータ属性「data-role="listview"」を指定することで表示できます
ブロックリンク
- XHTMLではa要素の内側にh3要素などのブロックレベル要素を記述できませんでしたが、HTML5ではa要素の内側にほとんどの要素を記述できます
- ブロックレベル要素をa要素の内側に記述する「ブロックリンク」は非常に便利な手法です
<body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><a href="#seminar"><h3>セミナー情報</h3></a></li> <li><a href="#access"><h3>アクセス</h3></a></li> <li><a href="#contact"><h3>お問い合わせ</h3></a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>このサイトについて</h1> </div> <div data-role="content"> <p><a href="#index">TOPページ</a></p> </div> <div data-role="footer"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="seminar"> セミナー情報 </div> <div data-role="page" id="access"> アクセス </div> <div data-role="page" id="contact"> お問い合わせ </div> </body>
リスト見出し
- リスト表示では、li要素にカスタムデータ属性「data-role="list-divider"」を付けることでリストを区切る「見出し」も表示できます
<body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">メニュー</li> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><a href="#seminar"><h3>セミナー情報</h3></a></li> <li><a href="#access"><h3>アクセス</h3></a></li> <li><a href="#contact"><h3>お問い合わせ</h3></a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>このサイトについて</h1> </div> <div data-role="content"> <p><a href="#index">TOPページ</a></p> </div> <div data-role="footer"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="seminar"> セミナー情報 </div> <div data-role="page" id="access"> アクセス </div> <div data-role="page" id="contact"> お問い合わせ </div> </body>
角丸の立体的なメニュー
- ul要素にカスタムデータ属性「data-inset="true"」を付けると、角丸の立体的なメニューにもできます
<body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">メニュー</li> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><a href="#seminar"><h3>セミナー情報</h3></a></li> <li><a href="#access"><h3>アクセス</h3></a></li> <li><a href="#contact"><h3>お問い合わせ</h3></a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>このサイトについて</h1> </div> <div data-role="content"> <p><a href="#index">TOPページ</a></p> </div> <div data-role="footer"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="seminar"> セミナー情報 </div> <div data-role="page" id="access"> アクセス </div> <div data-role="page" id="contact"> お問い合わせ </div> </body>
