HTML5/CSS3の授業ノート

セレクタの後ろに「:擬似クラス名」を追記することである要素の特定の状態や特定の子要素だけにスタイルを指定することができます。
HTMLには一切変更を加える必要がなく、変更する時もCSSの修正だけで済むというメリットがあります。
記述方法は、デザインを適用させたい要素の後に「:」をつけて擬似クラスを指定します。

リンク関連でよく使うもの

擬似クラス名

説明

:link

リンク先が未訪問の時

:visited

リンク先が訪問済みの時

:hover

カーソルが要素に触れているが、アクティブでない時

:active

クリックした瞬間からリンク先にジャンプするまでの一瞬の変化

:visitedの内容は:link、:hover、:activeによって上書きされるため上から順に記述する

『何番目かの子要素』に対する指定をするもの

擬似クラス名

説明

:first-child

兄弟のうち一番初めの子要素

:last-child

兄弟のうち一最後の子要素

:nth-child(n)

兄弟のうちn番目の子要素

:first-of-type

兄弟要素のうち型が一致する一番初めの子要素

:last-of-type

兄弟要素のうち型が一致する一番最後の子要素

:nth-of-type(n)

兄弟要素のうち、型が一致する要素のn番目

:not(:nth-of-type(n))

兄弟要素のうち、型が一致する要素のn番目"以外"

(n)には、実数値、奇数(odd)、偶数(even)、3の倍数(3n)などが指定できる

そのほか

擬似クラス名

説明

:target

アンカーリンクのターゲット先の要素にスタイルを適用

:focus

テキスト入力にフォーカスされている要素

他にもたくさんあります。覚えるととても便利なので、使ってみてください。

セレクタの後ろに「::擬似要素名」を追記することで、HTMLの記述に影響を与えずにコンテンツの内容やスタイルを変更するものです。
選択した要素の先頭(::before)または文末(::after)に文章を追加したり、文章の1行目(::first-line)や1文字目(::first-letter)文字色やサイズを変化することなどができます。

CSS3では、デザインを適用させたい要素の後に「::擬似要素名」と記述することになっていますが、CSS2では「:」シングルコロンでした。そのため、CSS3に対応していないブラウザではコロン2つでは認識できない可能性があります。
つまり、本当は「コロン2つ」だけど今のところは「コロン1つ」の方が多くのブラウザで使える、ということです。

リスト項目の先頭に表示されるマーカーの種類や位置を調整したり、装飾したりすることができます。

• disc
• square
• decimal
• upper-roman

など、たくさんの種類があります。

リストの先頭につけるマークを指定したい

list-style-type:キーワード;

継承

継承する

適用要素

リスト項目(li要素、ul/olに指定した場合はliに継承)

値

説明

disc(ul)
decimal(ol)
none
など他多数

リスト項目の先頭に表示されるマークの種類を指定。マークの種類は後述
-imageと同時に指定されている場合、imageが優先され、表示できなかった場合はこの値が適用される。

リストのマークに画像を使用したい

list-style-image:キーワード;

継承

継承する

適用要素

リスト項目(li要素、ul/olに指定した場合はliに継承)

値

説明

none

画像なし

url("画像ファイル名")

リスト項目のマークとして表示させる画像を指定。
-typeと同時に指定された場合はこちらが優先される

リストのマークの配置を指定したい

list-style-position:キーワード;

継承

継承する

適用要素

リスト項目(li要素、ul/olに指定した場合はliに継承)

値

説明

outside

背景の外側に表示する。

inside

背景の内側に入るが、テキストが改行している場合頭が揃わなくなる。

リストスタイルの一括指定プロパティ。

list-style:キーワード;

継承

継承する

適用要素

リスト項目(li要素、ul/olに指定した場合はliに継承)

値

説明

3つの値を記述(順不同)

noneを入れると-typeと-imageが両方noneになるので注意。

*は初期値。

list-styleに関わるプロパティの練習用ファイルダウンロード

ボーダー(罫線)の表示形式を指定したい

border-collapse:キーワード;

継承

継承する

適用要素

table要素

値

説明

collapse

ボーダー(罫線)を重ねて表示する

separate

ボーダー(罫線)を分離させて表示する

*は初期値。

ボーダー(罫線)の隙間を指定したい

border-spacing:キーワード;

継承

継承する

適用要素

table要素

値

説明

0

隙間を開けずに表示する。

(数値)単位

ボーダー(罫線)を分離させて表示する。
値が一つの場合は上下左右同じ間隔、値二つを半角スペースで区切って記述した場合は左右・上下の順に適用される。
(marginやpaddingと逆になるので注意)

*は初期値。

border-collapse:collapse;/border-spacing:0;(ともに初期値)の場合

りんご	みかん	ぶどう	メロン	すいか
100	40	580	1000	2000

border-collapse:separate; / border-spacing:0;(初期値)の場合

りんご	みかん	ぶどう	メロン	すいか
100	40	580	1000	2000

border-collapse:separate; / border-spacing:2px;の場合

りんご	みかん	ぶどう	メロン	すいか
100	40	580	1000	2000