リンクの色(擬似クラス:Pseudo-classes)
- 要素の性質スタイルを適用させたい場合に使います
- 主に「a要素」のリンク時のカーソルの表示状態を設定します
疑似クラスには次の6種類があります。
lang |
指定された言語のスタイル |
link |
通常リンク(未アクセス)のスタイル |
visited |
アクセス済みリンクのスタイル |
hover |
ポイント時のスタイル |
focus |
フォーカス時のスタイル |
active |
アクティブ時のスタイル |
※focus と lang の指定は、IE6まででは対応していません。
まず「リンク時の設定」を理解しましょう。
「link(未訪問)」
「visited(訪問済み)」
「hover(カーソルがリンクに重なったとき)」
「active(リンクに対してアクティブな瞬間)」
- リンクに疑似クラスを使用する際には、link → visited → hover → active 、といった順序で記述する必要があります。
の4つの疑似クラスの前には「:」コロンをつけます。
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 ; }
適切なフォントファミリー
- 日本語の場合、フォントメーカーの制約から自由な選択は出来ません
2013年7月現在の設定方法
- iOSにはProNしか入っていません(初期設定は、W3)
- ヒラギノ角ゴの英数字が読みにくいという考え方もありますが、Macの日本語の初期設定のため、欧文書体を指定することによる違和感がある場合は、「Hiragino Kaku Gothic ProN」の前には欧文書体を入れないようにします
- 同様にWindowsは英数字もメイリオのままにしておきたいので、メイリオの前にArialやLucida Sansを入れないようにします
- 「MS Pゴシック」は指定しなくても必要なときには出るので記述しない
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
もし、Windowsで英数字は「Verdana」、Macで英数字は「Lucida Grande」にしたい場合は、
font-family:
"Lucida Grande",
"Hiragino Kaku Gothic ProN",
Verdana,
Meiryo,
sans-serif;
- リセットする意味を理解する必要がありますが、初学者にとってCSSの全体像をつかめないと理解しにくいのも「リセットCSS」です
- 一度に「こう記述するものだ」とするのも間違いではありませんが、あわてず少しずつ理解して行きましょう
@charset "UTF-8";
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:
"Lucida Grande",
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}
- リセットCSSは、Web歴史的な背景を背負っているため、仕事のなかでも「ベター」な選択があるだけで、絶対的なルールではありません
- 将来的には「Normalize.css」という選択肢もありますが、初学者の選択肢ではありません
- 授業内では、「リセットCSS」の根拠を理解する必要があるため、単純な記述から初めて徐々に複雑にしていきます
《過去のレイアウトのためのCSS》
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
《過去のレイアウトのためのCSSを修正》
@charset "UTF-8";
ここに指定した要素名を記述 {
margin: 0;
padding: 0;
この記述の意味を理解するためには、
「margin」「padding」「background-color」
つまり、ボックスモデルの概念を理解することが必須です。