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

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(第2回)

  • publish_advertise
2012/04/17

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

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、1つのHTMLファイル内に複数ページのデータを収録し、ストレスないページ切り替えと、押しやすいメニューを作る方法をご紹介いたしました。

 

今回は、前回のHTMLソースの内容について、簡単に解説いたします。

 


◆「jQuery Mobile」で1ページを表す記述


 

1つのHTMLファイル内に複数のページを含める場合、「jQuery Mobile」では、以下のようなdiv要素を使って1ページの範囲を表します。

 


<div data-role=”page” id=”xxx”> ~ </div>


 

data-role属性に値「page」を指定し、id属性には任意の(他と重複しない)名前を記述します。

 

この範囲が「1ページ」になります。以下のように記述すると、3ページ分のデータを含めたことになります。

 


<div data-role=”page” id=”apple”>
~ 1ページ目 ~
</div>
<div data-role=”page” id=”orange”>
~ 2ページ目 ~
</div>
<div data-role=”page” id=”grape”>
~ 3ページ目 ~
</div>


 

ブラウザでアクセスした際に表示されるのは、最初に記述された1ページ目の中身だけです。

 


◆2ページ目以降を表示させるリンク


 

他のページへは、以下のように「ページ内リンク」を作る要領でリンクを記述することで移動できます。

 


<a href=”#orange”>2ページ目へ</a>
<a href=”#grape”>3ページ目へ</a>


 

したがって、以下のように記述すると、1ページ目が「目次」として機能するようになります。

 


<div data-role=”page” id=”apple”>
~ 目次ページ ~
<a href=”#orange”>2ページ目へ</a>
<a href=”#grape”>3ページ目へ</a>
</div>
<div data-role=”page” id=”orange”>
~ 2ページ目 ~
<a href=”#apple”>目次へ戻る</a>
</div>
<div data-role=”page” id=”grape”>
~ 3ページ目 ~
<a href=”#apple”>目次へ戻る</a>
</div>


 

以上の記述だけで、横方向にスライドする効果を伴った、ストレスないページ移動が実現できます。

 

ただ、上記の記述では「指で押しやすいメニュー」にはなっていません。その作り方については、次回にご紹介いたします。

 

 

【ご注意ください】

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

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

 

 

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る