各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

「jQuery Mobile」でスマホらしいページデザインを簡単に作る2(第1回)

  • publish_advertise
2012/04/12

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」というフレームワークを使って、ヘッダやフッタ、ボタン型リンクをスマートフォンらしいデザインで表示させる方法をご紹介いたしました。

 

今回は、スマートフォンでも見やすくて使いやすいページ移動を実現する方法をご紹介いたします。

 

スマートフォンは画面が狭いため、読みやすい文字サイズで表示する場合は、1画面内にあまり多くの情報を収められません。

 

そのため、PC用サイトを閲覧するには、拡大・縮小操作や、長いスクロールが必要になることがあります。

 

スマートフォン専用サイトでは、1ページの内容を少なくしておき、必要に応じてページを切り替えて閲覧する形にしておく方が、拡大・縮小や長いスクロールを求めずに済み、分かりやすくなる場合もあります。

 

しかし、通常のページ移動では、読み込みの待ち時間があるため、操作がもたついてしまうデメリットがあります。

 

そこで便利なのが、1つのHTMLファイル内に複数ページのデータを収録できる「jQuery Mobile」の機能です。

 

次のページを読み込む待ち時間がないため、ストレスなくページを切り替えられます。

 

指で押しやすいデザインのメニューと組み合わせることで、分かりやすく使いやすいスマートフォン用サイトになります。

 

下記のHTMLソースは、文法上は「1つのHTML」です。しかし、スマートフォン用ページのデータを3ページ分ほど含んでいます。

 

実際にスマートフォンのブラウザで表示させて、確認してみて下さい。

 

最初に表示されるのは「目次ページ」だけです。ユーザがメニュー項目を押すと、横方向にスライドする効果と共に、「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をアップしたサンプルページ
http://labs.accesstrade.net/atmws_src/im6-sample.html


 

このように、「jQuery Mobile」を活用すると、スマートフォンで見やすく使いやすいウェブサイトを簡単に作れます。

 

上記のソースについての詳しい解説は、次回にご紹介いたします。

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、アクセストレードが運営するものではありません。必ず使用方法や注意事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセストレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.04.17
「jQuery Mobile」でスマホらしいページデザインを簡単に作る2(第2回)
2012.04.19
「jQuery Mobile」でスマホらしいページデザインを簡単に作る2(第3回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る