白抜き数字で番号付け
順序付けリストで1番から順に番号を振ってもらえるのはありがたいです。数字のみならずイロハなども指定できます。丸囲み数字や絵文字も可能ですが今回、様々な色に彩られた白抜き数字を実現しました。
❶❷❸❹❺❻❼❽❾❿
番号は content-counter を利用し丸で囲み背景色を指定するには background-color に加えて width, height, border-radius で指定します。数字の色は color にて設定します。
このように手を加えた指定はとりわけ引き立ちます。番号が2桁になっても縦横の両方向に中央寄りを設定しているので丸円の中央部に表示されます。
Result
目 次
- 勃勃たる威風へ
- 活気ある日本へ
- AIでナンプレ難問を解く
- 本記事の目的
- 操作方法
- ナンバープレース解法アルゴリズム
- プログラミング言語について
- 新しい解法の実装法
- 解法の大きな流れ
- プログラミングの基礎となる関連図
サンプルコード
<head> <!-- 2023-01-16, upload -->
<style>
.ol1 {
line-height: 18px; /* 20 22 */
counter-reset: my-counter;
list-style: none;
padding: 0;
}
.li1 {
margin-bottom: 5px; /* 行の高さに反映（5pxは手頃感あり） */
padding-left: 28px; /* 項目の横表示位置 */
}
.li1:before {
content: counter(my-counter); /* カウンター */
counter-increment: my-counter;/* カウンター */
background-color: aquamarine; /* #bada55 */
color: crimson; /* #222 navy black mediumvioletred */
font-size:14px; /* 項目番号数字の大きさ */
display: block;
float: left;
line-height: 18px; /* 22 */
margin-left: -22px; /* 項目番号数字の横表示位置 */
text-align: center; /* 横 */
align-items: center; /* 縦 */
height: 18px;
width: 18px;
border-radius: 50%; /* 円 */
}
</style>
</head>
<Div id="ms" style="width:360px; height:auto; margin:0 auto; background:beige; BORDER:1px solid blue;">
<span style="font-size:22px; font-family:ＭＳ Ｐゴシック"> 目 次</span>
<ol class="ol1" style="font-size:16px; color:black;">
<li class="li1">勃勃たる威風へ</li>
<li class="li1">活気ある日本へ</li>
<li class="li1">AIでナンプレ難問を解く</li>
<li class="li1">本記事の目的</li>
<li class="li1">操作方法</li>
<li class="li1">ナンバープレース解法アルゴリズム</li>
<li class="li1">プログラミング言語について</li>
<li class="li1">新しい解法の実装法</li>
<li class="li1">解法の大きな流れ</li>
<li class="li1">プログラミングの基礎となる関連図</li>
</ol>
</Div>
おまけに
白抜き数字を表示するとき、多くは絵文字を利用しますが番号が20を超えたりすると使いにくくなります。今回の方法は1桁と2桁の数字をサポートするので99まで使うことができます。