2016年5月 9日

疑似要素

今回はコーディングをする上で重宝する「疑似要素」についてお話します。

「疑似要素」とは、特にspanタグやpタグ等を追加しなくても、css上の追記のみで、テキストや画像を配置できるものです。下記に主な使用例をご紹介します。

ボタン

よく右側に矢印が付いたボタンを見かけると思います。
pタグの中にaタグを記述し、更にその中にspanタグを記述し...と言った方法が一般的ですが、この方法では1つのボタンに3つもタグを使うので煩わしいと感じる人も多いのではないでしょうか。
しかし、疑似要素を用いることで、使用するタグの数を抑える事が出来ます。

html

<p class="sample01"><a href="/blog/">ブログトップへ</a></p>

css

p.sample01{ width: 200px; height: 50px; text-align: center; font-size: 16px;}
p.sample01 a{ background-color:#000; color: #fff; display: block; width: 100%; line-height: 50px; position: relative;}
p.sample01 a:after{ content:""; display: block; width: 6px; height: 11px; background: url(/blog/img/arrow.png) no-repeat; position: absolute; top: 40%; right: 10px;}

css反映後

ブログトップへ

テキストの配置

普段はhtml上で直接記述するテキストですが、疑似要素を使用するとcss上からテキストの記述が可能になります。

html

css

p.sample02:after{ content:"疑似要素にて出力"; color:#f00; font-weight: bold;}

css反映後

クラスの割り振り

疑似要素にもクラス指定は有効です。
疑似要素の親となるタグにクラスを指定すると、普段のcssと同様、体裁の切り替えが可能です。

html

css

p.sample03:after{ content:""; display: block; width: 100px; height: 50px; background:#e46;}
p.gijiOn:after{ content:"クラス指定した要素"; display: block; width: 200px; height: 70px; background:#f80;}

css反映後

主に使うのは:afterですが、本来これはタグの後ろに出力する意味があります。
beforeを使えばタグの前に出力が出来ますし、両方記述を使用する事も出来ます。

飾り見出し

文章の左右に直線の飾りがついた見出しも、疑似要素を使えば画像の書き出しを行わずとも実現できます。

html

<h1 class="sample03">飾り見出し</h1>

css

h1.sample03{ font-size: 24px; position: relative; margin-bottom: 20px;}
h1.sample03:before{ content: ""; border-top: solid 1px #000; display: block; width: 100px; position: absolute; top: 50%; left: 50%; margin-left: -100px;}
h1.sample03:after{ content: ""; border-top: solid 1px #000; display: block; width: 100px; position: absolute; top: 50%; right: 50%; margin-right: -100px;}

css反映後

飾り見出し

以上のように、htmlの追記を抑えつつ、飾りのアクセントなどを持たせられるのが疑似要素の強みです。
PCでの表示は、Internet Exploror8から対応しているので、PCサイトでの使用には申し分ないですが、
スマートフォンでは、Androidのバージョン2前後で表示がされませんので、
そこだけは注意が必要と言えます。

今回は疑似要素の使用例をご紹介しました。
今後もhtml/cssでの便利な記述や機能等を提供していきますのでよろしくお願いいたします！

: Naoya Matsumoto
: Works
: ―