ビジネスとIT活用に役立つブログBlog


擬似要素タグbeforeとafterを活用しよう!基礎知識と使い方を解説!

この記事をシェアする:
前回紹介した擬似要素・擬似クラスの指定方法の中から、今回はbeforeとafterについて詳しく解説をしていきます。
基本的な知識から具体的な活用方法まで、丁寧に解説していきますので是非参考にしてください。

属性要素「before」「after」とは

擬似要素とは、対象の要素の一部を指定して装飾を適用する、もしくは対象の要素に擬似的に要素を追加して装飾を適用するセレクタのことを指します。 このうちbeforeとafterは、後者の対象の要素に擬似的に要素を追加して装飾を適用するセレクタです。 そのほか擬似要素に関しての基本的な知識は前回の記事を参照ください。

beforeとafterの基本的な設定方法

beforeとafterの設定方法は、追加するcontentを指定して要素を装飾します。 cotentを指定しないと擬似要素は現れませんので注意してください。


また、contentの内容は空の状態でも指定できます。


beforeは指定した要素内にあるコンテンツの直前に、afterは指定した要素内にあるコンテンツの直後に配置されます。

したがって、要素内にコンテンツが存在しないタグにはbeforeとafterは配置することができません。 例えば、imgタグやbrタグ、inputタグなどが挙げられます。


次に重なり順について、z-indexを指定していない状態だと、beforeとafterは要素の上に配置されます。

以上が擬似要素「before」「after」の基本的な情報となります。

「before」「after」の活用方法

それでは具体的な活用方法をみていきましょう。

1.文章を記号で囲む

上記のようにHTMLとCSSを記述したとき、指定要素内のテキストの前後に擬似要素が配置されテキストの前後に鍵括弧が表示されます。


この表現は擬似要素を使わなくても可能です。たとえば下記のようにコーディングしても同じように表現できます。

しかしこのコーディングだと、テキストの前後に毎回spanを記述しなければなりません。 記述漏れの心配もありますし、ミスの可能性も高くなります。なにより管理上コードが複雑になることは良くありません。 擬似要素を使用することにより、効率的に配置することが可能となります。

2.見出しに英字を配置する

上記のようにHTMLとCSSを記述したとき、指定要素の中央、下から10pxに位置に擬似要素が配置されます。
日本語をテキストとしたうえで、コーディングに余計な記述をすることなく英字の装飾を施すことができます。
positionを使用することで任意の位置に配置することができます。

3.NEWアイコンを配置する

上記のようにHTMLとCSSを記述したとき、div要素の左上にNEWアイコンが配置されます。 classを指定するだけでアイコンを配置することができるので汎用性がありコーディングが簡潔になります。

4.ふきだしをつくる

上記のようにCSSで三角形を作れば、ふきだしを表現することができます。 もちろん画像を配置しても可能です。

5.要素の影のように背景画像を配置する

コンテンツの影をパターン画像にしたいときは上記のように記述することで表現できます。 注意点としては、z-indexを指定することで重なり順を調整すること。 また、擬似要素と擬似要素を持つ要素に対してwidthとheightを100%にすることでコンテンツの幅と高さの変化にも対応が可能となります。

さいごに

今回は擬似要素の具体的な活用方法をまとめました。 擬似要素はこのほかにも工夫次第で様々な表現が可能となりますので、ぜひ活用してみてください。

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!