ol要素をcss+Webフォント＋背景画像でカッコ良くしてみる

2012/06/06
Web
デザイン

先日、ol要素をcssでランキング形式っぽくスタイリングする方法という記事を書きましたが、目次に使ってるol要素ももっと可愛くできるんじゃないかなと思ってやってみました！

2018/2/13追記

この記事はだいぶ古いので、Webアイコンを利用したこちらのほうがおすすめです。

ol要素をWebアイコン背景&Webフォント数字にしたくて試行錯誤した

完成図

こんな感じです。まるいのは背景画像で、数字は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フォントを使っています。