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

2015 年 5 月 12 日投稿 view: 2292

タグ：

こんにちは、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 */
}

このソースの１行目、: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擬似要素を使って、こんなデザインも可能です。

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擬似要素で下向きの三角形を作り、それを上の長方形に貼り付けたというイメージです。

見出しの下向き三角の部分