今回のポイント
今回は擬似要素について解説していきます。
これはある動作をした時に、HTMLへ装飾に変化を与える方法となります。
主な例として、以下のようなものがあります。
- 訪問していないリンク
- 訪問したリンク
- マウスポインタが乗った場合
- フォーカスされた場所
それではそれぞれの動作時の装飾方法について解説していきます。
CSSを記述する前準備
本題に入る前に、HTMLの記事（ファイル）とCSSファイルを作成しておきます。
この時今回の装飾を与えるポイントについても解説しておきますので確認を忘れずに。。。
HTMLの記事を準備する
それではいつものように、HTMLの記事を準備しましょう。
準備した記事は、以下の通りです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだ<a href=”a”>HTML</a>のスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法は<a href=”b”>header要素</a>内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部に<a href=”a”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
<div class=”test”>この記事は、ぱくぱくが書きました。</div>
</body>
</html>
今回の記事のポイントとしては、以下の点に注目して下さい。
１．リンク先が『a』に指定されている単語
<p>これまで学んだ<a href=”a”>HTML</a>のスキルを応用して記述する方法になります。</p>
このP要素内の『HTML』の部分
<p>この方法は外部に<a href=”a”>CSSファイル</a>を作成してCSSを記述する方法になります。</p>
このP要素内の『CSSファイル』の部分
２．リンク先が『ｂ』に指定されている単語
<p>この方法は<a href=”b”>header要素</a>内にCSSを記述していく方法になります。</p>
このP要素内の『header要素』の部分
もしリンク先のHTMLが不安な方については、以下の過去の記事を参考にしてみて下さい。
それではこの装飾を与えていないHTMLファイルを、ブラウザで確認しておきましょう。
CSSファイルを準備する
これも過去の記事で解説した内容の１つを使用します。
今回は『外部にCSSファイルを作成する』方法を使って解説します。
以下の方法を参考にして、外部にCSSファイルを作成しておいて下さい。
それでは今回の本題、『擬似要素』について解説していきましょう。
『訪問していないリンク』に対して装飾を指定する。
この方法には以下のセレクタを使用します。
:link {
＊＊＊＊＊
}
このように『:』のあとに『link』を記述することで、『まだ訪問していないリンク』に対して装飾を指定することが出来ます。
実際にCSSを記述してみましょう。
:link {
color: crimson;
}
これで
『まだ訪問していないリンク』を、crimson色に指定できます。
それではブラウザで確認してみましょう。
いかがでしょうか。
リンクタグの部分が全て赤っぽい色に変わったと思います。
『訪問したリンク』に対して装飾を指定する。
それでは次に『訪問したリンク』に対して、文字の色の指定をしてみましょう。
この方法には以下のセレクタを使用します。
:visited {
＊＊＊＊＊
}
このように『:』のあとに『visited』を記述することで、『訪問したリンク』に対して装飾を指定することが出来ます。
実際にCSSを記述してみましょう。
先程のCSSファイルに、次のように追記します。
:link {
color: crimson;
}
:visited {
color: green;
}
これで
『訪問したリンク』を、green色に指定できます。
それではブラウザで確認してみましょう。
まだ変化はありませんね。
ここでこのブラウザの『HTML』をクリックしてみましょう。
！？
なんと『HTML』の文字の色も変化しましたが、『header要素』も同時に文字の色が変化しましたね。
これは
『link』タグでリンク先が同じく『a』と指定されていた為、訪問したリンクとして『header要素』も指定
された結果です。
『マウスポインタが乗った場合』に対して装飾を指定する。
これは『マウスポインタが乗った場合』に、CSSで装飾を与える方法になります。
この方法には以下のセレクタを使用します。
●: hover {
＊＊＊＊＊
{
このように『要素 ＋ :』のあとに『hover』を記述することで、『マウスポインタが乗った場合』に対して装飾を指定することが出来ます。
それでは実際にCSSを記述してみましょう。
先程のCSSファイルに、次のように追記します。
:link {
color: crimson;
}
:visited {
color: green;
}
a:hover {
text-decoration: none;
background-color: grey;
}
今回『a要素』にマウスポインタが乗った場合に与えた装飾は
text-decoration: none;
これはテキストに与えられた装飾を『none』（消す）する。
そして
background-color: grey;
これはいつも使用していますね。
背景色をgreyにする指定です。
それではマウスポインタが乗った場合にどのように装飾されるか確認してみましょう。
こちらは動画でどうぞ！
いかがでしょうか。
マウスポインタが『a要素』に乗った場合に文字の色が変化するのが確認できましたね。
『フォーカスされた場所』に対して装飾を指定する。
これは『フォーカスされた場所』に、装飾を与える方法です。
この方法には以下のセレクタを使用します。
:focus {
＊＊＊＊＊
}
このように『:』のあとに『focus』を記述することで、『フォーカスされた場所』に対して装飾を指定することが出来ます。
それでは実際にCSSを記述してみましょう。
先程のCSSファイルに、次のように追記します。
:link {
color: crimson;
}
:visited {
color: green;
}
a:hover {
text-decoration: none;
background-color: grey;
}
:focus {
background-color: yellow;
}
これで『フォーカスされた場所』は背景色がyellowに指定されました。
それではブラウザで確認してみましょう。
ブラウザを開いたら『tabキー』を押してみて下さい。
『tabキー』を押すたびに、文字の色が移動していきましたね。
これは『tabキー』を押すことで、リンクタグにスポットが当てられているためです。
今回から少しづつ動きのある装飾を、CSSで指定するようになってきました。
このようにCSSでは、ユーザーの動きに合わせて記事を見やすくする効果を与えることが出来ます。
どんどん覚えて、使いこなしていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
