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

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

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

 

これまで、スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用して、見やすくてタップしやすい様々な形のリストを簡単に作る方法をご紹介してきました。

 

リスト関連の解説としては最後になる今回は、リスト項目内を検索できるようにする方法や、これまでご紹介してきた作り方を複合させたリストの作り方などをご紹介いたします。

 

「jQuery Mobile」で作るリスト機能は、ナビゲーション用のメニューとしても便利に活用できます。ぜひご活用ください。

 

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

 


サンプルページはコチラ


 

以下は、上記のサンプルページのHTMLソースから一部を抜き出したものです。

 


<ul data-role=”listview” data-filter=”true”>
<li data-role=”list-divider”>EU加盟国</li>
<li><a href=”eu01.html”>オーストリア</a></li>
<li><a href=”eu02.html”>ベルギー</a></li>
<li><a href=”eu03.html”>ブルガリア</a></li>
:      :      :
<li><a href=”eu26.html”>スウェーデン</a></li>
<li><a href=”eu27.html”>イギリス</a></li>
</ul>


 

このサンプルページには、リストの先頭に「Filter items…」と書かれた「検索フィルタ」欄が表示されています。

 

この「検索フィルタ」欄に文字を入力すると、自動的にその文字を含む項目のみが、リストアップされるようになります。

 

例えば、全角カタカナ文字で「リア」とだけ入力すると、「オーストリア」・「ブルガリア」・「イタリア」の3項目だけが表示されます。

 

また、「ランド」と入力すると、「フィンランド」・「アイルランド」・「ポーランド」の3項目だけが表示されます。

 

入力内容を削除するか、右端の「×」ボタンをタップすると、リストは初期状態の27項目に戻ります。このように、リスト内に項目がたくさんある場合に、表示項目を絞る目的で便利に活用できます。

 

スマートフォンは画面が小さいため、読みやすい文字サイズで表示すると、一度に表示できる項目量には限りがあります。

 

項目数が多いメニューを作る際には、このような検索フィルタを用意しておくと、使いやすくなるでしょう。この「検索フィルタ」は、リストを作るul要素に、「data-filter」という属性を追加し、以下のように記述するだけで作れます。

 


<ul data-role=”listview” data-filter=”true”>


 

たったこれだけの記述で、リストの上部に「検索フィルタ」欄を加えることができます。必要に応じて、活用してみてください。

次回は、これまでご紹介してきたリスト作成方法を組み合わせた「複合リスト」の作り方をご紹介いたします。

 

 

 

【ご注意ください】

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

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.10.23
タップしやすいリストを作る(まとめ)
2013.06.26
タップしやすいインセットリストを作る

▲ページトップへ戻る

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

▲ページトップへ戻る