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

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/06/14

 

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

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、画面が込み入ってしまうのを防ぎつつ、複数項目の中から同時に1つだけを表示できる「アコーディオン式コンテンツ」をご紹介いたしました。

 

今回は、その「アコーディオン式コンテンツ」の作り方を解説いたします。

 

 


◆「jQuery Mobile」でアコーディオン式コンテンツを作る基本の記述


 

「アコーディオン式コンテンツ」を構成する1つ1つの項目は、「開閉式コンテンツ」を作る場合とまったく同じ記述で作ります。

 

下の4行のHTMLソースで1項目になります。

 


<div data-role=”collapsible”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>


 

この項目を、必要なだけ並べて記述してください。
その上で、それらすべての項目を以下のdiv要素で囲みます。

 


<div data-role=”collapsible-set”> ~ </div>


 

各項目では、最初に記述したh3要素が「ボタンを兼ねたヘッダ(見出し)」として表示されます。たとえば、全部で3項目ある「アコーディオン式コンテンツ」を作る場合は、以下のような記述になります。

 


<!– ▼アコーディオン –>
<div data-role=”collapsible-set”>

<!– ▼1項目 –>
<div data-role=”collapsible” data-collapsed=”false”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>

<!– ▼2項目 –>
<div data-role=”collapsible”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>

<!– ▼3項目 –>
<div data-role=”collapsible”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>

</div>


 

各項目では、最初に記述したh3要素が「ボタンを兼ねたヘッダ(見出し)」として表示されます。

 

その後に続くHTMLが「コンテンツ(中身)」として表示されます。コンテンツ部分には必ずしもp要素を使う必要はありません。

どんなHTMLを何行でも自由に記述できます。

 

なお、先頭の項目には、以下のようにdiv要素に「data-collapsed=”false”」を加えて、中身が最初から表示されるよう設定しています。

このようにすると、よりアコーディオンらしく見えます。

 


<!– ▼1項目 –>
<div data-role=”collapsible” data-collapsed=”false”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>


 

この「data-collapsed=”false”」は、複数の項目のうち、どれか1つにだけしか付加できない点に注意してください。

複数の項目に付加してしまうと、「ヘッダは閉じているデザインなのに、同時に中身が表示されている」という、おかしな表示になってしまいます。

 

 


◆ヘッダやコンテンツ部分のデザインを指定する


 

各項目のヘッダやコンテンツ部分には、個別にデザインを指定できます。ヘッダ部分のデザインを指定するには「data-theme属性」を付加し、コンテンツ部分のデザインを指定するには「data-content-theme属性」を付加します。

 


<div data-role=”collapsible” data-theme=”e” data-content-theme=”c”>
<h3>ヘッダ</h3>
<p>コンテンツ</p>
</div>


 

上記のソースでは、「 data-theme=”e” 」でヘッダのデザインにテーマEを適用し、

「 data-content-theme=”c” 」でコンテンツのデザインにテーマCを適用しています。

 

 


◆入れ子構造を作る際の注意


 

この「アコーディオン式コンテンツ」は、コンテンツの中にさらに別の「アコーディオン式コンテンツ」を含める「入れ子構造」も作れます。

 

しかし、「アコーディオン式コンテンツ」の中に、「開閉式コンテンツ」を含めることはできません。

 

「アコーディオン式コンテンツ」の内側に「開閉式コンテンツ」を記述しても、すべてアコーディオン式の表示になってしまいます。

 

また、そもそも「アコーディオン式コンテンツ」を入れ子構造にすると、どこに何があるのかが分かりにくくなります。

 

よほどの必要性がない限り、入れ子構造にはしない方が良いでしょう。どうしても入れ子にする場合は、デザインテーマを分けて配色で差を付けるなど、分かりやすくなるよう工夫をしてみてください。

 

今回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、複数項目の中から同時に
1つだけを表示できる「アコーディオン式コンテンツ」の作り方をご紹介いたしました。

 

ぜひ、活用してみてください。

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2012.06.12
jQuery Mobileを使ってアコーディオン式コンテンツを作る(第1回)

▲ページトップへ戻る

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

▲ページトップへ戻る