劇的!(でもない)before after 擬似要素の使い方まとめ

HTML/CSSコーディング

自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。

普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。

before/after擬似要素 基本的な使い方

まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。

このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。

ものすごくシンプルなソースを見ていただけるとわかりやすいと思うのでさっそく挙げてみたいと思います。

基本となるHTML/CSSソース


<p>p要素</p>

該当部分だけ抜き出してheadなりbodyなり本論と関係ないところはご覧の通り省略してます。

pタグでテキストをくくっているだけの、たった1行のHTMLソースです。


p{
background-color:#ff0000;
}

CSSはとりあえず背景色だけ指定しておきます。フォントの色やらサイズやら色々ありますがここではとりあえず省きます。

ブラウザの出力ではこんな感じになると思います。

[HTMLサンプルを別ウィンドウで表示]

「p要素」というテキスト1行だけの表示です。幅・高さ指定してないので単純に赤背景で1行分のボックスが出来てますね。

ここで、同じHTMLソースのまま以下のようなCSSを適用してみます。


p{
background-color:#ff0000;
}
p:before{
content:"before擬似要素";
background-color:#00ff00;
}
p:after{
content:"after擬似要素";
background-color:#0000ff;
}

【p:before】と【p:after】というセレクタを追加しました。プロパティは【content:~】と背景色の指定だけです。【p:before】が緑背景、【p:after】が青背景です。

出力結果はこうなります。

[HTMLサンプルを別ウィンドウで表示]

いかがでしょうか。このように、before/after擬似要素をCSSで追加すると、元の要素のコンテンツの前後に新たに別の要素が挿入されるのです。

【content:~】プロパティはその値に挿入すべき新たなコンテンツを指定します。この例では【p:before】で【"before擬似要素"】という値を、【p:after】で【"after擬似要素"】という値を指定しています。このように【content:~】にダブルクォーテーションでくくったテキストを指定すると、それぞれのコンテンツとしてそのテキストを表示することが出来るようになります。

【content:~】プロパティの値は、ほかに

  • 【url(画像ファイルのURL)】画像の表示
  • 【open-quote】開始引用符
  • 【close-quote】終了引用符
  • 【attr(属性名)】擬似要素を適用した元の要素の属性で指定したものの値

を設定することが出来ます。

【attr(属性名)】がちょっとわかりにくいですが、例えば擬似要素の元の要素がpタグで、それに【title="段落のタイトル"】という属性と属性値が与えられていた場合、擬似要素側に【content:(title)】と指定すると、擬似要素側のコンテンツが【段落のタイトル】という属性値を引用してくる、という意味です。

before/after擬似要素を用いるメリット

なんだ、HTML要素の前後に新たなコンテンツ付加するだけならdiv要素前後に足したりネストしても出来るじゃねーか、という意見もあろうかと思いますが、装飾的な部分をCSSで一括指定できることと、セマンティックなHTMLを書こうとする上で不要なタグのネストを避けることが出来たりします。

セマンティックなページというのはHTMLでは文章構造のみを示し修飾はあくまでCSSに任せてしまおう、というものでHTML5が目指すところでもあります。

そういった点においてbefore/after(に限らないけど)擬似要素を上手く利用することで、より文章のアウトラインの明確なHTMLが書けるということです。

なお、生成した擬似要素に対しては幅、高さ、色、フォントサイズetc…など一般的なプロパティを指定して書くことが出来ます。

before/after擬似要素の挙動について

デフォルトの各擬似要素の配置

もう少しこれらの擬似要素について、そのふるまい方を観察してみましょう。

先に挙げたpタグのみのHTMLソースに対して次のようなCSSを適用してみます。


p{
width:150px;
height:150px;
background-color:#ff0000;
}
p:before{
display:block;
content:"before擬似要素";
width:150px;
height:50px;
background-color:#00ff00;
}
p:after{
display:block;
content:"after擬似要素";
width:150px;
height:50px;
background-color:#0000ff;
}

元要素と擬似要素にそれぞれ高さ・幅を指定してみました。擬似要素のほうは明示的にブロック表示としています。

幅はいずれも150pxで、元要素の高さが150px、擬似要素の高さが50pxです。

ブラウズ結果はこのようになります。

[HTMLサンプルを別ウィンドウで表示]

前の例よりよりイメージしやすいと思いますが、擬似要素が付加されるのは元要素のコンテンツの前後です。元要素の生成するボックスの前後ではありません。

表現として厳密には正しくないのでしょうが、元要素のボックスの中に擬似要素のボックスが内包される感じになります。

レイヤー構造

続いてこのようなCSSを適用した場合を見てみましょう。


p{
position:relative;
width:150px;
height:150px;
background-color:rgba(255,0,0,0.8);
}
p:before{
content:"before擬似要素";
position:absolute;
top:15px;
left:15px;
width:150px;
height:150px;
background-color:rgba(0,255,0,0.8);
}
p:after{
content:"after擬似要素";
position:absolute;
top:30px;
left:30px;
width:150px;
height:150px;
background-color:rgba(0,0,255,0.8);
}

元要素・擬似要素とも150px四方のボックスです。擬似要素のほうには【position:absolute;】を指定して絶対配置としています。このときの基準位置は元要素のボックスの左上が原点となります。擬似要素のほうにtop、leftなど位置指示のプロパティを用いるために元要素pに【position:relative;】を指定しています。そして擬似要素を元要素に対して縦横15pxずつずらしています。

ブラウズ結果はこのようになります。

[HTMLサンプルを別ウィンドウで表示]

こうすると要素の前後関係がわかりやすいと思います。元要素が一番奥、その次にbefore要素、一番上がafter要素となっています。

また、デフォルトではこのようなレイヤー構造となっていますが、z-indexプロパティを指定することで前後関係を入れ換えることも出来ます。


p{
position:relative;
top:30px;
width:150px;
height:150px;
background-color:rgba(255,0,0,0.8);
}
p:before{
content:"before擬似要素";
position:absolute;
top:-15px;
left:15px;
width:150px;
height:150px;
background-color:rgba(0,255,0,0.8);
z-index:-1;
}
p:after{
content:"after擬似要素";
position:absolute;
top:-30px;
left:30px;
width:150px;
height:150px;
background-color:rgba(0,0,255,0.8);
z-index:-2;
}

ほとんど前のCSSと同じですが、before擬似要素に-1、after擬似要素に-2の値でz-indexを指定してみました。

ブラウズ結果はこのようになります。

[HTMLサンプルを別ウィンドウで表示]

先ほどの場合とは逆に元のp要素が一番手前、その奥がbefore擬似要素、最背面がafter擬似要素となっています。このようにレイヤー構造をコントロールすることでより装飾の幅が広がると思います。

float時の挙動

生成した擬似要素にfloatをかけるとどのようになるでしょうか。


p{
width:400px;
height:100px;
background-color:#ff0000;
}
p:before{
float:left;
display:block;
content:"before擬似要素";
width:100px;
height:50px;
background-color:#00ff00;
}
p:after{
float:right;
display:block;
content:"after擬似要素";
width:100px;
height:50px;
background-color:#0000ff;
}

元要素はサイズのみ変えてそのまま、before擬似要素に【float:left;】を、after擬似要素に【float:right;】を設定してみました。

ブラウズ結果はこのようになります。

[HTMLサンプルを別ウィンドウで表示]

p要素のボックスそのものではなく、p要素のコンテンツを挟んでそれぞれ左右にfloatしています。divネストでfloatかけた場合と同じような挙動になりますね。

こんな感じでいろいろとプロパティいじってみるとだいたい特性がつかめたと思います。

私も食わず嫌いで避けてたところがありましたが、こういったところが分かればきちんと使い勝手がでてくると思います。

サンプルなど

このあたりを踏まえていくつかサンプルを作ってみました。

サンプル自体は有名どころのブログでもすでにいろいろ書かれていますが、あらためてソースと実行結果を示してみたいと思います。

重なった写真のような演出

HTML


<p><img alt="" src="before-after-sample001.jpg" /></p>

CSS


p{
position:relative;
width:140px;
height:140px;
padding:5px;
background-color:#ffffff;
-moz-box-shadow: 1px 1px 4px #000000;
-webkit-box-shadow: 1px 1px 4px #000000;
-o-box-shadow: 1px 1px 4px #000000;
-ms-box-shadow: 1px 1px 4px #000000;
box-shadow: 1px 1px 4px #000000;
}
p:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:150px;
height:150px;
background-color:#ffffff;
z-index:-1;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-moz-box-shadow: 1px 1px 4px #000000;
-webkit-box-shadow: 1px 1px 4px #000000;
-o-box-shadow: 1px 1px 4px #000000;
-ms-box-shadow: 1px 1px 4px #000000;
box-shadow: 1px 1px 4px #000000;
}
p:after{
content:"";
position:absolute;
top:0px;
left:0px;
width:140px;
height:140px;
padding:5px;
background-color:#ffffff;
z-index:-2;
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-moz-box-shadow: 1px 1px 4px #000000;
-webkit-box-shadow: 1px 1px 4px #000000;
-o-box-shadow: 1px 1px 4px #000000;
-ms-box-shadow: 1px 1px 4px #000000;
box-shadow: 1px 1px 4px #000000;
}

ブラウズ結果

[HTMLサンプルを別ウィンドウで表示]

解説

HTMLは単にimgタグで画像を呼び出しているだけです。

CSSでは擬似要素のレイヤー関係をz-indexで奥へ入れ換えつつtransformで回転しています。また紙片が重なった感じを出すのにbox-shadowを若干かけています。ベンダープレフィックスつけたので冗長ですが特にかわった事はしていませんね。

擬似要素のcontentは特に入れるべきコンテンツもないのですが省略不可ですので値を【""】としています。

吹き出しっぽいボックス

HTML


<p>sample text</p>

CSS


p{
position:relative;
width:140px;
height:40px;
padding:5px;
background-color:#7f7f7f;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
p:after{
content:"";
position:absolute;
top:50px;
left:15px;
width:0px;
height:0px;
border-style:solid;
border-width:20px 10px 0px 0px;
border-color:#7f7f7f rgba(0,0,0,0.0) rgba(0,0,0,0.0);
}

ブラウズ結果

[HTMLサンプルを別ウィンドウで表示]

解説

こちらは元要素のボックスの下に吹き出しっぽい三角を付け加えたものです。

三角の表現はafter擬似要素で行っています(beforeはこの例では登場しません)。どうやっているのかというと、after擬似要素の大きさを0px×0px(要するにボックスが表示されない!)にしてボーダーのみ表示します。

ボーダートップの色を元要素の背景色と同じにし、その他3辺は完全透過色にしてしまいます。ボーダーのトップと左右の幅で三角の大きさをコントロールし(ボトムの幅は0でよい)元要素にうまく沿うようにtop、leftプロパティで調整します。

よく見かける表現で、めんどくさそうなので使ったことなかったんですがやってみると意外に単純なことでした…

引用文表現

HTML


<blockquote>
<p>This text is a quote from a text secret, which has been stolen from NASA.</p>
<p>It's a secret, do not tell anyone. Trust no one.</p>
</blockquote>

CSS


blockquote{
display:block;
width:280px;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
background-color:#cfcfcf;
}
blockquote:before,blockquote:after{
display:block;
width:30px;
height:30px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-o-border-radius:15px;
-ms-border-radius:15px;
border-radius:15px;
background-color:#afafaf;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:1.5em;
}
blockquote:before{
content:open-quote;
}
blockquote:after{
content:close-quote;
margin:auto 0px auto auto;
}
blockquote p{
font-size:16px;
}

ブラウズ結果

[HTMLサンプルを別ウィンドウで表示]

解説

こちらもよく見かける例。もともとbefore/after擬似要素はこんな風に使うためにあるんだろうなぁ、というパターンです。

beforeのcontentに開始引用符、afterのcontentに終了引用符を指定しています。それぞれ正方形のボックスとしてborder-radiusで1辺の半分の大きさを指定すると丸囲みっぽい表現になります。

引用符のテキスト位置はtext-alignとline-heightで調整しています。

ところで激しく関係ないですがX-FILEの最終的なオチってどんなんでしたっけ?

まとめ

書いてあるとおりのことなのでまとめるほどのこともないですが、私以外にもこういった擬似要素苦手としてる人いるんじゃないかなぁと思いこんな記事を書いて見ました。

ちなみにサンプル作成するに当たってはコリスさんを参考にしています。同じような例が出てますので。

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

若干難しく感じたので私なりにまとめなおした次第です。

before/after擬似要素の対応ブラウザなんですが、IE6/7は未対応です。もうぼちぼち消えていくとは思いますがページ作成のターゲットに入っているなら要注意です。

とはいえ、最初に書いたようにHTML自体はセマンティックな表現となるので情報欠落になるわけでもないですけど。単に装飾が省かれるだけで。

非対応ブラウザに対してはjQueryで回避可能ではあるらしいです。

jQuery Pseudo Plugin (:before and :after in Internet Explorer)

そんなわけで知ってる人には特に目新しいこともないと思いますがご存じない方の参考になれば幸いです。

んじゃまた。

コメント

タイトルとURLをコピーしました