ol要素をcss+Webフォント＋背景画像でカッコ良くしてみる
先日、ol要素をcssでランキング形式っぽくスタイリングする方法という記事を書きましたが、目次に使ってるol要素ももっと可愛くできるんじゃないかなと思ってやってみました！
完成図
こんな感じです。まるいのは背景画像で、数字はWebフォント。
:before要素がサポートされていないIE7以下はこんな風に見えます。
マークアップ
html
<ol>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
<li>サンプルテキスト</li>
</ol>
css
ol {
counter-reset:li; /*カウントリセット*/
}
ol li {
list-style:none; /*デフォルトナンバリングを消す*/
position:relative;
padding:0;
margin-left:25px;
*list-style-type: decimal; /*IE7*/
}
ol li:before {
content:counter(li); /*カウンターのインデックスを挿入*/
counter-increment:li; /*ナンバリングを生成*/
/* ここから番号のスタイル */
position:absolute;
left:-25px;
width:25px; /*幅*/
color:#48b; /*文字色*/
background:url(images/ol_list.png) no-repeat left 2px; /*背景画像*/
font-family: 'Federo', sans-serif; /*webフォント*/
font-size:110%; /*フォントサイズ*/
padding-left:5px;
}
フォントは、Googleのwebフォントを使っています。
現在のリストスタイル
というわけで、現在このサイトではol（左）、ul（右）はこのようなスタイルになっています！
同じような色合いにしてみました_(:3 」∠)_
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。