<h1>ヘッダ1（h1）</h1>
<h2>ヘッダ2（h2）</h2>
<h3>ヘッダ3（h3）</h3>
<h4>ヘッダ4（h4）</h4>
<h5>ヘッダ5（h5）</h5>
<h6>ヘッダ6（h6）</h6>

<p>ここに最初の段落を記述します。ここに最初の段落を記述します。
ここに最初の段落を記述します。ここに最初の段落を記述します。</p>
<p>ここは2番目の段落です。ここは2番目の段落です。
ここは2番目の段落です。ここは2番目の段落です。</p>
<p>ここは3番目の段落です。</p>

<p>ここは通常のパラグラフです。ここは通常のパラグラフです。
ここは通常のパラグラフです。</p>
<blockquote>ここは、引用です。ここは、引用です。
ここは、引用です。ここは、引用です。<cite>出展（cite）</cite></blockquote>
</blockquote>
<p>ここは通常のパラグラフです。ここは通常のパラグラフです。
ここは通常のパラグラフです。</p>

<ul>
	<li>項番無しリスト アイテム1</li>
	<li>項番無しリスト アイテム2</li>
	<li>項番無しリスト アイテム3</li>
</ul>
<ol>
	<li>項番付きリスト アイテム1</li>
	<li>項番付きリスト アイテム2</li>
	<li>項番付きリスト アイテム3</li>
</ol>

<dl title="定義リスト">
	<dt>定義タイトル</dt>
	<dd>ここは定義の内容です。ここは定義の内容です。
	ここは定義の内容です。ここは定義の内容です。ここは定義の内容です。</dd>
	<dt>定義タイトル</dt>
	<dd>ここは定義の内容です。ここは定義の内容です。
	ここは定義の内容です。ここは定義の内容です。ここは定義の内容です。</dd>
	<dt>定義タイトル</dt>
	<dd>ここは定義の内容です。ここは定義の内容です。
	ここは定義の内容です。ここは定義の内容です。ここは定義の内容です。</dd>
</dl>

<div class="ui-grid-a">
	<div class="ui-block-a"><button>ブロックA</button></div>
	<div class="ui-block-b"><button>ブロックB</button></div>
</div>

<div class="ui-grid-a">
	<div class="ui-block-a"><button>ブロックA</button></div>
	<div class="ui-block-b"><button>ブロックB</button></div>
	<div class="ui-block-c"><button>ブロックC</button></div>
</div>

<div class="ui-grid-c">
	<div class="ui-block-a"><button>ブロックA</button></div>
	<div class="ui-block-b"><button>ブロックB</button>
	<button>ブロックBB</button><button>ブロックBBB</button></div>
	<div class="ui-block-c"><button>ブロックC</button></div>
	<div class="ui-block-d"><button>ブロックD</button>
	<button>ブロックDD</button></div>
	<div class="ui-block-a"><button>ブロックA</button></div>
	<div class="ui-block-b"><button>ブロックB</button></div>
	<div class="ui-block-c"><button>ブロックC</button></div>
	<div class="ui-block-d"><button>ブロックD</button></div>
</div>

<div data-role="collapsible">
	<h3>開閉可能なブロックとは</h3>
	<p>ヘッダ要素が定常的に表示され、内容部分はヘッダをクリック（タップ）
	することで開閉されます。
	これによって、小さなディスプレイでもコンテンツ全体の一覧性が
	良くなります。</p>
</div>

<div data-role="collapsible" data-collapsed="false">
	<h3>開閉可能なブロックとは</h3>
	<p>ヘッダ要素が定常的に表示され、内容部分はヘッダをクリック（タップ）
	することで開閉されます。
	これによって、小さなディスプレイでもコンテンツ全体の一覧性が
	良くなります。</p>
</div>

<div data-role="collapsible" data-theme="a" data-content-theme="a">
	<h3>テーマA + A</h3>
	<p>ヘッダ、コンテンツ部分共に色見本Aを指定した場合</p>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="d">
	<h3>テーマB + D</h3>
	<p>ヘッダに色見本B、コンテンツ部分に色見本Dを指定した場合</p>
</div>
<div data-role="collapsible" data-content-theme="c">
	<h3>テーマC</h3>
	<p>コンテンツ部分だけに色見本Cを指定した場合</p>
</div>

<div data-role="collapsible-set">
	<div data-role="collapsible" data-collapsed="false">
		<h3>セクション1</h3>
		<p>アコーディオン式の開閉ブロックは、グループ内のいずれか
		1ブロックだけが開いた状態になります。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション2</h3>
		<p>そのため、どこかを開いた状態で他のヘッダをタップすると、
		最初に開いていたブロックは自動的に閉じられます。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション3</h3>
		<p>全てのブロックを閉じることは可能です。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション4</h3>
		<p>最初に開いて億ブロックはdata-collapsed="false"を
		指定します。</p>
	</div>
</div>

<div data-role="collapsible-set" data-theme="a" data-content-theme="c">
	<div data-role="collapsible" data-collapsed="false">
		<h3>セクション1</h3>
		<p>アコーディオン式の開閉ブロックは、グループ内のいずれか
		1ブロックだけが開いた状態になります。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション2</h3>
		<p>そのため、どこかを開いた状態で他のヘッダをタップすると、
		最初に開いていたブロックは自動的に閉じられます。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション3</h3>
		<p>全てのブロックを閉じることは可能です。</p>
	</div>
	<div data-role="collapsible">
		<h3>セクション4</h3>
		<p>最初に開いて億ブロックはdata-collapsed="false"を
		指定します。</p>
	</div>
</div>