アスタリスクの次に数字を付けたい
2024年11月26日
11月の終わりがだんだん近づいていますが…
あと1ヶ月弱ぐらいで2024年が終わります！
1年のカレンダーを見ると、2024年のカウントダウンを数えてしまう習慣化になってしまいました…
年末に向けて大忙しのシーズンが始まりますね。
どっかのお店もクリスマスシーズンが始まっているところも見かけるようになりました。
しかも、今週の金曜日に「ブラックフライデー」に向けていろんな店舗の在庫処分セールが始まりますね。
年末にバタバタにならないように余裕のあるスケジュールを組み立ててくださいね。
話を取り戻して…
アスタリスクの次に数字を付けたい
昨日は、「アスタリスク（*）」をつけてリストのコーディングの方法を説明しました。
今回は、「アスタリスク（*）」の次に番号を振り分けたいときの方法を説明しますね。
まずは、HTML！
<ul>
<li>アスタリスクのリスト 01</li>
<li>アスタリスクのリスト 02</li>
<li>アスタリスクのリスト 03</li>
<li>アスタリスクのリスト 04</li>
</ul>ここまでは基本ですね。
次にCSS！
（好みに合わせてデザインをしてください。）
ul {
counter-reset: listnum; /* カウンターをリセット */
margin:0 auto;
padding: 0;
}
ul li:before {
content: "*"counter(listnum);/* 番号を表示 */
counter-increment: listnum; /* counter-resetと同じ文字列 */
display: block;
left: 0;
margin: auto;
padding: 0;
position: absolute;
top: 0;
}
ul li {
list-style-type: none;
margin: 0;
padding: 0 0 0 15px;
position: relative;
}完成はこちら！
この使い方の方法をしっかりと身につけてくださいね。
ではまた！
- Leonardo
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日
- オリジナルリセットスタイル構築中 2024年12月17日
- 今日は家族のクリスマスプレゼント～Part.3～ 2024年12月16日
- 今日は家族のクリスマスプレゼント～Part.2～ 2024年12月15日