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

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

  • publish_advertise
2012/03/15

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

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」というフレームワークをご紹介いたしました。

 


「jQuery Mobile」ダウンロードページ※英語サイト


 

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

前回にご紹介したHTMLソースのうち、body要素の内容は以下の通りでした。

 


<div data-role=”page”>

<div data-role=”header”>
<h1>jQuery Mobile のサンプル</h1>
</div>

<div data-role=”content”>
<p>ページの中身をここに記述。</p>
<p><a href=”(URL)” data-role=”button” data-icon=”check”>押しやすいリンク</a></p>
</div>

<div data-role=”footer”>
<p>フッター</p>
</div>

</div>


 

ここでは、div要素やa要素に「data-role」や「data-icon」などの、見慣れない属性が使われています。これらは、「jQuery Mobile」の機能を利用するための独自の記述です。

 

このような「data-」で始まる属性名は、自由に属性を付加できる「独自データ属性」として、HTML5で用意されている機能なので、使用しても文法エラーにはなりません。安心して使ってください。

 

以下に、上記ソースでの「jQuery Mobile」に関係する箇所を、簡単に解説いたします。

 


■ページ: <div data-role=”page”> ~ </div>


 

1ページ全体は <div data-role=”page”> ~ </div> で囲みます。

詳しい説明は割愛しますが、「jQuery Mobile」では、1つのHTMLファイル内に複数ページ分の情報を記述でき、ページ移動をスムーズにすることができます。

そのため、このような「1ページの範囲」を表す記述が用意されています。

 


■ヘッダ: <div data-role=”header”> ~ </div>


 

スマートフォンらしいデザインのヘッダを作ります。

標準では、黒色をベースにしたグラデーションで表示されます。

もし、開始タグを <div data-role=”header” data-theme=”b”> と記述すれば、黒色ではなく青色をベースにしたグラデーションで表示されます。「jQuery Mobile」には、a~eまで5種類のデザインが用意されており、上記のように「data-theme」属性を使って指定できます。

 


■ページの中身: <div data-role=”content”> ~ </div>


 

ページの中身は <div data-role=”content”> ~ </div> の中に記述します。

記述する内容に特に制約はありません。何でも自由に記述してください。

 


■押しやすいリンク: <a href=”(URL)” data-role=”button” …> ~ </a>


 

リンクを作るa要素に「data-role=”button”」という属性を付加すると、ボタン型に装飾して表示されます。これによって、スマホらしい「押しやすいボタン」に見えます。

 

このとき「data-icon=”check”」という属性も付加すると、ボタンの左端にチェックアイコンが付加されます。このアイコンには複数種類が用意されています。

 

例えば、

「data-icon=”star”」なら星形アイコンが、

「data-icon=”home”」なら家アイコンが、

「data-icon=”search”」なら検索(虫眼鏡)アイコンがそれぞれ付加されます。
テーマの指定を追加すれば、配色も変化します。

 

例えば、追記するのが

 

「data-theme=”b”」なら青色をベースにした配色が、

「data-theme=”e”」なら黄色をベースにした配色が、

それぞれ表示されます。

 


■フッタ: <div data-role=”footer”> ~ </div>


 

『スマホらしいデザイン』のフッタを作ります。

ヘッダもフッタも特に必須ではないので、不要なら省略しても構いません。

 

しかし、『スマホらしいデザイン』に見せるためには、使っておく方が良いでしょう。

 

今回は、スマートフォン専用サイトをこれから作ろうと考える際に問題になる「『スマホらしいデザイン』をどうやって作るか」という点を、楽に解決する方法として「jQuery Mobile」をご紹介しました。

 

「jQuery Mobile」には、今回ご紹介した以外にもたくさんの機能があります。ぜひ、活用してみてください。

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る