行番号を振る方法

CSS HTML UCD

前に、サンプルをサイトからコピペした際にあとから行番号を消すなんて
手間が不便だと思って考えてみました。

ま、ファイルのダウンロードを作れば解決でしょうが小さいサンプルなどは
やっぱりコピペが一番！そこで考えたのがCSSとHTMLを組み合わせて実現できる方法です。

こんな感じでいかがでしょう？

<html>
<head>
<title>行番号を振る方法調査</title>
<style type="text/css">
div.code {
	color: #333333;
	background-color: #CCCCCC;
	border: 1px solid #666666;
	padding: 1px;
}
div.code ol {
	margin-top: 0px;
	margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="code"><ol>
<li>Amaya
<li>Internet Explorer
<li>HotJava
<li>JustView
<li>Lynx
<li>mosaic
<li>Mozilla
<li>Mozilla Firefox
<li>Netscape Navigator
<li>Opera
<li>公明ブラウザ
<li>2ちゃんねるブラウザ
<li>Sleipnir
<li>Sleipnir2
<li>Donut
<li>Lunascape
<li>Safari
</ol>
</div>
</body>
</html>

とりあえず、IE6とFirefox1.0で見たところちゃんと表示されてました。