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

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」でスマホらしいページデザインを簡単に作る3(第1回)

  • publish_advertise
2012/06/05

 

 

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

 

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

 

今回は、ヘッダ(見出し)部分をタップすることでコンテンツ(中身)が表示される

「開閉式コンテンツ」の作り方をご紹介いたします。

 

スマートフォンは画面が狭いため、1ページ内にたくさんの情報を並べると、どこに何があるのかが分かりにくくなります。見やすさを確保する手段の1つが、前回ご紹介した複数ページに分割する方法です。

 

しかし、複数ページに分割するほどでもない情報や、複数ページに分割してしまうと逆に分かりにくくなる情報もあるでしょう。そこで便利なのが、ヘッダ(見出し)部分をタップすることによってコンテンツ(中身)が見えたり隠れたりする「開閉式コンテンツ」です。

 

この表示形態であれば、1ページ内にどのような情報があるのかが分かりやすくなる上、複数の項目を平行して閲覧したい場合でも便利です。

 

下記のHTMLソースは、「jQuery Mobile」を使って「開閉式コンテンツ」を作ったサンプルです。

 

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

 

 


▼サンプルHTML


 

 

※以下の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”>

 

<!– ▼開閉式コンテンツの例1 –>

<div data-role=”collapsible” data-theme=”c” data-content-theme=”c”>

<h3>開閉できるヘッダ1</h3>

<p>ここに中身を書きます。</p>

<ul>

<li>最初に記述した h3 要素がヘッダに使われます。</li>

<li>それ以降に記述したHTMLが「中身」(コンテンツ)になります。</li>

<li>中身には、自由にHTMLを記述できます。</li>

<li>このようにリストを書いても構いません。</li>

</ul>

<p>好きなように書けます。</p>

</div>

 

<!– ▼開閉式コンテンツの例2 –>

<div data-role=”collapsible” data-collapsed=”false” data-theme=”c” data-content-theme=”c”>

<h3>開閉できるヘッダ2</h3>

<p>

この中身は、最初から表示されています。(=初期状態で開いた状態になっています。)

ヘッダをクリックすると閉じます。

</p>

</div>

 

</div>

<div data-role=”footer”>

<h4>フッター</h4>

</div>

</div>

 

</body>

</html>

 


 

 

上記のHTMLをスマートフォンのブラウザで表示させると、タップすることで開閉するヘッダ(見出し)が2つ表示されます。

 

 

片方は中身が隠されており、もう片方は中身が最初から表示されています。

開閉式コンテンツを「jQuery Mobile」を使って作るのは、とても簡単です。

以下のHTMLソースを1セットとして記述します。

 

 


<div data-role=”collapsible”>

<h3>ヘッダ</h3>

<p>コンテンツ</p>

</div>


 

 

上記の4行を記述するだけで、「jQuery Mobile」によって「開閉式コンテンツ」として表示されます。

 

必要なだけ、並べて使ってください。先のサンプルソースでは、さらにオプションをいくつか使用しています。

 

 

上記のサンプルソースについての詳しい解説や、指定できるオプションに関する解説は、

次回にご紹介いたします。

 

 

【ご注意ください】

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

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

 

 

 

 

 

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

▲ページトップへ戻る

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

▲ページトップへ戻る