[CSS]よく使用するクラスをまとめたスタイルシート -Toolbox CSS

CSS-Tricksのエントリーから、異なるサイトにも利用が可能な、よく使用するクラスをまとめたスタイルシート「Toolbox CSS」を紹介します。

Toolbox CSS

使用しているスタイルは、下記のようになっています。

レイアウト関連

.floatLeft 			{ float: left; }
.floatRight			{ float: right; }
.clear				{ clear: both; }
.layoutCenter		{ margin: 0 auto; }
.textCenter			{ text-align: center; }
.textRight			{ text-align: right; }
.textLeft			{ text-align: left; }

プリント関連

.page-break 		{ page-break-before: always; }

タイポグラフィ関連

.error				{ border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning			{ border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success			{ border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut			{ font-size: 125%; font-weight: bold; }
.strikeOut			{ text-decoration: line-through; }
.underline			{ text-decoration: underline; }
.resetTypeStyle		{ font-weight: normal; font-style: normal; font-size: 100%;
					  text-decoration: none; background-color: none; word-spacing: normal;
					  letter-spacing: 0px; text-transform: none; text-indent: 0px; }

スタイリング関連

a[href^="mailto"]	{ background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }
a[href~=".pdf]		{ background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; }
a.button			{ color: black; border: 1px solid black; padding: 3px; }
	a.button:hover	{ background: black; color: white; }
.transpBlack		{ background: url(images/transpBlack.png); }

※属性セレクタは、IE6には対応していません。
参考：CSS 3 Basic selector

表示関連

.hide				{ display: none; }
.show				{ display: block; }
.invisible			{ visibility: hidden; }

Post on:2008年5月8日