【CSS】CSSの擬似要素を紹介します

こんにちは、WEBマーケティング部の杉尾です。
今回はCSSの擬似要素を紹介します。
擬似要素については、下記リンクでも簡単に紹介していますが、より詳しい説明をしたいと思います。
【CSS】CSSのセレクタとは? 覚えておきたいセレクタ21選
擬似要素とは?
擬似要素と聞くと、「はて?」と思った方でも『clearfix』をご存知だと思います。
ご存知ない方はこちらをどうぞ。clearfixについて詳しく書いています
⇒【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)
clearfixを実装するのに記述するコードはこんな感じです。
.clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; /* for IE6/7 */ }
このソースの1行目、:afterが、擬似要素です。
ちなみに……
IE6、7は切り捨てて構わないので、6行目以降は必要ないのですが、一応。
(僕はもうこれを記述していません)
※2015年3月時点のブラウザシェアで、IE6は0.98%、IE7は0.34%です。
:after以外には?
擬似要素には
:first-letter、:first-line、:before、:after
があります。
このうち、:first-letter、:first-lineはIE6以下で使えません。
:before、:afterはIE6、IE7で使えません。
しかし、もはやIE7以下は切り捨てて構わないので、意識する必要はないと思います。
(※前項の繰り返しになりますが、2015年3月時点のブラウザシェアでIE6は0.98%、IE7は0.34%です)
擬似要素と擬似クラスの違いはコチラに書きました。
⇒【CSS】CSSの擬似クラス(~CSS2.1)を紹介します。
ちなみに……
CSS3では、それぞれ
::before、::after、::first-letter、::first-line
とセミコロン(:)を二つ重ねますが、IE8ではこの書き方に対応していないため、現状では一つで書く方がいいと思います。
IE8のサポートをしない案件であれば、セミコロンを二つで書くべきでしょう。
各擬似要素
:first-letter
デザインの現場で用いられるドロップキャップ(文頭の1文字目を大きくする)は『:first-letter』で容易に実装できます。
【CSS】
p:first-letter { font-size: 3em; }
こう書くと、最初の一文字だけ大きくなります。
:first-line
ブロックレベル要素内の最初の一行を対象として、スタイルを適用します。
p:first-line{ font-size: 3em; }
※インラインレベル要素には使えません。
:before と :after
:before と :afterはそれぞれ指定した要素の前後の場所を示す擬似要素です。
それだけでは場所の指定しかできませんので、contentプロパティと併せて使うことが多いです。
contentプロパティを使って、指定した要素の直前または直後に、文字列、画像などのコンテンツを挿入します。
以前も紹介しましたが、引用符を大きな括弧で表すときに使えますね。
こんな感じです。
【HTML】
<blockquote>ここは引用してきたテキストです。</blockquote>
【CSS】
blockquote { width:500px; } blockquote:before { display: block; float: left; font-size: 100px; content:"『"; color: #ccc; margin-top: -25px; margin-right: 10px; } blockquote:after { display: block; float: right; font-size: 100px; content:"』"; color: #ccc; margin-top: -25px; margin-left: 10px; }
:after擬似要素を使って、吹き出しのような見出し
:after擬似要素を使って、こんなデザインも可能です。
ちょっとしたことなんですが、こういう細かいところまで気を配ってデザインしているサイトはいいですよね。
参考ソースをご覧ください。
【CSS】
h2 { position: relative; margin: 25px -10px 10px -10px; padding: 15px 5px 12px 12px; color: #ffffff; font-size: 20px; line-height: 1; text-shadow: 1px 1px 1px #333333; background: #999999; border :1px solid #999999; border-radius: 3px; } h2:after { content: ""; position: absolute; top: 100%; left: 25px; height: 0; width: 0; border: 10px solid transparent; border-top: 10px solid #999999; }
【解説】
HTMLソースは省略しています。<h2></h2>を書くだけです。
:after擬似要素で下向きの三角形を作り、それを上の長方形に貼り付けたというイメージです。
上図の赤枠に囲まれた部分ですね。
位置の指定は、2行目の『position: relative;』と15行目の『position: absolute;』、16行目の『top:100%;』です。
下向きの三角形ですが、これは20行目の『border:10px solid transparent;』、21行目『border-top: 10px solid #999999;』で表示できます。
14行目のcontentには何も入れる必要がありません。
20行目の『border:10px solid transparent;』で正方形の擬似要素を作って、それを透明にしています。
そして、21行目の『border-top:10px solid #999999;』で対角線に沿って四等分された上の領域に線を引いています。
こんなイメージです。
擬似要素、擬似クラスを同時に使うには
E:擬似クラス:擬似要素
必ずこの順番で書いてください。
前回紹介しましたが、擬似クラスは、指定の要素全体に対してスタイルを適用します。
一方、擬似要素は指定の要素の一部にスタイルを適用します。
これを知っていると、擬似クラス ⇒ 擬似要素の順番になる理由がわかりやすいと思います。
まとめ
今回は、これから更に使用頻度の増えそうなCSSの擬似要素を紹介しました。
擬似クラスと擬似要素を効果的に用いて、画像の出番を減らしたいですね。
次回は擬似要素を使って、色々な見出しを作ってみます。
最期までお読みいただき、ありがとうございました。
前回はコチラ
⇒ 【CSS】CSSの擬似クラス(~CSS2.1)を紹介します。

カテゴリー