テンプレート

使いまわしのきくCSSコードを書いてテンプレートとして保存しておくと、けっこう役立つものです。<table>や<li>など、頻出する要素でいちいち悩まないでよいように、これぞというパターンをいくつか作っておくことにしました。

テーブル

ボーダー1pxのテーブル

表示例

a	b	c
data	data	data
data	data	data
data	data	data

ソースコード

table {
	border-collapse: collapse;
	border: 1px solid #000;
	margin: 1em 20px;
	padding: 0;
}

th {
	font: bold 10pt sans-serif;
	text-align: left;
	color: #000;
	background: #f0f0f0;
	border: 1px solid #000;
	margin: 0;
	padding: 5px;
}

td {
	font: normal 10pt sans-serif;
	color: #000;
	background: #fff;
	border: 1px solid #000;
	margin: 0;
	padding: 5px;
}

横のラインを強調したテーブル

表示例

a	b	c
data	data	data
data	data	data
data	data	data

ソースコード

table {
	border-collapse: collapse;
	border-bottom: 1px solid #000;
	margin: 1em 20px;
	padding: 0;
}

th {
	text-align: left;
	font: bold 10pt sans-serif;
	color: #fff;
	background: #333;
	margin: 0;
	padding: 5px;
}

td {
	font: normal 10pt sans-serif;
	color: #000;
	background: #fff;
	border-bottom: 1px dotted #000;
	margin: 0;
	padding: 5px;
}

リスト

リストのマーカーに画像を使用するには、list-style-imageとbackground-imageの二通りの方法があります。いずれも一長一短があって選択は難しいです。

list-style-imageを使ったリスト

マーカーに画像を使うための専用の属性なので何も考えずに使いたいところですが、ブラウザによっては表示位置が悪く、位置調整が難しいです。list-style-positionにoutside（デフォルト値）を設定すると位置はよくなる反面、こんどは左マージンの調整が難しくなってしまうので、なかなかうまくいきません。

表示例

• リスト
• リスト
• リスト

ソースコード

ul {
	list-style: disc inside url("marker.gif");
	margin: 1em 20px;
	padding: 0;
}

li {
	margin: 0;
	padding: 0;
}

background-imageを使ったリスト

いくぶん裏技的な手法ですが、汎用性があり、微調整も簡単なので当サイトではこちらを採用しています。

表示例

• リスト
• リスト
• リスト

ソースコード

ul {
	list-style: none outside none;
	margin: 1em 20px;
	padding: 0;
}

li {
	background: url("marker.gif") no-repeat left;
	margin: 0;
	padding: 0 0 0 15px;
}