擬似クラスとリセットCSS
リンクの色(擬似クラス:Pseudo-classes)
- 要素の性質スタイルを適用させたい場合に使います
- 主に「a要素」のリンク時のカーソルの表示状態を設定します
疑似クラスには次の6種類があります。
lang | 指定された言語のスタイル |
---|---|
link | 通常リンク(未アクセス)のスタイル |
visited | アクセス済みリンクのスタイル |
hover | ポイント時のスタイル |
focus | フォーカス時のスタイル |
active | アクティブ時のスタイル |
まず「リンク時の設定」を理解しましょう。
「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の全体像をつかめないと理解しにくいのも「リセット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: "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"; /* reset */ * { margin: 0; padding: 0; }
《過去のレイアウトのためのCSSを修正》
@charset "UTF-8"; /* reset */ ここに指定した要素名を記述 { margin: 0; padding: 0;
この記述の意味を理解するためには、
「margin」「padding」「background-color」
つまり、ボックスモデルの概念を理解することが必須です。