擬似クラスとリセットCSS

リンクの色（擬似クラス：Pseudo-classes）

• 要素の性質スタイルを適用させたい場合に使います
• 主に「a要素」のリンク時のカーソルの表示状態を設定します

疑似クラスには次の6種類があります。

lang	指定された言語のスタイル
link	通常リンク（未アクセス）のスタイル
visited	アクセス済みリンクのスタイル
hover	ポイント時のスタイル
focus	フォーカス時のスタイル
active	アクティブ時のスタイル

※focus と lang の指定は、IE6まででは対応していません。
　まず「リンク時の設定」を理解しましょう。

「link（未訪問）」
「visited（訪問済み）」
「hover（カーソルがリンクに重なったとき）」
「active（リンクに対してアクティブな瞬間）」

• リンクに疑似クラスを使用する際には、link → visited → hover → active 、といった順序で記述する必要があります。

の４つの疑似クラスの前には「：」コロンをつけます。

a:link {
　　　color: #0000fe;
}
a:visited {
　　　color: #880088;
}
a:hover {
　　　color: #ff6600;
}
a:active {
　　　color: #ff000;
}

子孫セレクタによりリストに適用

li a:link    { color : #00f ; text-decoration : none ; }
li a:visited { color : #369 ; text-decoration : none ; }
li a:hover   { color : #f00 ; text-decoration : underline ; }
li a:active  { color : #f60 ; text-decoration : underline ; }

適切なフォントファミリー

• 日本語の場合、フォントメーカーの制約から自由な選択は出来ません

現在多く利用されているブラウザで、文字を綺麗に表示するためには以下のような記述の順序が必須になります。

	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;

リセットCSS

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro",
    "Hiragino Kaku Gothic Pro W3",
    "メイリオ",
    Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS PGothic",
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style-type: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}