[CSS]pre要素で実装されたコードを美しくデザインするスタイルシート

pre要素で実装されたコードを美しくデザインするスタイルシートをSoh Tanakaから紹介します。

Styling Code Snippets with CSS
demo

デモでは、ノートスタイルが二種類と視認性に優れたブラックタイプが一種類紹介されています。

三種類ともHTMLはシンプルで、クラスを記述するだけでデザインを適応できます。

グリーンのノート

pre {
	font-size: 12px;
	padding: 0;
	margin: 0;
	background: #f0f0f0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	line-height: 20px;
	background: url(pre_code_bg.gif) repeat-y left top;
	width: 600px;
	overflow: auto;
	overflow-Y:hidden;
}

イエローのノート

	background: url(pre_code_bg_ylw.gif) repeat-y left top;
	border: none;

ブラックタイプ

	background: url(pre_code_bg_blk.gif) repeat-y left top;
	border: none;
	color: #fff;

共通

pre code {
	margin: 0 0 0 40px;
	padding: 18px 0;
	display: block;
}
.code {
	margin: 20px 0;
}

「イエローのノート」「ブラックタイプ」を単独で使用する場合は、「グリーンのノート」のbackgroundとborder以外の指定が必要です。