CSSの基本の最近のブログ記事

ブラウザはそれぞれ、独自のCSSファイルを持っているため、CSSを指定していないと、ブラウザ間で差異が発生します。ブラウザ間で差異を無くすためのCSSとして、主に「リセットCSS」と「ノーマライズCSS」があります。

リセットCSSとは

リセットCSSとは、ブラウザに初期設定されているCSSを無効化するものです。そのため、全ての要素が同一のスタイルで表示されてしまいます。 リセットCSSを提案しているサービスは多くあるのですが、一番有名どころの>Yahoo! UI Libraryを紹介します。

CSSコード

/*
YUI 3.7.2 (build 5639)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF. 
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
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;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

ノーマライズCSSとは

ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSを活用し、最小限のスタイルを備えたCSSです。その上で、ブラウザ間の差異を無くしたものです。そのため、見出しや段落といったものがわかりやすくなります。

ノーマライズCSSについてはこちらの記事を参考にしてください。

CSSコード

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Removes default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}


/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * Removes border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

CSSを記述する際、余白やインデントに関して、自分なりあるいは複数で管理する場合はプロジェクト単位でルールを決めておくと、見やすさ(可読性)が向上します。

ちなみに私の書き方は以下のとおりです。

CSSコード

selecter {
   property:value;
}
  1. selecter名と「{」の間に半角スペースを空ける
  2. propertyの前に半角3文字分スペースを空ける
  3. propertyおよびvalueと「:」の間にはスペースを空けない
  4. valueと「;」の間にはスペースを空けない
  5. propertyがひとつしかない場合でも、必ずvalueの後に「;」はつける

基本的にスペースは付け忘れが多いため、空けないようにしているのですが、selecterの後には必ずスペースを入れるようにしています。これは、CSSファイル内でselecterを検索する際、スペースを空けておくと便利なことが多いからです。

CSSを記述する際、プロパティの順序を自分なりに決めておくと、二重に指定したりするミスも減り、メンテナンスも楽になります。

私のプロパティの指定順序を紹介します。ワイヤーフレームはidを使い、それ以外にはclassを使うようにしています。ご自分のメンテナンスのしやすい並び順を模索してみてください。

1.ワイヤーフレームに関するプロパティ

CSSコード

div#name {
/* 表示・配置に関する設定 */
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   text-align: ;
   background: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   min-height: ;
   height: ;
   max-height: ;
   margin: ;
   padding: ;
   border: ;
}

2.一般的なclass属性

CSSコード

.name {
/* 表示・配置に関する設定 */
   display: ;
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   overflow: ;
   visibility: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   max-width: ;
   min-height: ;
   height: ;
   max-height: ;
   vertical-align: ;
   margin: ;
   padding: ;
   border: ;

/* テキスト・背景に関する設定 */
   color: ;
   font-family: ;
   font-style: ;
   font-weight: ;
   font-size: ;
   text-indent: ;
   text-align: ;
   text-decoration: ;
   letter-spacing: ;
   line-height: ;
   background: ;
}

その他の要素特有のプロパティ、例えばul要素の「list-style-type」などは、スタイルの最後に記述するようにしています。

参考サイト

DOCTYPE宣言によってCSSのレンダリングが変わるのですが、以下の3つのモードがあります。

  1. 完全標準モード(Full Standards Mode)
  2. ほぼ標準モード(Almost Standards Mode)
  3. 後方(過去)互換モード(Quirks Mode)

これらの違いを見ていきます。

1.完全標準モード(Full Standards Mode)

仕様に則ったとおりにレンダリングされます。ここでいう仕様とはW3C標準仕様のことで、以下の仕様書のことを指します。

2.ほぼ標準モード(Almost Standards Mode)

完全標準モードとほぼ標準モードの違いは1点だけです。

画像の表示に違いがあります。完全標準モードでは画像のvertical-alignプロパティの初期値はbaselineなのですが、ほぼ標準モードではvertical-alignプロパティの値はbottomとなります。

vertical-alignプロパティの値がbaselineであると、画像の下に空白が生じます。この理由は当blogの以下の記事を参考にしてください。

3.後方(過去)互換モード(Quirks Mode)

完全標準モードと後方互換モードにはかなり違いがあります。

最も知られているのはボックスモデルの違いです。ボックスにwidthとpaddingとborderを指定した場合、完全標準モードでは横幅 = width + padding + borderになるのに対し、後方互換モードでは横幅 = widthとなってしまいます。

その他にもいろいろあるのですが、量が多いのでここでは割愛します。以下のサイトなどを参考にしてみてください。

DOCTYPEスイッチ一覧表

DOCTYPEスイッチによるモードの違いを表にしたものです。以下のサイトをご覧ください。また、同時に「表示モードごとの CSS 解釈検証表」も載っているので合わせて参考にしてください。

最近のモダンブラウザは、W3Cで勧告されていないCSSでも先行して実装しています。それによりソースコードが簡潔でよりリッチなデザインが可能となりました。

ただし注意しなければならないことは、勧告されていないCSSプロパティや独自プロパティはプレフィックス(接頭辞)を指定しなければなりません。つまり、IEの場合は先頭に「-ms-」が、Mozilla系では「-moz-」が、Operaでは「-o-」を、SafariやChromeの場合先頭に「-webkit-」はをつけなければなりません。

これは、CSS2.1でも定められていることらしいです。

IEでは独自実装でもプレフィックスがついていなかったのですが、IE8からプレフィックスの使用が可能になったようです。

それぞれのブラウザの独自実装CSSプロパティは以下を参考にしてください。

Mozilla系
IE8

参考サイト

CSS3は2009年7月8日現在、Working Draftの段階ですが、モダンブラウザでは先行して実装されています。

Webサイトを制作する際、IEがネックとなっていますが、IE8ではよりWeb標準に近づいた動作をしますので、積極的に新しいCSSに挑戦するのも面白いと思います。

さて本題ですが、CSS3を含むCSSセレクタを一覧にしました。ご参考ください。

セレクタパターン意味セレクタの種類定義されたCSSレベル
* すべての要素を対象にするセレクタユニバーサルセレクタ2
E E要素に対してスタイルを適用タイプセレクタ1
E[foo] foo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo="bar"] barという値のfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo~="bar"] barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo^="bar"] barという値から始まるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo$="bar"] barという値で終わるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo*="bar"] barという文字列を含むfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[hreflang|="en"] en(言語)という値のhreflang属性をもつE要素に対してスタイルを適用属性セレクタ2
E:root ドキュメント内のルート要素である E という要素にスタイルを適用(HTMLの場合はhtml)擬似クラス3
E:nth-child(n) 親要素の n 番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-last-child(n) 親要素の 最後から数えてn番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-of-type(n) 兄弟関係にある n 番目の E 要素にスタイルを適用擬似クラス3
E:nth-last-of-type(n) 兄弟関係にある 最後から数えてn 番目の E 要素にスタイルを適用擬似クラス3
E:first-child 親要素の最初の子要素である E 要素にスタイルを適用擬似クラス2
E:last-child 親要素の最後の子要素である E 要素にスタイルを適用擬似クラス3
E:first-of-type 兄弟関係にある最初の E 要素にスタイルを適用擬似クラス3
E:last-of-type 兄弟関係にある最後の E 要素にスタイルを適用擬似クラス3
E:only-child 親要素の唯一の(兄弟関係を持たない) 子要素であるE要素にスタイルを適用擬似クラス3
E:only-of-type 兄弟関係にあるE要素にスタイルを適用擬似クラス3
E:empty テキストノードも含めて子要素を持たないE要素にスタイルを適用擬似クラス3
E:link未訪問のハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:visited 訪問済みハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:activeクリックなどでアクティブになったE要素にスタイルを適用ダイナミック擬似クラス1
E:hoverマウスポインタで指し示されたE要素にスタイルを適用ダイナミック擬似クラス1
E:focus タブキーなどでフォーカスされているときのE要素にスタイルを適用ダイナミック擬似クラス2
E:target 参照URIの目標であるE要素にスタイルを適用ターゲット擬似クラス3
E:lang(fr) 前方一致で fr という lang 属性値を持つE要素にスタイルを適用言語擬似クラス2
E:enabled有効な (:enabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:disabled 無効な (:disabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:checked ラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素にスタイルを適用UI 要素状態擬似クラス3
E::first-line E要素の最初の 1行にスタイルを適用擬似要素1
E::first-letter E要素の最初の 1文字にスタイルを適用擬似要素1
E::selection ユーザが選択したE要素の一部にスタイルを適用擬似要素3
E::before E要素の内容の前にスタイルを適用擬似要素2
E::after E要素の内容の後にスタイルを適用擬似要素2
E.warning warningというクラス名を持つE要素にスタイルを適用クラスセレクタ1
E#myid myidというID名を持つE要素にスタイルを適用IDセレクタ1
E:not(s) sでないセレクタを持つE要素にスタイルを適用否定擬似クラス3
E F E要素と孫子関係にあるF要素にスタイルを適用子孫セレクタ 1
E > F E要素と直接の子関係にあるF要素にスタイルを適用子セレクタ2
E + F E要素と弟関係にあるF要素にスタイルを適用隣接セレクタ2
E ~ F E要素が前にあるF要素にスタイルを適用間接セレクタ3

参考サイト

私もきちんとしたものを作ってはいないのですが、ホームページを作る際、コーディングガイドラインがあると、複数人でも統一した書き方が出来、メンテナンスも楽になります。

秀逸なコーディングガイドラインを作っている方がいらっしゃるので今回はそちらを紹介します。

山田あかねさんのCSSのコーディングガイドラインです。山田さんは、エスカフラーチェのWebデザイナーさんで、書籍や雑誌にもよく記事を書いてらっしゃいます。

上ノ郷谷太一さんのCSSのコーディングガイドラインです。上ノ郷谷さんはMovableTypeでお馴染みのシックス・アパートに勤務されている方です。

あと、こちらはガイドラインというか、ガイドラインのまとめのような記事ですが、非常によくまとまっています。

ショートハンドプロパティとは、1つのプロパティタグを使用して複数のプロパティ値を指定するプロパティのことです。よくわからないと思うので、サンプルを交えながら説明していきます。

1.margin関連プロパティを一括指定する

marginでは個別にtop、bottom、left、rightを指定することができますが、これをmarginというショートハンドプロパティを用いることで一括で指定できます。

その際、以下のような組み合わせで指定できます。

CSSコード

/* 上下左右、全て10px */
margin:10px;

/* 上下10px、左右20px */
margin:10px 20px;

/* 上10px、左右20px、下30px */
margin:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
margin:10px 20px 30px 40px;

2.padding関連プロパティを一括指定する

paddingもmarginと全く同じなので説明は割愛します。

CSSコード

/* 上下左右、全て10px */
padding:10px;

/* 上下10px、左右20px */
padding:10px 20px;

/* 上10px、左右20px、下30px */
padding:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
padding:10px 20px 30px 40px;

3.list-style関連プロパティを一括指定する

list-styleではtype、image、positionを指定できます。省略したものは初期値が指定されます。順番も順不同です。

大抵、typeとimageのどちらかを指定し、あまりposionも変更することはないと思うので、以下のような使い方が多いかと思います。

CSSコード

list-style:none;

4.background関連プロパティを一括指定する

backgroundではcolor、image、repeat、position、attachmentを指定できます。省略したものは初期値が指定されます。順番も順不同です。ただし、posionは横軸、縦軸の順に指定します。

CSSコード

background:transparent url(img.gif) no-repeat 0 100% fixed;

5.border関連プロパティを一括指定する

borderには上下左右のwidth、style、colorを指定できます。そのため、様々なショートハンドプロパティがあります。

CSSコード

/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;

/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;

/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;

/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;

/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;

/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;

/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;

/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;

6.font関連プロパティを一括指定する

font-style、font-variant、font-weight、font-size/line-height、font-famillyの順で指定できます。line-heightはfont~で始まらないし、直前に「/」を入れないといけないので注意が必要です。

fontに関するショートハンドプロパティはあまりお勧めしません。なぜならプロパティの数も多い上に順番が決まっているからです。ただし、font-style、font-variant、font-weightの3つは順番を入れ替えて指定できます。順番を間違えてしまうとCSSが適用されないので注意です。

また、フォントの太さと種類は省略不可です。

CSSコード

font:italic small-caps 100%/1.4 Osaka, verdana, sans-serif;

id名やclass名をつけるとき、あなたはどのように命名していますか?

日本語(2バイト文字)が使えないので英単語を使うのが一般的になっていますね。問題は英単語を2つ以上くっつけた名前にしたいとき、英単語の連結をどのように表現するか?以下の4つの方法が思いつきます。

  • アンダーバー(_)でつなぐ
  • ハイフン(-)でつなぐ
  • キャメルケースを使う
  • 単語を全て小文字でつなぐ

1.アンダーバー(_)でつなぐ

例:main_contents

アンダーバー(アンダースコア)を利用すると、エディタでCSSを編集する際、ダブルクリックで選択できるので重宝します。しかし、IE5.5以前のような古いブラウザでは不具合を起こすことがあると言われています。

しかしながら、そこまで古いブラウザだとアンダーバー以外にも不具合が出そうなので、IE5.5以前にはスタイルシートを適用しないようにするのも手かもしれません。

2.ハイフン(-)でつなぐ

例:main-contents

アンダーバーでは一部ブラウザで不具合が出ることからハイフンを使用する人も多いですね。エディタではダブルクリックで選択できないのですが、それがよいので使っている方もいるようです。

こころなしか、CSSerというかマークアップエンジニアの方とかこの書き方多い気がします。

3.キャメルケースを使う

例:mainContents

キャメルケース(CamelCase)とは2番目以降の英単語の最初の文字を大文字で表す記法です。他のプログラミングなどやっていると馴染み深いですよね。

4.単語を全て小文字でつなぐ

例:maincontents

英単語を全て小文字で書いて、区切りもないというパターンです。可読性が落ちてしまうのであまりお勧めできない記法ですね。

どの書き方でも問題はないと思いますが、CSSファイル内では統一させたほうがメンテナンスなどにはよいと思います。

ちなみに私は、CSSを始めた当初はアンダーバー派だったのですが、Javaをやるようになってキャメルケース派になりました。これだとブラウザのことも気にしないでいいし、可読性もなかなかよいです。何よりダブルクリックで選択できるのが嬉しい。

当サイトでも以前、ブラウザのデフォルトスタイルシートをリセットする方法を紹介しましたが、他のサイトでも様々なデフォルトスタイルシートのリセット方法を提案しています。

そのひとつのYUI Reset CSSを紹介します。

主に余白部分(margin、padding)とフォント関連をリセットしています。

CSSコード

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;
}