番号リストの表現を変更

■番号リストの表現を変更■
番号だけを表示するなら ol 要素を使えばいいのですが、「第一章、第二章…」や「一時間目、二時間目…」など、数字＋他の単語も一緒に表示したい場合は counter-increment を使います。このプロパティを使えば、指定した要素が登場する度に数字を1つずつ増やしていくことができます。また、リストタグを使わなくても実装できますが、「番号リスト」の役割を持つ ol タグを使うのが無難かと思います。

• 例）第一問
• 第二問
• 第三問

▲ＨＴＭＬ▲
<ol>  <li>下線部Aの時期にみられた好況期の通称を選べ。</li>  <li>環境保護についての法制度の記述として正しいものを一つ選べ。</li>  <li>日本経済の記述として最も適切なものを選べ。</li></ol>

 

 

▲ＣＳＳ▲
li {  list-style: none;  counter-increment : chapter;}li:before {  content : “第” counter(chapter) “問”;  padding-right: 10px;}