Home > 備忘録 > Web page 作成 > リストスタイル > 複雑なリストスタイル( 59 )

複雑なリストスタイル

1. HTML

<div class="jisaku1">
	<ol class="jisaku2">
		<li>北海道</li>
		<li>本州
			<ol class="jisaku2">
				<li>山形県
					<ol>
						<li>鶴岡市</li>
						<li>西置賜郡白鷹町</li>
						<li>南陽市</li>
					</ol>
				</li>
				<li >広島県</li>
				<li>愛知県
					<ol>
						<li>尾張旭市</li>
						<li>北設楽郡設楽町</li>
						<li>安城市</li>
					</ol>
				</li>
				<li>茨城県</li>
			</ol>
		</li>
		<li>四国
			<ol>
				<li>高知県</li>
				<li>愛媛県
					<ol>
						<li>宇和島市</li>
						<li>西予市
							<ol>
								<li>明浜町狩浜</li>
								<li>宇和町明間</li>
								<li>城川町遊子谷</li>
							</ol>
						</li>
						<li>新居浜市</li>
					</ol>
				</li>
				<li>香川県</li>
			</ol>
		</li>
		<li>九州
			<ol class="jisaku2">
				<li>大分県</li>
				<li>宮崎県</li>
				<li>鹿児島県</li>
				<li>長崎県
					<ol class="jisaku2">
						<li>大村市</li>
						<li>対馬市</li>
						<li>松浦市</li>
						<li>佐世保市</li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>
</div>

2. スタイルシート

.jisaku1 ol{
	list-style: none;
	counter-reset:item;
}
.jisaku1 li::before{
	content: "("counters(item, ".") ").";
	counter-increment: item;
	margin-left: -1em;
}
/*--------------*/
ol.jisaku2{
	list-style: none;
	counter-reset:item2;
}
ol.jisaku2 > li::before{
	content: "("counters(item2, ".") ").";
	counter-increment: item2;
	margin-left: -1em;
}

3. 実行結果
1. 北海道
2. 本州
   1. 山形県
      1. 鶴岡市
      2. 西置賜郡白鷹町
      3. 南陽市
   2. 広島県
   3. 愛知県
      1. 尾張旭市
      2. 北設楽郡設楽町
      3. 安城市
   4. 茨城県
3. 四国
   1. 高知県
   2. 愛媛県
      1. 宇和島市
      2. 西予市
         1. 明浜町狩浜
         2. 宇和町明間
         3. 城川町遊子谷
      3. 新居浜市
   3. 香川県
4. 九州
   1. 大分県
   2. 宮崎県
   3. 鹿児島県
   4. 長崎県
      1. 大村市
      2. 対馬市
      3. 松浦市
      4. 佐世保市