疑似要素の使い方。「:before」「:after」「:first-line」「:first-letter」

CSSでスタイルを指定するときに、要素の全体ではなく一部だけにスタイルを適用したい場合があると思います。しかし、通常だと全体的にスタイルが適用されてしまうため、部分的に装飾することは出来ません。

そこで、「疑似要素」と呼ばれる特殊な要素を使用します。これを使うことで、要素の前後や1行目などを選択して、ピンポイントで装飾することが可能です。オシャレな装飾をすることもできるので、インパクトはかなり大きくなります。

ここでは、疑似要素について解説をします。

 

要素の前後にスタイルを適用する(:before)(:after)

見出しや注意書きなどで、前後に記号などを付けて目立たせたいときには、「:before」や「:after」を使います。「※」や「★」などの記号は、HTMLに書いても良いですが、本来の目的から言うと不要なものです。だから、コンテンツに関係ないものは、極力記述しない方が望ましいですね。

なので、疑似要素を使用して、CSSでスタイルを指定するようにしましょう。記述方法としては、「要素名:before {content:”※” ;}」となります。「contentプロパティ」で値を指定します。

たとえば、次のように使いましょう。

【CSS】
p.giji:before {content: “★”;}
p.giji:after {content: “☆”;}


【HTML】
<p class=”giji”>疑似要素のサンプル</p>

以下のように、HTMLに記述しなくても記号を表示できます。

疑似要素のサンプル

 

要素の先頭にスタイルを適用する(:first-line)(:first-letter)

そして、疑似要素を使えば、要素の1行目や1文字目にスタイルを適用することも可能です。「:first-line」で要素の1行目に、「:first-letter」で要素の1文字目を指定できます。使う機会は多くないかもしれませんが、目を引くような装飾をすることができます。

たとえば、次のように使用しましょう。

【CSS】
p.giji2:first-line {background-color: #FFFF00;
font-weight: bold;}

p.giji3:first-letter {font-size: 2em;
background-color: #7CFC00;}


【HTML】
<p class=”giji2″>本日のおすすめメニューは、「伊勢海老のパスタ」です。獲れたての伊勢海老をふんだんに使用した、自慢の一品となっております。ぜひ、ご来店くださいませ。</p>

<p class=”giji3″>本日のおすすめメニューは、「伊勢海老のパスタ」です。獲れたての伊勢海老をふんだんに使用した、自慢の一品となっております。ぜひ、ご来店くださいませ。</p>

目に留まりやすくなりますから、精読率がアップするかもしれません。注意を引く箇所に、疑似要素を使ってスタイルを適用しましょう。

本日のおすすめメニューは、「伊勢海老のパスタ」です。獲れたての伊勢海老をふんだんに使用した、自慢の一品となっております。ぜひ、ご来店くださいませ。


本日のおすすめメニューは、「伊勢海老のパスタ」です。獲れたての伊勢海老をふんだんに使用した、自慢の一品となっております。ぜひ、ご来店くださいませ。

 

以上、疑似要素の使い方を紹介しました。アイデア次第で色々な場所に使用できますから、活用すると良いでしょう。オシャレなWebサイトにしたいなら、利用価値が高いと思います。

サブコンテンツ

このページの先頭へ