[CSS]よく使用するクラスをまとめたスタイルシート -Toolbox CSS
Post on:2008年5月8日
sponsors
CSS-Tricksのエントリーから、異なるサイトにも利用が可能な、よく使用するクラスをまとめたスタイルシート「Toolbox CSS」を紹介します。
使用しているスタイルは、下記のようになっています。
レイアウト関連
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> .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; } </textarea> |
プリント関連
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> .page-break { page-break-before: always; } </textarea> |
タイポグラフィ関連
|
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> .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; } </textarea> |
スタイリング関連
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> 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); } </textarea> |
※属性セレクタは、IE6には対応していません。
参考：CSS 3 Basic selector
表示関連
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } </textarea> |
sponsors
