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

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/

タップしやすいリストを作る(まとめ)

  • publish_advertise
2012/10/23

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

 

前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、リストに「検索フィルタ」欄を加える方法をご紹介いたしました。

 

今回は、前々月から今月までの間にご紹介してきた「リストの作成方法」を組み合わせた、少し複雑なリストの一例をご紹介いたします。

 

まずは、下記のサンプルページをスマートフォンのブラウザ等でご覧ください。

 


サンプルページはコチラ


 

以下は、上記のサンプルページのHTMLソースから、一部を抜き出したものです。
リストを構成する「見出し」と「項目」を1つずつ抜き出しています。

 

 


<ul data-role=”listview”>
:   :   :

<li data-role=”list-divider”>北アメリカ (North America) <span>2</span></li>

<li><a href=”ca.html”>
<h3>カナダ</h3>
<p><strong>Canada</strong></p>
<p>北アメリカ大陸北部に位置する連邦立憲君主制国家。イギリス連邦加盟国。首都はオタワ。</p>
<p>通貨:<strong>カナダドル($)</strong></p>
</a></li>

:   :   :
</ul>


 

このサンプルページには、大きめの凝ったリスト項目が8個並んでいます。

このようなリスト項目も、簡単に作ることができます。
以下に、HTMLソース内の各部分の意味を簡単にご紹介いたします。

 

 


■<ul data-role=”listview”> ~ </ul>


ul要素を使ってリストを作ります。

このとき、「data-role=”listview”」属性の記述は必須です。

常に、コピー&ペーストして使うと良いでしょう。

 

 


■<li data-role=”list-divider”>北アメリカ ~ <li>


li要素に属性「data-role=”list-divider”」を加えると、分類項目(区切り)が作れます。

項目数の多いリストを作る際には、適度に分類項目を設けておくと、

見やすいリストになります。

 

 


■<span>2</span>


span要素に属性「class=”ui-li-count”」を加えると、

項目の右端に「丸囲みの数字」を表示できます。

ここでは、「その分類に含まれる項目数」を表す目的で使っていますが、

用途は何でも構いません。

 

分かりやすいリストになるよう自由に活用してみてください。

 

 


■<li><a href=”ca.html”> ~ </a></li>


li要素とa要素を使って、1つのリスト項目を作ります。

このように、li要素のすぐ内側全体をa要素で囲めば、

項目内のどこでもクリック(タップ)できる「リンク項目」になります。

上記の場合、リンク先は ca.html になります。

リンク先が存在しない場合は「Error Loading Page」というエラーが表示されます。

 

 


■<h3>カナダ</h3>、<p>北アメリカ大陸北部に ~ </p>


項目内に表示するコンテンツとして、h3要素で項目名を、p要素で文章を作ります。

通常の表示とは異なり、ブラウザの表示領域に収まりきらない分は、

(右端で折り返されて複数行にはならずに)自動的に「…」で省略されます。

 

 


■<p>通貨:<strong>カナダドル</strong></p>


p要素に属性「class=”ui-li-aside”」を加えると、

項目の右肩に小さく表示されるようになります。

 

補足情報などを表示する用途に使うと便利です。

このように、様々な要素を組み合わせて、大きな項目を作ることもできます。

過去にご紹介したリスト関連機能は、上記以外にも自由に組み合わせて使えます。

 

過去の記事を参考に、望みの項目を作ってみてください。

 

次回は、リスト関連機能の解説の最後として、リスト全体の表示形態を変え

る方法をご紹介いたします。

 

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  続きを読む>>
続編
2012.10.16
検索フィルタ付きリストを作る
2013.06.26
タップしやすいインセットリストを作る

▲ページトップへ戻る

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

▲ページトップへ戻る