6-7-3-8. リストの作り方

リストをうまく使うと、ページ作成が楽になる。

1. リスト

	<ul>
		<li>xxxxxxx01</li>
		<li>xxxxxxx02</li>
		<li>xxxxxxx03</li>
	</ul>

2. 番号付きリスト

	<ol>
		<li>xxxxxxx01</li>
		<li>xxxxxxx02</li>
		<li>xxxxxxx03</li>
	</ol>
	

3. リストの入れ子 - 1

	<dl>
		<dt>xxxxxxx01</dt>
			<dd>yyyyyyy11</dd>
			<dd>yyyyyyy12</dd>
		<dt>xxxxxxx02</dt>
			<dd>yyyyyyy21</dd>
			<dd>yyyyyyy22</dd>
	</dl>
	

3. リストの入れ子 - 2

	<ul>
		<li>xxxxxxx01
			<ul>
				<li>yyyyyyy11</li>
				<li>yyyyyyy22</li>
			</ul>
		</li>
		<li>xxxxxxx02</li>
	</ul>
	

4. リストの文字サイズや色

	
<style type="text/css">
<!--
ol.a { font-size: 12px; color: red; }
li.a { color: blue; }
-->
</style>

		<ol class="a">南都七大寺(なんとしちだいじ)
			<li class="a">興福寺(こうふくじ、奈良市登大路町)</li>
			<li class="a">東大寺(とうだいじ、奈良市雑司町)</li>
			<li class="a">西大寺 (さいだいじ、奈良市西大寺芝町)</li>
			<li class="a">薬師寺(やくしじ、奈良市西ノ京町)</li>
			<li class="a">元興寺(がんごうじ、奈良市中院町、芝新屋町)</li>
			<li class="a">大安寺(だいあんじ、奈良市大安寺)</li>
			<li class="a">法隆寺(ほうりゅうじ、生駒郡斑鳩町)</li>
		</ol>
	



スポンサー リンク




開発ノウハウ等


スポンサー リンク