リストを使いこなそう (5/5)

■サムネイル表示について

この他、覚えておきたい使い方として２つほど紹介をしておきましょう。１つは「サムネイル表示」です。リストの項目にサムネイル画像をつけるには、<li>内に<img>タグを用意します。これで、リストの左端に画像が表示されるようになります。

注意すべきは、画像のサイズです。これは80×80ドットの正方形に自動調整をされます。それより大きくても自動的に調整はされますが、例えば横長の図形などは下に余白が表示されたような状態となってしまいます。あらかじめ80ドット四方に調整したイメージを用意したほうが良いでしょう。

■差し込みリスト

もう１つ、「差し込みリスト」についても触れておきましょう。iPhoneなどでは、ページの中に、１つの部品としてリストを表示する場合、角を丸くした四角形のような形でリストが表示されます。このようなスタイルをjQuery Mobileでは「差し込みリスト」といいます。通常のリストは、ページ＝リストというように、ページがまるごとリストのような形になりますが、差し込みリストはあくまで「ページ内の１要素」としてリストを表示するのに適しています。

差し込みリストとしてリストを表示する場合は、以下のようにdata-inset="true"という属性を用意することで、差し込みリストとして表示することができます。

<ul data-role="listview" data-inset="true">

――以上、<ul><li>タグを使ったリストの表示の基本的な使い方について説明しました。リスト表示には、この他にも細かな機能があります。ボタンを左右に分割表示したり、アイコンを表示させたりすることもできます。また<ol>タグを使うことで番号付きリストを表示させることも可能です。

リストは、スマートフォンでは非常に使われるシーンが多いので、基本的な使い方をここでよく理解しておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※サムネイル表示
<!-- home page -->
<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
		<p>※リスト表示のサンプル。</p>
		<ul data-role="listview">
			<li><img src="sample1.jpg">One</li>
			<li><img src="sample2.jpg">Two</li>
			<li><img src="sample3.jpg">Three</li>
		</ul>
	</div>
</div>


※差し込みリスト
<!-- home page -->
<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
		<p>※リスト表示のサンプル。</p>
		<ul data-role="listview" data-inset="true">
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
	</div>
</div>

<< 前へ　

記事のリストに戻る

PC Site G+ mail