2020年11月5日木曜日

番号付きリストの番号部を装飾

番号付きリストの番号部を疑似要素に置き換え、装飾しやすくする。

デモページを表示

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 共通定義 */
ol.deco {
  list-style-type: none;
  counter-reset: number 0;
}
 
ol.deco > li {
  position: relative;
  padding-left: 2.5em;
}
 
ol.deco > li::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  counter-increment: number 1;
  content: counter(number) ".";
  text-align: right;
}
 
/* 個別定義 */
ol.deco.ranking > li {
  padding: 1em 0 1em 45px;
}
 
ol.deco.ranking > li::before {
  top: 50%;
  transform: translate(0, -50%);
  width: 36px;
  padding: 8px 0;
  border-radius: 50%;
  background-color: #808;
  font-weight: bold;
  font-size: 20px;
  color: #800;
  text-align: center;
  color: #fff;
  content: counter(number);
}
補足
  • 3行目： list-style-type: none; で標準のマーカーを非表示にし、12行目：擬似要素で番号部を表示する。
  • リストの番号は counter-reset、counter-increment、content で生成している。
  • 共通定義（class="deco"）で、装飾のない通常の番号付きリストのスタイルになる。
  • 個別定義（class="ranking"）で、番号部の位置や大きさ、装飾などを設定している。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h2>番号付きリスト（共通定義のみ）</h2>
 
<ol class="deco">
  <li>水は人の練習棒汁に入り口に云っ猫ますず。それでぴものうた。やぶれ過ぎこれもセロがおいしいうて遠くの猫のろ弾へつける第六狸家のかっこうを叩きがいなくだ。口は毎晩しといるた。</li>
  <li>音楽は一踏ん床のようをして行っまし。へんも狸慈悲やみんなをまたとしながら下に仲間のようの出と扉に出てぱっとかっこうで弾きてときまし。じつは一寸セロをかっこうをめくりたます。</li>
  <li>何まだとひとりに弾いてボーを手伝っますまし。</li>
</ol>
 
<h2>番号付きリスト（共通定義＋個別定義）</h2>
 
<ol class="deco ranking">
  <li>水は人の練習棒汁に入り口に云っ猫ますず。それでぴものうた。やぶれ過ぎこれもセロがおいしいうて遠くの猫のろ弾へつける第六狸家のかっこうを叩きがいなくだ。口は毎晩しといるた。</li>
  <li>音楽は一踏ん床のようをして行っまし。へんも狸慈悲やみんなをまたとしながら下に仲間のようの出と扉に出てぱっとかっこうで弾きてときまし。じつは一寸セロをかっこうをめくりたます。</li>
  <li>何まだとひとりに弾いてボーを手伝っますまし。</li>
</ol>
補足
  • 3行目：共通定義（class="deco"）だけの場合は、通常の番号付きリストのスタイル。
  • 11行目：共通定義（class="deco"）＋個別定義（class="ranking"）で、番号部が装飾された状態になる。
ラベル: , , ,
⬆