アフィリエイト大学
  1. アフィリエイト大学トップ
  2. スマホらしいリンクリストを簡単に作る

サイト制作

スマホらしいリンクリストを簡単に作る

更新日：2015/04/13 公開日：2012/07/09

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

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

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

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

スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用する方法を、過去数回にわたってご紹介してきました。

今回は、見やすくてタップしやすい形の「リンクリスト」を簡単に作る方法をご紹介いたします。
メニューやサイトマップなどを作る用途で特に役立ちますので、ぜひご活用ください。

まずは、下記のHTMLソースを保存して、スマートフォンのブラウザで表示させてみてください。
これは、最もシンプルなリンクリストを「jQuery Mobile」で作ったサンプルです。

  • ※以下のHTMLソースを保存する際には、文字コードを「UTF-8」にしないと全体が文字化けしてしまいますので注意してください。
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
   <title>jQuery Mobile リストのサンプルページ</title>
</head>
<body>

   <div data-role="page" id="pcontents">
      <div data-role="header">
         <h1>jQuery Mobile リストのサンプル</h1>
      </div>
      <div data-role="content">

         <!-- ▼リストの例 -->
         <ul data-role="listview" data-theme="c">
            <li><a href="apple.html">Apple</a></li>
            <li><a href="orange.html">Orange</a></li>
            <li><a href="grape.html">Grape</a></li>
         </ul>

      </div>
      <div data-role="footer">
         <h4>フッター</h4>
      </div>
   </div>

</body>
</html>

上記のHTMLソースをブラウザで表示すると、Apple・Orange・Grapeの３つのリンクが、メニュー項目のように横幅いっぱいに広がり、縦方向にぴったり並んで表示されます。

各項目の右端には、移動できることを示す矢印アイコンも付加されています。

上記が、「jQuery Mobile」でリンクリストを作る基本です。

書き方はとても簡単で、a要素を使って作るリンクを、ul要素とli要素を使ってリストの形にするだけです。

その際、ulタグには「data-role="listview"」という属性を加えておきます。

<ul data-role="listview">
   <li><a href="リンク先URL">リンク項目名</a></li>
   <li><a href="リンク先URL">リンク項目名</a></li>
   <li><a href="リンク先URL">リンク項目名</a></li>
</ul>
サンプルページ

このように、「jQuery Mobile」を使うと、スマートフォンで見やすく、タップしやすいリンクリストを簡単に作ることができます。

上記のサンプルでは、ただ３つのリンクを並べただけです。しかし、規模の大きなリストでは、複数の階層に分けた階層構造を作りたいと思うことも多いでしょう。

「jQuery Mobile」では、以下のようなリンクリストも簡単に作れます。

  • リンクの名称だけでなく、補足説明も一緒に加えて表示
  • 複数階層のリンクリストを、自動的に複数ページに分割して表示
  • 分類項目を付けて、リンクリストを分かりやすく表示
  • その階層に何項目含まれているのかを示す「子要素カウンタ」を付けた表示

続いてこれらの詳しい作り方についてご紹介いたします。

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

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

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

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

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

他の著者をもっと見る

ご注意ください

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

カテゴリーから探す

タグから探す

アフィリエイトを始めよう！
無料新規パートナー登録
広告主・代理店のかた
広告出稿はこちら