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

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

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


2018/2/13追記

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

完成図

120606-1

こんな感じです。まるいのは背景画像で、数字はWebフォント。

120606-2

: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(右)はこのようなスタイルになっています!

120606-1 120606-3

同じような色合いにしてみました_(:3 」∠)_

公開日:2012/06/06

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)