[CSS]ol のリストで①や②などの丸数字を表示させる方法
スポンサード
あと、span に対して
スポンサード
稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。
ol li の list-style
は none
で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。
ol の リストで「丸数字」を表示させるサンプル
li タグ内に ① ②…と丸数字も合わせて書いていき、丸数字は <span> タグで囲ってあげます。<style> ol { position: relative; margin:0; padding:0 } ol li { list-style: none; list-style-position:outside; margin:0; padding-left:1.25em } ol li span { position: absolute; left:0; margin:0 } /*IE6*/ *html ol li span { left: -1.25em; } </style> <ol> <li><span>①</span>リスト1</li> <li><span>②</span>リスト2</li> <li><span>③</span>リスト3</li> <li><span>④</span>リスト4</li> <li><span>⑤</span>リスト5</li> <li><span>⑥</span>リスト6</li> <li><span>⑦</span>リスト7</li> <li><span>⑧</span>リスト8</li> <li><span>⑨</span>リスト9</li> <li><span>⑩</span>リスト10</li> <li><span>⑪</span>リスト11</li> <li><span>㉑</span>リスト21</li> </ol>ol li は
list-style:none
にしています。あと、span に対して
position: absolute;
left:0
で丸数字を左に位置固定した分、「リスト1」などのテキストには padding-left:1.25em
で左側に余白を設けています。これにより、各リストの2行目の頭を行揃えすることができます。- ①2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト2行目に折り返すような長いテキスト
- ②リスト2
- ③リスト3
- ④リスト4
- ⑤リスト5
スポンサード
コメント