ちょっと素敵なランキングデザイン

先日、ちょっといい感じのランキングを作成して、達成感があったので、公開します(笑)

1番目
2番目
3番目
4番目
5番目
6番目
7番目
8番目
9番目
10番目

ランキングのHTMLはふつう。


<ol>
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
<li>8番目</li>
<li>9番目</li>
<li>10番目</li>
</ol>

CSSはこちら


ol {
	counter-reset: ranking;
}
ol li {
	list-style: none;
	position: relative;
	margin: 10px 0 0 5px;
	padding: 10px 5px 10px 45px;
	border-top: 1px dotted #DDDDDD;
	overflow: hidden;
	line-height: 1.5em;
}

ol li:before {
	content: counter(ranking);
	counter-increment: ranking;
	position: absolute;
	z-index: 10;
	margin: 0 5px 0 1px;
	left: 0;
	width: 24px;
	height: 24px;
	color: #FFFFFF;
	background: #999999;
	font-size: 15px;
	text-align: center;
	border: 3px solid #FFFFFF;
	box-shadow: 0 0 0 1px #DDDDDD;
	border-radius: 4px;
}

ol li:nth-child(-n+3):before {
	background: #57ad68;
}

解説

HTML

教科書通りの解説ですが、念のため。
ol　～　/ol　→　順序のあるリスト
li　～　/li　→　リストの項目

CSS

ol {
counter-reset: ranking;　→　ランキングの初期化：ランキング名
}

ol li {
list-style: none;　　→　リストの先頭に表示するマーカー：表示なし
position: relative;　→　ポジション決め：相対位置
margin: 10px 0 0 5px;　→　マージン：上10px 右0 下0 左5px
padding: 10px 5px 10px 45px;　→　パディング：上10px 右5px 下10px 左45px
border-top: 1px dotted #DDDDDD;　→　上ボーダー：1pxの点線　色#DDDDDD（グレー）
overflow: hidden;　→　あふれた分：隠す
line-height: 1.5em;　→　文字の高さ：文字の1.5倍
}

ol li:before {　→　リストの前に表示するもの
content: counter(ranking);　→　カウンター：カウンターの名前ranking（olで決めたもの）
counter-increment: ranking;　→　カウンターの増やしかた：rankingを1つずつ増やす
position: absolute;　→　ポジション決め：絶対位置
z-index: 10;　→　表示の重なり：10番目
margin: 0 5px 0 1px;　→　マージン：上0 右5px 下0 左1px
left: 0;　→　左からの位置：0
width: 24px; →　幅：24px
height: 24px; →　高さ：24px
color: #FFFFFF;　→　文字の色：#FFFFFF（白）
background: #999999;　→　背景色：#999999（濃い目のグレー)
font-size: 15px;　→　フォントの大きさ：15px
text-align: center;　→　テキストの位置：真ん中揃え
border: 3px solid #FFFFFF;　→　ボーダー：3pxの直線　色#FFFFFF（白）
box-shadow: 0 0 0 1px #DDDDDD;　→　ボックスの影：水平方向0 垂直方向0　ぼかし距離0 広がり距離1px 色#DDDDDD（グレー）
border-radius: 4px;　→　角丸：4px
}
ol li:nth-child(-n+3):before {　→　olの中のli　最初から３つ目までの前につけるもの
background: #57ad68;　→　背景色：#57ad68（緑）
}

ポイント

ランキングの順位の表現ですが、枠をつけてみました。
あと1～3位は色を変えてみました。
他に1位金メダル、2位銀メダル、3位銅メダルみたいな感じで画像を指定したりもできます。