問題
ol等のリストを丸数字で表示させて、CSSでカスタマイズしたい
解決策
list-style-typeは使用せず、cssのcounterを使用する。counterで数字を表示し、それに対してCSSで丸文字を構築する。
はじめに
リストの装飾は”list-style-type”で色々な表現をすることが可能です。
ですが、それ以外の表現をしたい場合は、ひと手間掛ける必要があります。
今回紹介する手法は、「丸数字」によるolリストです。
リスト本来の機能は使用せず、CSSの「counter」という機能を使用して行います。
まず、DEMOをご覧ください。
このようなリストを作成します。
- リスト
- リスト
- リスト
- リスト
- リスト
まず、マークアップから行います。
まず初めに、olでリストを組みます。
※便宜上、classを”listmark-num”にしています。
<ol class=“listmark-num”>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>CSSの構築
次にCSSを構築していきます。
.listmark-num > li{
padding-left: 30px;
}
.listmark-num > li:before {
content: counter(my-counter); /* カウンター「my-counter」を呼び出す */
counter-increment: my-counter; /* この要素が現れる度にカウンター「my-counter」が加算されていく、 */
background-color: #FCECE8;
display: block;
float: left;
margin-top:3px;
color: #F15A24;
font-size: 65%;
font-weight: bold;
letter-spacing: -0.5pt;
text-indent: -0.5pt;
line-height: 20px; /* 行間を高さと同じにすることで、上下中央に配置させる */
margin-left: -30px;
text-align: center;
height: 20px;
width: 20px; /* width、heightを同じ数値にして、正方形にする */
border-radius: 50%; /* 要素を丸にする（正方形なので、正円となる） */
}
.listmark-num > li:after{
content: "";
display: block;
height: 0;
font-size: 0;
clear: both;
}
.listmark-num{
counter-reset: my-counter; /* ol本体でカウンターをリセット – このクラスが呼び出される度に1からカウントされるようにする */
padding: 0;
}最後に
いかがでしたでしょうか。
「counter」はとても汎用性が高く、様々な応用が利きますので、ぜひお試しください。
→こちらの方のページがcounterについて分かりやすくまとめられています。
コメント