覚えておきたい使えるCSSテクニックまとめ

Reset CSS[Eric Meyer]

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;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background: white;
	line-height: 1;
	color: black;
}
ol, ul {
	list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
/* remove possible quote marks (") from  &
 */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

デバッグ用CSS[Eric Meyer]

div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

Clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

IEでfloatプロパティでmarginが倍になるバグの回避方法

.boxA{
	float: left;
	width: 200px;
	margin: 10px 0 10px 20px;
	display: inline;
}

display:inline;を加える。

モダンブラウザ(Firefox、Safari、Opera等)でのボックスの中央寄せ

.boxA{
	margin:0 auto;
	width:600px;
}

フォントサイズをpx指定感覚でemで指定する方法

body {
	font-size:62.5%;
}

この方法でやると1emは約10px、もし14pxで指定したい場合は、1.4emで指定できます。

先頭の文字(ドロップキャップ)を大きく表示する方法。

.dropCap{
	float:left;
	padding-right:2px;
	font:bold 3em Georgia;
	line-height:1em;
}

<span class="dropCap">T</span>he sentence...........

IE6向けに条件付コメント

<!--[if IE 6]>
IE6用のスタイル
<![endif]-->

IE6用のCSSハック

* html body {
	display:block;
}

IE7用のCSSハック

*:first-child+html body {
	display:block;
}

全ブラウザのリンクカラーの統一

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}