[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル

Post on:2011年5月27日

順序付きリストを美しくスタイルするチュートリアル

HTML

HTMLは非常にシンプルなol要素で実装します。

<ol>
	<li>List item one</li>
	<li>The second item on the list</li>
	<li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
	<li>...</li>
	<li>...</li>
</ol>

CSS

ポイントとなるのは、「ol」でカウンタのリセットを行い、「ol li:before」でカウンタの番号を生成し挿入するために使用することです。

	ol {
		counter-reset:li; /* Initiate a counter */
		padding:0; /* Remove the default left padding */
		list-style:none; /* Disable the normal item numbering */
	}
	ol li {
		position:relative; /* Create a positioning context */
		margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
		padding:4px 8px;
		border-top:2px solid #666;
		background:#f6f6f6;
	}
	ol li:before {
		content:counter(li); /* Use the counter as content */
		counter-increment:li; /* Increment the counter by 1 */
		/* Position and style the number */
		position:absolute;
		top:-2px;
		left:-2em;
		width:2em;
		padding:4px 0;
		border-top:2px solid #666;
		color:#fff;
		background:#666;
		font-weight:bold;
		font-family:"Helvetica Neue", Arial, sans-serif;
		text-align:center;
	}

[ad#ad-2]

実装のポイント

「list-style:none」でデフォルトのナンバリングを消します。
「counter-reset」「counter-increment」でナンバリングを生成します。
※これはCSS 2.1です。CSS 2.1 12.4 Automatic counters and numbering
「content:」作成したカウンターのインデックスを挿入します。
CSS 2.1 12.2 The 'content' property
「:before」擬似要素を使用します。

IEではcontentプロパティがIE7より古いものでサポートされてなく、:before, :afterの擬似要素のサポートもIE8までとなっています。
これは条件付きコメントやCSS hackを使用して、こういった古いブラウザにも美しくレンダリングさせることができるでしょう。

IEの各バージョンごとの対応は、下記ページを参考ください。