擬似要素のbeforeについて紹介します。
使いどころがイメージ湧かない人もいると思いますが、仕事ではちょくちょく指定します。
ワードプレスとかでサイト制作してると使う場面があるんです。
具体的に説明すると…長くなるので、割愛。
そんなわけで、さっそく指定していきます。
※afterも同じようにできます。
beforeの指定方法
beforeは、以下のように指定します。
<p>ほぼほぼ</p>p::before {
content:'new';
}ほぼほぼ
p:beforeと書く時、「p」と「::」。
それと「::」と「before」の間にはスペースが入らないようにしましょう。
指定が効かなくなる↓
- p ::
- :: before
次はcontent: 'new'の部分。
content:として、’ ‘とクオーテーションをつけて、その中に文字を入力します。
” “ダブルクオーテーションでもオッケー
- content: ‘new’
- content: “new”
※クオーテーションマーク…引用符という意味。引用や発言の時に用いるみたいです。日本語なら「 」になります。
これは大丈夫だと思います。
beforeは要素幅のどこに入ってくるのか？
※要素とは<div>や<p>などのことです。
じゃあ、beforeを指定せず、<p>に背景色をつけてみます。
<p>ほぼほぼ</p>p {
background-color:: aliceblue; /* うすいブルー */
}ほぼほぼ
何をするのかというと、<p>の幅のどこにnewが入り込んでくるかを確認します。
というわけで、結果を見てみましょう。
<p>ほぼほぼ</p>p {
background-color:: aliceblue; /* うすいブルー */
p::before {
content: 'new';
}newほぼほぼ
<p>の幅の中に入ってきてますね、newが。
たったこれだけを確認したかったんです…
beforeはインライン要素
ちなみにbeforeはインライン要素です。
これは、displayの初期値がinlineだからです。
※初期値…要素にプロパティを指定してない時に、はじめから与えられている値。
【参考記事】
初期値の使い所を理解する
ブロック要素とインライン要素の違い｜できることできないこと
幅や高さを指定しても反映されない時は、blockやinline-blockに変換しましょう。
次は画像を表示させます。
画像を指定する
beforeでは画像も指定できます。
画像の元サイズは、幅100px・高さ100px・縦横比1：1です。
この値を覚えておいてくださいね。
もう1度…、幅100px・高さ100pxです。
画像はcontentに指定できます。
<p>ほぼほぼ</p>p::before {
content: url(images/cry.jpg);
}ほぼほぼ
そのままの大きさで表示されますね。
注意したいのは、クオテーションマークで囲まないことですね。
これだと指定が効かなくなります↓
p::before {
content: 'url(images/cry.jpg)';
}クオテーションマークは、文字の時だけに使います。
※上記は相対パスで指定しています。相対パスの場合は、cssファイルから見た時の画像の位置になります。
上の場合、例えばcssファイルをtest.cssとしますね。
そのtest.cssから見て、cry.jpgの画像はimagsフォルダの中にあります。
で、幅と高さを調整してみましょう。
<p>ほぼほぼ</p>p::before {
content: url(images/cry.jpg);
width: 50px;
height: 50px;
}ほぼほぼ
結果、画像の大きさは変わらず。
ちなみに、<img>だとインライン用そのまま幅・高さを指定できます。
なので、この画像の場合もそうできるんじゃないかと思い、display: blockやinline-blockに変換しませんでした。
検証画面だと↓のように表示。
幅は100px、高さは16pxとなっています。
この16pxは文字の大きさと同じですね。
次に、display: inline-blockと変換した結果もどうぞ。
<p>ほぼほぼ</p>p::before {
content: url(images/cry.jpg);
width: 50px;
height: 50px;
display: inline-block;
}ほぼほぼ
画像の大きさはやはり変わらず。
「ほぼほぼ」が画像に被りましたね。
これは、beforeに指定した幅と高さが効いているからです。
と説明しても分かりにくいはずなので、検証画面の要素をどうぞ↓
幅と高さは効いてるのに、画像の大きさがそのままってのが何とも不思議ですね。
ちなみに、なぜこのようになるのか調べたのですが、分かりませんでした。
そして、もう1個ちなみにですが、テキストの場合だとfont-sizeで文字の大きさを変えれます。
<p>ほぼほぼ</p>p::before {
content:'new';
font-size: 30px;
}ほぼほぼ
おっきくなりましたね。
画像のサイズを調整するなら背景画像で指定する
画像サイズを調整したいなら背景として画像を指定しましょう。
contentは中身はないのですが、content: ''としてください。
content: ''がないとbefore自体の指定が効かなくなります。
<p>ほぼほぼ</p>p::before {
content: '';
width: 50px;
height: 50px;
display: inline-block;
background-image: url(images/cry.jpg);
background-size: 100% 100%; /* 指定した幅50px 高さ50pxに対する割合 */
}ほぼほぼ
※画像指定の相対パスは、先ほどと同じくtest.cssファイルから見た時の画像の位置になります。
無事、小さくなりましたね。
というわけで、突然の終わり。
参考サイト
この記事の内容は「CSS3」をもとに紹介しました。
「CSS3」はcssのルールブックみたいなもので、その最新版です。
どちらも翻訳あります。
まとめ
beforeはなかなかおもしろい挙動をします。
みなさんもいろいろ試しながらやってみてください。