カテゴリー

キーワード

 
> 【CSS】CSSの擬似要素を紹介...

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


2015 年 5 月 12 日 投稿    view: 2035
タグ:
このエントリーをはてなブックマークに追加

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擬似要素を使って、こんなデザインも可能です。


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)を紹介します。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事