問題 × 解決策

ol等のリストを丸数字で表示させて、CSSでカスタマイズさせる

問題

ol等のリストを丸数字で表示させて、CSSでカスタマイズしたい

解決策

list-style-typeは使用せず、cssのcounterを使用する。counterで数字を表示し、それに対してCSSで丸文字を構築する。

はじめに

リストの装飾は”list-style-type”で色々な表現をすることが可能です。
ですが、それ以外の表現をしたい場合は、ひと手間掛ける必要があります。
今回紹介する手法は、「丸数字」によるolリストです。
リスト本来の機能は使用せず、CSSの「counter」という機能を使用して行います。

まず、DEMOをご覧ください。

このようなリストを作成します。

  1. リスト
  2. リスト
  3. リスト
  4. リスト
  5. リスト

まず、マークアップから行います。

まず初めに、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について分かりやすくまとめられています。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ten − 6 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧