[新着] Webテンプレートを仮オープンしました
疑似要素には次の4種類があります。
| first-line | ブロック要素内の1行目のスタイル |
| first-letter | ブロック要素内の先頭1文字のスタイル |
| before | 要素直前の内容に対するスタイル |
| after | 要素直後の内容に対するスタイル |
疑似要素を使用することにより、要素の一部分に対してスタイルを指定することができます。
※before と after の指定は、contentプロパティと組み合わせて使用します。
※before と after の指定は、IEでは対応していません。（IE6で確認）
要素名とコロン（ : ）に続けて、疑似要素を記述します。
例えば、p要素に first-line を指定する場合は、次のような記述になります。
p:first-line { color: red; }
上記の例では、p要素内の一行目の文字色を赤に指定しています。
疑似要素（first-line）を、段落で使用した場合のサンプルです。
この例では、段落の1行目の文字色を赤に指定しています。ブラウザの幅を変更した場合でも、常に1行目の文字が赤くなります。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { width: 50%; }
p:first-line { color: red; }
-->
</style>
</head>
<body>
<p>これは1つ目の段落です。1行目の文字列が赤く表示されます。ブラウザの幅を動かすと改行位置が変化しますが、その場合でも常に1行目の文字色が赤になります。</p>
<p>これは2つ目の段落です。1行目の文字列が赤く表示されます。ブラウザの幅を動かすと改行位置が変化しますが、その場合でも常に1行目の文字色が赤になります。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
疑似要素（first-letter）を、段落で使用した場合のサンプルです。
この例では、段落の先頭1文字目のスタイルを、［200%に拡大、太字、赤色］に指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { width: 50%; }
p:first-letter {
font-size: 200%;
font-weight: bold;
color: red;
}
-->
</style>
</head>
<body>
<p>最初の段落です。先頭の文字を目立たせることで、文章の表示にメリハリを持たせることができます。</p>
<p>ただし、あまり使いすぎると逆に読みづらい文章になってしまうので、よく考えてから使用しましょう。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
疑似要素（before、after）を、段落で使用した場合のサンプルです。この2つの疑似要素は、contentプロパティと組み合わせて使用します。（IEでは対応していません）
この例では、段落の直前と直後に文字列を追加して、それぞれの文字スタイルを指定しています。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { width: 50%; }
p:before {
content: "直前→";
color: red;
}
p:after {
content: "←直後";
color: blue;
}
-->
</style>
</head>
<body>
<p>段落直前に「直前→」という文字列を加えて赤で表示し、段落直後に「←直後」という文字列を加えて青で表示しています。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
要素名に対して疑似要素の指定を行うと、その種類の要素全てに対して疑似要素の指定内容が適用されてしまいます。（例えば、p要素を使った疑似要素の指定では、ページ内にある全ての段落でその指定内容が適用されます。）
これを、部分的に適用させたい場合（例えば一部の段落にのみ疑似要素を使用したい場合等）には、通常のクラス名を加えて指定を行うか、入れ子にした指定を行います。
【クラス名を含めて指定する場合】
example というクラス名を加えた例
p.example:first-line { color: red; }
要素名（p）、ピリオド（ . ）、クラス名（example）、コロン（ : ）、疑似要素、といった順番で記述します。
上記のように指定しておくと、example というクラス名が指定されたp要素にのみ、スタイルの指定内容が適用されます。
【クラス名を含めて指定した場合の例】
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { width: 50%; }
p.example:first-line { color: red; }
-->
</style>
</head>
<body>
<p class="example">この段落にスタイルの指定が適用されます。この段落にスタイルの指定が適用されます。この段落にスタイルの指定が適用されます。</p>
<p>この段落には適用されません。この段落には適用されません。この段落には適用されません。この段落には適用されません。</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
【入れ子に指定する場合】
example というクラス名を使用した例
.example p:first-line { color: red; }
クラス名（example）と要素名（p）の間には、半角のスペースが入ります。
上記のように指定しておくと、example というクラス名が指定された要素内のp要素にのみ、スタイルの指定内容が適用されます。
【入れ子に指定した場合の例】
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p { width: 50%; }
.example p:first-line { color: red; }
-->
</style>
</head>
<body>
<div class="example">
<p>この段落にスタイルの指定が適用されます。この段落にスタイルの指定が適用されます。この段落にスタイルの指定が適用されます。</p>
</div>
<div>
<p>この段落には適用されません。この段落には適用されません。この段落には適用されません。この段落には適用されません。</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
