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

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

  • publish_advertise
2012/04/19

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

 

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

 

今回は、指で押しやすいメニューを作る方法について解説いたします。

 


◆指で押しやすいメニューを作る


 

前々回にご紹介したサンプルHTMLソースから、メニューを作っている部分だけを抜き出すと、以下のようになります。

 


<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>


 

上記は、ul要素とli要素で作る一般的な「リスト」の形になっています。

 

ul要素にdata-role属性を加えて値に「listview」を指定すると、「jQuery Mobile」のリストビュー機能によって、リスト項目(リンク)が画面の横幅いっぱいに表示されます。

 

他には特に何も指定しなくても、各項目の右端に矢印アイコンが加えられるなど、スマートフォンらしいデザインで描画されます。

 


◆メニュー項目を作る


 

各メニュー項目は、li要素を使って作ります。

特別な記述を付加する必要はなく、ただli要素を使ってリスト項目を作り、その中にa要素を使ってリンクを作るだけで、スマートフォンらしいデザインになります。

 

上記のサンプルでは2項目しかありませんが、個数に制限はありませんので必要なだけ追加して下さい。

 


◆リストのヘッダ部分やグループ分け部分


 

li要素にdata-role属性を加え、値に「list-divider」を指定して以下のように記述すると、「メニューのヘッダ」や「メニュー項目をグループ分けするための特殊な項目」が作れます。

 


<li data-role=”list-divider”>CONTENTS</li>


 

使わなくても問題ありませんが、リストの先頭に指定しておくと、見栄えの良いメニューになるでしょう。

 

これまで3回に分けて、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、見やすいメニューを用意し、ストレスないページ移動を可能にする方法をご紹介いたしました。

 

ぜひ、活用してみて下さい。

 

【?】アフィリエイト用語集

「li要素」とは?

「ul要素」とは?

 

 

【ご注意ください】

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

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

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る