[CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集
Post on:2007年9月22日
sponsors
YUI、Blueprint、YAMLなどのCSSのフレームワークでも利用されているブラウザのスタイルを初期化するスタイルシートのサンプル集です。
下記のスタイルシートは、記述スタイルを同様のスタイルに全て変更しています。また、コメントも削除しています。
Blueprint
Blueprint
Based:Reset Reloaded
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } body{ line-height:1.5; background:#fff; margin:1.5em 0; } table{ border-collapse:separate; border-spacing:0; } caption, th, td{ text-align:left; font-weight:400; } blockquote:before, blockquote:after, q:before, q:after{ content:""; } blockquote, q{ quotes:"" ""; } a img{ border:none; } </textarea> |
YAML
YAML(Yet Another Multicolumn Layout)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<textarea name="code" class="css" cols="60" rows="5"> *{ margin:0; padding:0; } option{ padding-left:0.4em; } * html body *{ overflow:visible; } * html iframe,* html frame{ overflow:auto; } * html frameset{ overflow:hidden; } html{ height:100%; } body{ min-height:101%; font-size:100.01%; color:#000; background:#fff; text-align:left; } fieldset, img{ border:0 solid; } ul, ol, dl{ margin:0 0 1em 1em; } li{ margin-left:1.5em; line-height:1.5em; } dt{ font-weight:700; } dd{ margin:0 0 1em 2em; } blockquote, cite{ font-size:0.93em;width:auto;margin:0 0 1em 1.5em; } </textarea> |
YUI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<textarea name="code" class="css" cols="60" rows="5"> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset, img{ border:0; } address, caption, cite, code, dfn, em, strong, th, var{ font-style:normal; font-weight:normal; } ol, ul{ list-style:none; } caption, th{ text-align:left; } h1, h2, h3, h4, h5, h6{ font-size:100%; font-weight:normal; } q:before, q:after{ content:”; } abbr, acronym{ border:0; } </textarea> |
Tripoli
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<textarea name="code" class="css" cols="60" rows="5"> *{ margin:0; padding:0; text-decoration:none; font-size:1em; outline:none; } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext{ font:inherit; font-size:1em; white-space:normal; } dfn, i, cite, var, address, em{ font-style:normal; } th, b, strong, h1, h2, h3, h4, h5, h6{ font-weight:normal; } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table{ border:none; } table{ border-collapse:collapse; border-spacing:0; } caption, th, td, center{ text-align:left; vertical-align:top; } body{ line-height:1; background:white; color:black; } q{ quotes:"" ""; } ul, ol, dir, menu{ list-style:none; } sub, sup{ vertical-align:baseline; } a{ color:inherit; } hr{ display:none; } font{ color:inherit !important; font:inherit !important; color:inherit !important; } marquee{ overflow:inherit !important; -moz-binding:none; } blink{ text-decoration:none; } nobr{ white-space:normal; } </textarea> |
meyerweb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body{ line-height:1; } ol, ul{ list-style:none; } blockquote, q{ quotes:none; } blockquote:before, blockquote:after, q:before, q:after{ content:''; content:none; } :focus{ outline:0; } ins{ text-decoration:none; } del{ text-decoration:line-through; } table{ border-collapse:collapse; border-spacing:0; } </textarea> |
warpspire
Why I don’t use CSS Frameworks
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<textarea name="code" class="css" cols="60" rows="5"> *{ padding:0; margin:0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address{ margin:1em 0; } li, dd{ margin-left:5%; } fieldset{ padding:.5em; } select option{ padding:0 5px; } .hide, .print-logo, .close-button{ display:none; } .left{ float:left; } .right{ float:right; } .clear{ clear:both; height:1px; font-size:1px; line-height:1px; } a img{ border:none; } </textarea> |
christianmontoya
CSS techniques I use all the time
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<textarea name="code" class="css" cols="60" rows="5"> html, body, form, fieldset{ margin:0; padding:0;font:100%/120% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre,blockquote, ul, ol, dl, address{ margin:1em 0; padding:0; } li, dd, blockquote{ margin-left:1em; } form label{ cursor:pointer; } fieldset{ border:none; } input, select, textarea{ font-size:100%; font-family:inherit; } </textarea> |
crucialwebhost
Master Stylesheet: The Most Useful CSS Technique
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<textarea name="code" class="css" cols="60" rows="5"> html, body{ border:0; margin:0; padding:0; } body{ font:100%/1.25 arial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-weight:normal; } h1{ padding:30px 0 25px 0; letter-spacing:-1px; font:2em arial, helvetica, sans-serif; } h2{ padding:20px 0; letter-spacing:-1px; font:1.5em arial, helvetica, sans-serif; } h3{ font:1em arial, helvetica, sans-serif; font-weight:bold; } p, ul, ol{ margin:0; padding:0 0 18px 0; } ul, ol{ list-style:none; padding:0 0 18px 40px; } blockquote{ margin:22px 40px; padding:0; } small{ font-size:0.85em; } img{ border:0; } sup{ position:relative; bottom:0.3em; vertical-align:baseline; } sub{ position:relative; bottom:-0.2em; vertical-align:baseline; } acronym, abbr{ cursor:help; letter-spacing:1px; border-bottom:1px dashed; } </textarea> |
sponsors
