こんにちは。All About ホームページ作成ガイドの西村文宏です。
今回は、スマートフォンでも見やすくて使いやすいページ移動を実現する方法をご紹介いたします。
「jQuery Mobile」を活用して見やすく使いやすいウェブサイトにするには
スマートフォンは画面が狭いため、読みやすい文字サイズで表示する場合は、１画面内にあまり多くの情報を収められません。そのため、PC用サイトを閲覧するには、拡大・縮小操作や、長いスクロールが必要になることがあります。
スマートフォン専用サイトでは、１ページの内容を少なくしておき、必要に応じてページを切り替えて閲覧する形にしておく方が、拡大・縮小や長いスクロールを求めずに済み、分かりやすくなる場合もあります。
しかし、通常のページ移動では、読み込みの待ち時間があるため、操作がもたついてしまうデメリットがあります。
そこで便利なのが、１つのHTMLファイル内に複数ページのデータを収録できる「jQuery Mobile」の機能です。次のページを読み込む待ち時間がないため、ストレスなくページを切り替えられます。指で押しやすいデザインのメニューと組み合わせることで、分かりやすく使いやすいスマートフォン用サイトになります。
下記のHTMLソースは、文法上は「１つのHTML」です。しかし、スマートフォン用ページのデータを３ページ分ほど含んでいます。
実際にスマートフォンのブラウザで表示させて、確認してみてください。
最初に表示されるのは「目次ページ」だけです。ユーザがメニュー項目を押すと、横方向にスライドする効果と共に、「1ページ目」や「2ページ目」が表示されます。
- ※以下の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-inset="true">
<li data-role="list-divider">CONTENTS</li>
<li>
<a href="#p1">
<h2>jQuery Mobile サンプルページ1</h2>
<p>単一のHTML内に複数のページを含められます。</p>
</a>
</li>
<li>
<a href="#p2">
<h2>jQuery Mobile サンプルページ2</h2>
<p>実際の表示とHTMLソースとを比較してみて下さい。</p>
</a>
</li>
</ul>
</div>
<div data-role="footer">
<p>フッター</p>
</div>
</div>
<!-- ▼中身1ページ目 -->
<div data-role="page" id="p1">
<div data-role="header">
<h1>jQuery Mobile のサンプル（中身1ページ目）</h1>
</div>
<div data-role="content">
<p>ここは、独立した1つのページに見えますが、ソースを見ると
全ページが同じHTML内に含まれていることが分かります。</p>
<p><a href="#pcontents" data-rel="back" data-role="button"
data-icon="arrow-l" data-inline="true">目次に戻る</a></p>
</div>
<div data-role="footer">
<p>フッター</p>
</div>
</div>
<!-- ▼中身2ページ目 -->
<div data-role="page" id="p2">
<div data-role="header">
<h1>jQuery Mobile のサンプル（中身2ページ目）</h1>
</div>
<div data-role="content">
<p>ページの移動には、デフォルトではスライドのエフェクトが掛かっています。</p>
<p><a href="#pcontents" data-rel="back" data-role="button"
data-icon="arrow-l" data-inline="true">目次に戻る</a></p>
</div>
<div data-role="footer">
<p>フッター</p>
</div>
</div>
</body>
</html>上記のHTMLをスマートフォンのブラウザで表示させると、指で押しやすいメニューが表示されます。
メニュー項目を押すと、待ち時間なくページを移動できます。
★上記のHTMLをアップしたサンプルページ
このように、「jQuery Mobile」を活用すると、スマートフォンで見やすく使いやすいウェブサイトを簡単に作れます。
続いて、上記のソースについての詳しい解説をしていきます。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら