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

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
2013/06/26

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

 

今まで、スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を使って、様々な形態のリストを作る方法をご紹介してきました。

 

今回は、リスト関連機能をご紹介する最後として、リスト全体(外枠)の見栄えを変える方法をご紹介いたします。

 

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

 

サンプルページはコチラ

 

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

 


<p>■A:「data-inset=”true”」を書いた場合</p>

<ul data-role=”listview” data-inset=”true”>
<li data-role=”list-divider”>関東</li>
<li><a href=”tk.html”>東京駅</a></li>
<li><a href=”sg.html”>品川駅</a></li>
<li><a href=”sy.html”>新横浜駅</a></li>
:   :   :
</ul>

<p>■B:「data-inset=”true”」を書かなかった場合</p>

<ul data-role=”listview”>
<li data-role=”list-divider”>関東</li>
<li><a href=”tk.html”>東京駅</a></li>
<li><a href=”sg.html”>品川駅</a></li>
<li><a href=”sy.html”>新横浜駅</a></li>
:   :   :
</ul>


 

 

先の「A」は、リスト全体が画面の横幅一杯には広がらず、少し内側に狭まって、立体的なボタンのようになって表示されます。

 

「B」は、リスト全体が画面の横幅一杯に広がって表示されます。AとBの違いは、ul要素に記述した属性の有無だけです。

 


A: <ul data-role=”listview” data-inset=”true”>
B: <ul data-role=”listview”>


 

上記Aのように、リストを作るul要素に「data-inset」属性を加えて、

値に「true」を指定すると、リストを少しだけ内側に配置し、角を丸くした上で、立体的に見せることができます。

好みに応じて活用してみてください。

 

さて、前々月から今月まで、スマートフォンで操作しやすい様々なリストをスマートフォンらしいデザインで作る方法をご紹介いたしました。

 

今回で、リストに関する解説は終わりです。

 

スマートフォン向けサイトのメニューなどに、ぜひ、ご活用ください。

 


【ご注意ください】

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

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

 

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2012.10.16
検索フィルタ付きリストを作る
2012.10.23
タップしやすいリストを作る(まとめ)

▲ページトップへ戻る

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

▲ページトップへ戻る