【css】beforeを使いこなそう|画像とかcontentとか

【css】beforeを使いこなそう|画像とかcontentとか

擬似要素の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だからです。

※初期値…要素にプロパティを指定してない時に、はじめから与えられている値。

【参考記事】
初期値の使い所を理解する
ブロック要素とインライン要素の違い|できることできないこと

幅や高さを指定しても反映されない時は、blockinline-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: blockinline-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はなかなかおもしろい挙動をします。

みなさんもいろいろ試しながらやってみてください。

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