文書更新：2017年09月13日(水) 午前11時08分53秒

Home > 備忘録 > Web page 作成 > リストスタイル > リストスタイル( 58 )

カウンターを括弧で囲む

  1. 数値を括弧で囲む
    1. HTML
      2. <div style="margin-left:1em;">
	<ol class="jisaku1">
		<li>和歌山県</li>
		<li>愛媛県</li>
		<li>石川県</li>
		<li>岩手県</li>
		<li>香川県</li>
	</ol>
</div>
    2. スタイルシート
      3. ol.jisaku1{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku1 li{/*リストの設定*/
	color:#cc0000;			/*色の指定*/
}
ol.jisaku1 li:before {/*リストの左側の設定*/
	counter-increment: item;					/*カウンタ名を定義する*/
	content:"(" counter(item,decimal) ")" " ";	/*表示するデータ*/
	color:green;								/*色の指定*/
	margin-left:-2em;							/*表示位置調整*/
}
    3. 実行結果
      1. 和歌山県
      2. 愛媛県
      3. 石川県
      4. 岩手県
      5. 香川県
  2. 文字を括弧で囲む
    1. HTML
      2. <div style="margin-left:1em;">
	<ol class="jisaku2">
		<li>和歌山県</li>
		<li>愛媛県</li>
		<li>石川県</li>
		<li>岩手県</li>
		<li>香川県</li>
	</ol>
</div>
    2. スタイルシート
      3. ol.jisaku2{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku2 li{/*リストの設定*/
	color:#cc0000;			/*色の指定*/
}
ol.jisaku2 li:before {/*リストの左側の設定*/
	counter-increment: item;					/*カウンタ名を定義する*/
	content:"(" counter(item,katakana-iroha) ")" " ";	/*表示するデータ*/
	color:green;								/*色の指定*/
	margin-left:-2em;							/*表示位置調整*/
}
    3. 実行結果
      1. 和歌山県
      2. 愛媛県
      3. 石川県
      4. 岩手県
      5. 香川県

例題1,2,3,...

  1. HTML
    2. <div style="margin-left:1em;">
	<ol class="jisaku3">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
  2. スタイルシート
    3. ol.jisaku3{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku3 li{
	font-size:1em;
}
ol.jisaku3 li:before {/*リストの左側の設定*/
	content:"例題";		/*表示するデータ*/
	color:#cc0000;		/*色の指定*/
	margin-left:-2em;	/*表示位置調整*/
}
ol.jisaku3 li:after {/*リストの右側の設定*/
	counter-increment: item;		/*カウンタ名を定義する*/
	content: counter(item,decimal);	/*表示するデータ*/
	color:green;					/*色の指定*/
}
  3. 実行結果

カウンターを丸や四角で囲む

  1. 数値を丸で囲む
    1. HTML
      2. <div style="margin-left:1em;">
	<ol class="jisaku4">
		<li>和歌山県</li>
		<li>愛媛県</li>
		<li>石川県</li>
		<li>岩手県</li>
		<li>青森県</li>
		<li>富山県</li>
		<li>神奈川県</li>
		<li>大阪府</li>
		<li>三重県</li>
		<li>茨城県</li>
		<li>栃木県</li>
		<li>静岡県</li>
		<li>広島県</li>
		<li>山梨県</li>
		<li>福岡県</li>
	</ol>
</div>
    2. スタイルシート
      3. ol.jisaku4{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku4 li{/*リストの設定*/
	color: #cc0000;			/*色の指定*/
}
ol.jisaku4 li:before {/*リストの左側の設定*/
	display: inline-block;			/*表示形式の指定*/
	background: #cc0000;			/*カウンターの背景*/
	border-radius: 50%;				/*丸を描画*/
	color: #fff;					/*カウンターの文字色*/
	counter-increment: item;		/*カウンタ名を定義する*/
	content: counter(item,decimal);	/*表示するデータ*/
	text-align: center;				/*カウンターの中央寄せ*/
	width: calc(1em + 4px);			/*カウンターの幅*/
	height: calc(1em + 4px);		/*カウンターの高さ*/
	font-size: calc(1em - 2px);		/*カウンターの文字サイズ*/
	margin:0 4px 0 -1.5em;			/*表示位置調整*/
	vertical-align:middle;			/*ol.jisaku4 liの縦中央*/
	line-height:calc(1em + 4px);
}
    3. 実行結果
      1. 和歌山県
      2. 愛媛県
      3. 石川県
      4. 岩手県
      5. 青森県
      6. 富山県
      7. 神奈川県
      8. 大阪府
      9. 三重県
      10. 茨城県
      11. 栃木県
      12. 静岡県
      13. 広島県
      14. 山梨県
      15. 福岡県
  2. 数値を四角で囲む
    1. HTML
      2. <div style="margin-left:1em;">
	<ol class="jisaku5">
		<li>和歌山県</li>
		<li>愛媛県</li>
		<li>石川県</li>
		<li>岩手県</li>
		<li>青森県</li>
		<li>富山県</li>
		<li>神奈川県</li>
		<li>大阪府</li>
		<li>三重県</li>
		<li>茨城県</li>
		<li>栃木県</li>
		<li>静岡県</li>
		<li>広島県</li>
		<li>山梨県</li>
		<li>福岡県</li>
	</ol>
</div>
    2. スタイルシート
      3. ol.jisaku5{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku5 li{/*リストの設定*/
	color: #006400;			/*色の指定*/
}
ol.jisaku5 li:before {/*リストの左側の設定*/
	display: inline-block;			/*表示形式の指定*/
	background: #228B22;			/*カウンターの背景*/
	border-radius: 3px;				/*丸を描画*/
	color: #fff;					/*カウンターの文字色*/
	counter-increment: item;		/*カウンタ名を定義する*/
	content: counter(item,decimal) ;	/*表示するデータ*/
	text-align: center;				/*カウンターの中央寄せ*/
	width: calc(1em + 4px);			/*カウンターの幅*/
	height: calc(1em + 4px);		/*カウンターの高さ*/
	font-size: calc(1em - 2px);		/*カウンターの文字サイズ*/
	margin:0 4px 0 -1.5em;			/*表示位置調整*/
	vertical-align:middle;			/*ol.jisaku5 liの縦中央*/
	line-height:calc(1em + 4px);
}
    3. 実行結果
      1. 和歌山県
      2. 愛媛県
      3. 石川県
      4. 岩手県
      5. 青森県
      6. 富山県
      7. 神奈川県
      8. 大阪府
      9. 三重県
      10. 茨城県
      11. 栃木県
      12. 静岡県
      13. 広島県
      14. 山梨県
      15. 福岡県
  3. 数値を四角で囲む2
    1. HTML
      2. <div style="margin-left:1em;">
	<ol class="jisaku6">
		<li>和歌山県</li>
		<li>愛媛県</li>
		<li>石川県</li>
		<li>岩手県</li>
		<li>青森県</li>
		<li>富山県</li>
		<li>神奈川県</li>
		<li>大阪府</li>
		<li>三重県</li>
		<li>茨城県</li>
		<li>栃木県</li>
		<li>静岡県</li>
		<li>広島県</li>
		<li>山梨県</li>
		<li>福岡県</li>
	</ol>
</div>
    2. スタイルシート
      3. ol.jisaku6{
	counter-reset:item;		/*カウンターをリセット*/
	list-style-type:none;	/*リストの先頭に表示するマーカー文字の種類を指定*/
}
ol.jisaku6 li{/*リストの設定*/
	color: #4B0082;			/*色の指定*/
}
ol.jisaku6 li:before {/*リストの左側の設定*/
	display: inline-block;			/*表示形式の指定*/
	border: 1px solid #4B0082;
	box-shadow: 2px 2px #4B0082;
	border-radius: 3px;				/*丸を描画*/
	color: #4B0082;					/*カウンターの文字色*/
	counter-increment: item;		/*カウンタ名を定義する*/
	content: counter(item,decimal) ;/*表示するデータ*/
	text-align: center;				/*カウンターの中央寄せ*/
	width: calc(1em + 4px);			/*カウンターの幅*/
	height: calc(1em + 4px);		/*カウンターの高さ*/
	font-size: calc(1em - 2px);		/*カウンターの文字サイズ*/
	margin:0 4px 0 -1.5em;			/*表示位置調整*/
	vertical-align:middle;			/*ol.jisaku5 liの縦中央*/
	line-height:calc(1em + 4px);
}
    3. 実行結果
      1. 和歌山県
      2. 愛媛県
      3. 石川県
      4. 岩手県
      5. 青森県
      6. 富山県
      7. 神奈川県
      8. 大阪府
      9. 三重県
      10. 茨城県
      11. 栃木県
      12. 静岡県
      13. 広島県
      14. 山梨県
      15. 福岡県