|
ブラウザスタイルのリセットCSSの紹介と配布等をしているサイトのまとめです。現在リセットCSSについては国内外問わず様々な議論がなされており、現在ではその必要性さえも問われているようです。
リセットCSSについて
HTMLの各タグは、ブラウザごとに初期スタイルが異なり、スタイルシートでレイアウトを行う際、ブラウザごとに異なる指定を行わないと期待通りのレイアウトを再現しない場合があります。 そのため、同一のスタイル指定で意図したレイアウトが再現できるように、このブラウザごとのスタイルの差異を無くすスタイルシートの設定を行います。コリス
リセットCSSを使用する前に
一見便利そうなリセットCSSですが、必要かどうかは良く考えてから使用したほうが良いようです。また海外ではあまり使われていないなんて事例も。
全称セレクタを使用したリセット
*{
padding:0;
margin:0;
border:0;
}
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, 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-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
:focus{outline:0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table{border-collapse:separate; border-spacing:0;}
th, td {text-align:left; font-weight:normal;}
img, iframe {border:none; text-decoration:none;}
ol, ul{list-style:none;}
input, textarea, select, button {font-size:100%; font-family:inherit;}
select{margin:inherit;}
hr{margin:0; padding:0; border:0; color:#000; background-color:#000; height:1px}
*{
vertical-align:baseline;
font-family:inherit;
font-style:inherit;
font-size:100%;
border:none;
padding:0;
margin:0;
}
body{
padding:5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl{
margin:20px 0;
}
li, dd, blockquote{
margin-left:40px;
}
table{
border-collapse:collapse;
border-spacing:0;
}
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend{
vertical-align:baseline;
font-family:inherit;
font-weight:inherit;
font-style:inherit;
font-size:100%;
outline:0;
padding:0;
margin:0;
border:0;
}
:focus{
outline:0;
}
body{
background:white;
line-height:1;
color:black;
}
ol, ul{
list-style:none;
}
table{
border-collapse:separate;
border-spacing:0;
}
caption, th, td{
font-weight:normal;
text-align:left;
}
blockquote:bfore, blockquote:after, q:before, q:after{
content: "";
}
blockquote, q{
quotes:"" "";
}
:link, :visited{text-decoration:none;}
ul, ol{list-style:none;}
h1, h2, h3, h4, h5, h6, pre, code{font-size:1em;}
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
{margin:0; padding:0;}
a img, :link img, :visited img{border:none;}
address{font-style:normal;}
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;
}
*{
margin:0;
padding:0;
border:none;
}
html{
font:62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow:#000 0px 0px 0px;
}
ul{
list-style:none;
list-style-type:none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address{
font-weight:normal;
margin:0 0 1em 0;
}
cite, em, dfn{
font-style:italic;
}
sup{
position relative;
bottom:0.3em;
vertical-align:baseline;
}
sub{
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
li, dd, blockquote{
margin-left:1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea{
font-size:100%;
font-family:monaco, "Lucida Console", courier, mono-space;
}
del{
text-decoration:line-through;
}
ins, dfn{
border-bottom:1px solid #ccc;
}
small, sup, sub{
font-size:85%;
}
abbr, acronym{
text-transform:uppercase;
font-size:85%;
letter-spacing:.1em;
border-bottom-style:dotted;
border-bottom-width:1px;
}
a abbr, a acronym{
border:none;
}
sup{
vertical-align:super;
}
sub{
vertical-align:sub;
}
h1{
font-size:2em;
}
h2{
font-size:1.8em;
}
h3{
font-size:1.6em;
}
h4{
font-size:1.4em;
}
h5{
font-size:1.2em;
}
h6{
font-size:1em;
}
a, a:link, a:visited, a:hover, a:active{
outline:0;
text-decoration:none;
}
a img{
border:none;
text-decoration:none;
}
img{
border:none;
text-decoration:none;
}
label, button{
cursor:pointer;
}
input:focus, select:focus, textarea:focus{
background-color:#FFF;
}
fieldset{
border:none;
}
.clear{
clear:both;
}
.float-left{
float:left;
}
.float-right{
float:right;
}
body{
text-align:center;
}
#wrapper{
margin:0 auto;
text-align:left;
}
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, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:normal;
font-style:normal;
font-size:100%;
font-family:inherit;
vertical-align:baseline
}
body{
line-height:1
}
:focus{
outline:0
}
ol, ul{
list-style:none
}
table{
border-collapse:collapse;
border-spacing:0
}
blockquote:before, blockquote:after, q:before, q:after{
content:""
}
blockquote, q{
quotes:"" ""
}
input, textarea{
margin:0;
padding:0
}
hr{
margin:0;
padding:0;
border:0;
color:#000;
background-color:#000;
height:1px
}
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, 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-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
:focus{
outline:0;
}
table{
border-collapse:separate;
border-spacing:0;
}
caption, th, td{
text-align:left;
font-weight:normal;
}
a img, iframe{
border:none;
}
ol, ul{
list-style:none;
}
input, textarea, select, button{
font-size:100%;
font-family:inherit;
}
select{
margin:inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol{margin-left:2em;}
/* == clearfix == */
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
参考にさせて頂いたサイト
CSS | Eric Meyer | resetcss | yui | サイト | リセットCSS | 参考 | 紹介 | 配布
|
タグクラウド
2カラム 3カラム Analytics CSS CSS HappyLife Eric Meyer FLASH Generator Google HTML joomla JTags MCE Opera resetcss SEO Syntax URL W3C Webデザイナー XML XMLサイトマップ Yahoo yui 【小技】 ずれ アイコン インターネット エクステンション エディター オンライン カラーコード キャッチフレーズ コンポーネント コード サイト サイトエクスプローラー サイトマップ サイト内検索 サイト推薦 シャープ シンプル セレクトボックス センタリング タグ タグクラウド チェックボックス ツール テキスト テンプレート ディレクトリ デザイン トレンド バランス パレット フリー プラグイン プレビュー ホームページ ボックス マウス モジュール ラベル ランダム リセットCSS リファレンス リンク集 レイアウト レーティング ロゴ 写真 動き 参考 小技 文法 新規 最終更新日 検索 検証サービス 機能 比率計算 法則 登録運営 白銀比 直感的 簡単 紹介 絞込み 自動生成サイト 色 装飾 見出し 視覚的 計算 記事 軽快 辞書 配布 関連記事 黄金比+ All tags