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>




PAGE TOP ▲

開発ノウハウ等