前回の講座記事ではCSSのプロパティについて勉強しました。今回はCSSの擬似要素・擬似クラスについて学んでいきます。
擬似要素
擬似要素というのはあるコンテンツの一部分にだけ適用したいCSSがある場合に用いられるもので、HTMLの方に負担をかけずにデザインができるようになります。例えばこのサイトの見出し部分を見てもらうとわかりやすいと思いますが、最初の一文字だけに違うCSSを適用してますよね(最初の一文字だけ色がついていて大きく表示されています)。
このように要素の一部分だけCSSのデザインを当てたいときに使われるのが擬似要素です。書き方は簡単で以下のようにセレクタの後ろに付加するだけです。
セレクタ::擬似要素 {
プロパティ: 値;
}| 擬似要素の種類 | 説明 |
|---|---|
| ::before | 要素の直前を指定できる |
| ::after | 要素の直後を指定できる |
| ::first-letter | 要素の最初の文字を指定できる |
| ::first-line | 要素の最初の行を指定できる |
以下ではそれぞれの擬似要素を実際に使って学んでいきましょう。それ以外の擬似要素についてはこちらのページが参考になると思います。
::before
要素の直前を指定できます。例えば以下のように装飾を付けることができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0602.css">
<title>CSS講座</title>
</head>
<body>
<h1>見出し</h1>
<p>サンプル文章。</p>
</body>
</html>h1 {
color: #fff;
padding: 15px;
background-color: #44c7ff;
border-radius: 30px;
}
h1::before {
content: "●";
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
出力結果を見てもらえればわかると思いますが、見出しの直前に『●』が表示されています。ちなみに::before擬似要素に対してcolorプロパティを適用すると『●』の色だけを変えることもできます。
ここで考えてもらいたいのはHTMLのテキストの方には一切負担をかけていない点です。例えば上のような擬似要素を使わずに同じことをしようとすると、h1タグの中にspanタグを入れて、そのspanタグに対してCSSを適用させる手間が発生します。見出しを作るたび忘れずに何度も書かなければいけないのは大変ですよね。
HTMLで文書を記述する際はコンテンツ作成に注力したいので、デザイン的な部分は全てCSSに任せるのが良いと思います。
::after
要素の直後を指定できます。例えば以下のように装飾を付けることができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0604.css">
<title>CSS講座</title>
</head>
<body>
<h1>見出し</h1>
<p>サンプル文章。</p>
</body>
</html>h1 {
color: #fff;
padding: 15px;
background-color: #44c7ff;
border-radius: 30px;
}
h1::after {
content: "●";
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
::beforeの方がわかれば簡単ですね。要素の後ろに『●』がついているのがわかると思います。
::first-letter
要素内の最初の文字を指定できます。例えば以下のように装飾を付けることができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0606.css">
<title>CSS講座</title>
</head>
<body>
<h1>見出し</h1>
<p>サンプル文章。</p>
</body>
</html>h1 {
color: #444;
padding: 15px 0;
border-bottom: 1px #ff8888 dashed;
}
h1::first-letter {
color: #ff8888;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
見出しの最初の文字の色が変わったのがわかると思います。
::first-line
要素ないの最初の一行を指定できます。例えば以下のように装飾を付けることができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0608.css">
<title>CSS講座</title>
</head>
<body>
<h1>見出し</h1>
<p>サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。サンプル文章。</p>
</body>
</html>p::first-line {
color: #ff8888;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
最初の行のみが色がついているのが見てもらえばわかると思います。ブラウザの幅を変えてみると理解が深まるでしょう。
擬似クラス
前半では擬似要素を勉強しました要素の一部に対してCSSを適用することができるのでしたね。後半では擬似クラスについてみていきます。
擬似クラスというのはある要素が特定の状況下になった時にCSSを適用されるもので、わかりやすい例をあげるならマウスが特定の要素の上にきた時にカーソルのデザインが変わるものとかがあります。
以下のように記述をします。擬似要素の時は『:(コロン)』が2つでしたが、擬似クラスを用いる際は1つになるので注意してくださいね。
セレクタ:擬似クラス {
プロパティ: 値;
}| 擬似クラスの種類 | 説明 |
|---|---|
| :hover | オンマウス時について指定できる |
| :link | 未閲覧のリンクについて指定できる |
| :visited | 閲覧済みのリンクについて指定できる |
| :active | クリック時について指定できる |
以下ではそれぞれの擬似クラスを実際に使って勉強していきましょう。それ以外の擬似クラスについてはこちらのページが参考になると思います。
:hover
要素の上にマウスカーソルが乗った時のCSSを指定できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0610.css">
<title>CSS講座</title>
</head>
<body>
<div class="button-sample">ボタン</div>
<p>
<a class="link-sample" href="https://www.iwachoco.com/wp">岩ちょこlab</a>
</p>
</body>
</html>.button-sample {
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
background-color: #00bbb6;
}
.button-sample:hover {
color: #444;
background-color: #9cfcff;
transition: 0.5s;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
マウスを乗せた時に、要素の色が変わったのがわかると思います。動的なものはJavaScriptを使うのが通例ですがCSSの擬似クラスを使うことで簡単なものに関してはCSSだけでも実装できます。
:linkと:visited
未閲覧のページがリンクされている時の指定を:linkで、閲覧済みのページがリンクされている時の指定を:visitedで行います。閲覧済みのページリンクが紫色で表示されているのをみたことがあると思いますがアレを実現するための擬似クラスになります。
実際に確認してみましょう。今回はわかりやすいように、未閲覧ページのリンクを赤に、閲覧済みのリンクを緑にしてみます。ここでは試しにダミーのリンクを使ってみてもらうので、リンクをクリックすると『Not Found』が出ます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0612.css">
<title>CSS講座</title>
</head>
<body>
<div class="button-sample">ボタン</div>
<p>
<a class="link-sample" href="https://www.iwachoco.com/wp/dummy">岩ちょこlab(ダミー)</a>
</p>
</body>
</html>.link-sample:link {
color: red;
}
.link-sample:visited {
color: green;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
ブラウザのリンクの色をサイトのデザインに合わせて変えたい場合くらいしか使い道がないですが、こんなこともできるというのを頭の片隅に置いておくと良いですね。
:active
要素がクリックされた場合のCSSを指定できます。
以下の文書で表示されるボタンを長押ししてみてください。クリック時の挙動が確認できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tc0614.css">
<title>CSS講座</title>
</head>
<body>
<div class="button-sample">ボタン</div>
</body>
</html>.button-sample {
width: 200px;
padding: 20px;
text-align: center;
color: #fff;
background-color: #00bbb6;
}
.button-sample:hover {
color: #444;
background-color: #9cfcff;
transition: 0.5s;
}
.button-sample:active {
color: #fff;
background-color: #007377;
}確かめたい人はこちらのページと同じか確認してみてくださいね。>>出力結果
マウスをホバーした際に明るい色に、クリックした際に濃い色になるようにしてみました。実際に確認してみてくださいね。
まとめ
今回でHTMLとCSSの基本的な部分は終了しました。最低限この講座で扱った内容だけでも抑えておくと良いでしょう。細かいところは実際にwebサイトを作る際に調べながら身につけていけばOKです。
次回からはデモサイトをデザインしながら実践的なスキルを身につけていきましょう！
最後まで記事を見ていただきありがとうございます。また別の記事でお会いできることを祈っております。
