CSSリセット
ブラウザによる表示のブレ”を最小限にするもの
特にCSSで指定がなければ、ブラウザーそれぞれで、デフォルト設定が存在します。
IEとChromeで表示が微妙に違ったりします。
おすすめのCSSリセット「html5 Doctor」
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<span class="com">/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */</span><span class="pln"> html</span><span class="pun">,</span><span class="pln"> body</span><span class="pun">,</span><span class="pln"> div</span><span class="pun">,</span><span class="pln"> span</span><span class="pun">,</span> <span class="kwd">object</span><span class="pun">,</span><span class="pln"> iframe</span><span class="pun">,</span><span class="pln"> h1</span><span class="pun">,</span><span class="pln"> h2</span><span class="pun">,</span><span class="pln"> h3</span><span class="pun">,</span><span class="pln"> h4</span><span class="pun">,</span><span class="pln"> h5</span><span class="pun">,</span><span class="pln"> h6</span><span class="pun">,</span><span class="pln"> p</span><span class="pun">,</span><span class="pln"> blockquote</span><span class="pun">,</span><span class="pln"> pre</span><span class="pun">,</span><span class="pln"> abbr</span><span class="pun">,</span><span class="pln"> address</span><span class="pun">,</span><span class="pln"> cite</span><span class="pun">,</span><span class="pln"> code</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">del</span><span class="pun">,</span><span class="pln"> dfn</span><span class="pun">,</span><span class="pln"> em</span><span class="pun">,</span><span class="pln"> img</span><span class="pun">,</span><span class="pln"> ins</span><span class="pun">,</span><span class="pln"> kbd</span><span class="pun">,</span><span class="pln"> q</span><span class="pun">,</span><span class="pln"> samp</span><span class="pun">,</span><span class="pln"> small</span><span class="pun">,</span><span class="pln"> strong</span><span class="pun">,</span> <span class="kwd">sub</span><span class="pun">,</span><span class="pln"> sup</span><span class="pun">,</span> <span class="kwd">var</span><span class="pun">,</span><span class="pln"> b</span><span class="pun">,</span><span class="pln"> i</span><span class="pun">,</span><span class="pln"> dl</span><span class="pun">,</span><span class="pln"> dt</span><span class="pun">,</span><span class="pln"> dd</span><span class="pun">,</span><span class="pln"> ol</span><span class="pun">,</span><span class="pln"> ul</span><span class="pun">,</span><span class="pln"> li</span><span class="pun">,</span><span class="pln"> fieldset</span><span class="pun">,</span><span class="pln"> form</span><span class="pun">,</span><span class="pln"> label</span><span class="pun">,</span><span class="pln"> legend</span><span class="pun">,</span><span class="pln"> table</span><span class="pun">,</span><span class="pln"> caption</span><span class="pun">,</span><span class="pln"> tbody</span><span class="pun">,</span><span class="pln"> tfoot</span><span class="pun">,</span><span class="pln"> thead</span><span class="pun">,</span><span class="pln"> tr</span><span class="pun">,</span><span class="pln"> th</span><span class="pun">,</span><span class="pln"> td</span><span class="pun">,</span><span class="pln"> article</span><span class="pun">,</span><span class="pln"> aside</span><span class="pun">,</span><span class="pln"> canvas</span><span class="pun">,</span><span class="pln"> details</span><span class="pun">,</span><span class="pln"> figcaption</span><span class="pun">,</span><span class="pln"> figure</span><span class="pun">,</span><span class="pln"> footer</span><span class="pun">,</span><span class="pln"> header</span><span class="pun">,</span><span class="pln"> hgroup</span><span class="pun">,</span><span class="pln"> menu</span><span class="pun">,</span><span class="pln"> nav</span><span class="pun">,</span><span class="pln"> section</span><span class="pun">,</span><span class="pln"> summary</span><span class="pun">,</span><span class="pln"> time</span><span class="pun">,</span><span class="pln"> mark</span><span class="pun">,</span><span class="pln"> audio</span><span class="pun">,</span><span class="pln"> video </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> outline</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">baseline</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln">transparent</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="lit">1</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> article</span><span class="pun">,</span><span class="pln">aside</span><span class="pun">,</span><span class="pln">details</span><span class="pun">,</span><span class="pln">figcaption</span><span class="pun">,</span><span class="pln">figure</span><span class="pun">,</span><span class="pln"> footer</span><span class="pun">,</span><span class="pln">header</span><span class="pun">,</span><span class="pln">hgroup</span><span class="pun">,</span><span class="pln">menu</span><span class="pun">,</span><span class="pln">nav</span><span class="pun">,</span><span class="pln">section </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> nav ul </span><span class="pun">{</span><span class="pln"> list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> blockquote</span><span class="pun">,</span><span class="pln"> q </span><span class="pun">{</span><span class="pln"> quotes</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> blockquote</span><span class="pun">:</span><span class="pln">before</span><span class="pun">,</span><span class="pln"> blockquote</span><span class="pun">:</span><span class="pln">after</span><span class="pun">,</span><span class="pln"> q</span><span class="pun">:</span><span class="pln">before</span><span class="pun">,</span><span class="pln"> q</span><span class="pun">:</span><span class="pln">after </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="str">''</span><span class="pun">;</span><span class="pln"> content</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> a </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">baseline</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln">transparent</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* change colours to suit your needs */</span><span class="pln"> ins </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ff9;</span><span class="pln"> color</span><span class="pun">:</span><span class="com">#000;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* change colours to suit your needs */</span><span class="pln"> mark </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ff9;</span><span class="pln"> color</span><span class="pun">:</span><span class="com">#000;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">italic</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln">bold</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">del</span> <span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">through</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> abbr</span><span class="pun">[</span><span class="pln">title</span><span class="pun">],</span><span class="pln"> dfn</span><span class="pun">[</span><span class="pln">title</span><span class="pun">]</span> <span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> dotted</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln">help</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> table </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">collapse</span><span class="pun">:</span><span class="pln">collapse</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">spacing</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* change border colour to suit your needs */</span><span class="pln"> hr </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln">block</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">1px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#cccccc;</span><span class="pln"> margin</span><span class="pun">:</span><span class="lit">1em</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> input</span><span class="pun">,</span> <span class="kwd">select</span> <span class="pun">{</span><span class="pln"> vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">middle</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span> |
