アフィリエイト大学
  1. アフィリエイト大学トップ
  2. タップしやすいインセットリストを作る

サイト制作

タップしやすいインセットリストを作る

更新日：2015/04/13 公開日：2012/10/30

西村 文宏 （ニシムラ フミヒロ）

All About ホームページ作成ガイド

西村 文宏 （ニシムラ フミヒロ）

こんにちは。All About ホームページ作成ガイドの西村文宏です。

今回は、スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を使って、リスト全体（外枠）の見栄えを変える方法をご紹介いたします。

まずは、下記のサンプルページをスマートフォンのブラウザ等でご覧ください。

サンプルページ

以下は、上記のサンプルページのHTMLソースから、一部を抜き出したものです。

<p>■Ａ：「data-inset="true"」を書いた場合</p>

<ul data-role="listview" data-inset="true">
   <li data-role="list-divider">関東</li>
   <li><a href="tk.html">東京駅</a></li>
   <li><a href="sg.html">品川駅</a></li>
   <li><a href="sy.html">新横浜駅</a></li>
  　　　 ：　　　：　　　：
</ul>

<p>■Ｂ：「data-inset="true"」を書かなかった場合</p>

<ul data-role="listview">
   <li data-role="list-divider">関東</li>
   <li><a href="tk.html">東京駅</a></li>
   <li><a href="sg.html">品川駅</a></li>
   <li><a href="sy.html">新横浜駅</a></li>
  　　　 ：　　　：　　　：
</ul>

先の「Ａ」は、リスト全体が画面の横幅一杯には広がらず、少し内側に狭まって、立体的なボタンのようになって表示されます。「Ｂ」は、リスト全体が画面の横幅一杯に広がって表示されます。

ＡとＢの違いは、ul要素に記述した属性の有無だけです。

　Ａ： <ul data-role="listview" data-inset="true">
　Ｂ： <ul data-role="listview">

上記Ａのように、リストを作るul要素に「data-inset」属性を加えて、値に「true」を指定すると、リストを少しだけ内側に配置し、角を丸くした上で、立体的に見せることができます。
好みに応じて活用してみてください。

これで、リストに関する解説は終わりです。
スマートフォン向けサイトのメニューなどに、ぜひ、ご活用ください。

SHARE
西村 文宏 （ニシムラ フミヒロ）

All About ホームページ作成ガイド

西村 文宏 （ニシムラ フミヒロ）

2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう！
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら