【CSS】疑似要素の画像サイズを変更する方法

記事内に商品プロモーションが含まれる場合があります

前提知識

contentの画像と疑似要素のボックスのサイズ

今回は疑似要素（::beforeと::after）で画像を表示する話です。次は、contentの画像を疑似要素のwidthとheightだけで5pxにしようとした例です。ボックスへの寸法指定と、その中の画像の大きさを区別して確認しましょう。掲載画像は当時の表示で、読者コードでは保存済みの120×119pxの顔画像を使うため、絵柄と寸法が異なります。

HTMLコード

<p class="example">サンプル文</p>

CSSコード

.example::before {
	content: url(https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg);
	display: inline-block;
	width: 5px;
	height: 5px;
}

ブラウザ表示

↑当時の表示例では、画像が5×5pxになっていません。疑似要素のボックスに指定した5×5pxと、contentで表示する画像の描画を分けて確認してください。

背景画像として表示させれば変更可能に

背景画像として扱うと、疑似要素のボックスに幅と高さを指定し、background-sizeで画像の収まり方を調整できます。次は50×50pxのボックスへ画像を収める例です。

HTMLコード

<p class="example">サンプル文</p>

CSSコード

.example::before {
	content: '';/*何も入れない*/
	display: inline-block;
	width: 50px;/*画像の幅*/
	height: 50px;/*画像の高さ*/
	background-image: url(https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg);
	background-size: contain;
	background-repeat: no-repeat;/*画像を繰り返さない*/
	vertical-align: middle;
}

ブラウザ表示

解説

上のコードを簡単に解説します。

content

背景画像を置く疑似要素を生成するため、空文字列を指定します。背景画像は装飾として使い、情報を伝える画像にはHTMLのimg要素と適切なaltを使いましょう。

display

空文字列で生成した通常のインラインボックスでは、widthとheightによる寸法指定が適用されません。そのためblockかinline-blockを使います。要素と画像を横に並べたいときはinline-block、改行を入れたい場合はblockにしましょう。

background-image

ここに画像のパス（URL）を入れます。このコードでは保存済みの顔画像を参照しています。自分のサイトで使う場合は、自分の画像URLへ置き換えてください。

background-size

containは縦横比を維持しながら画像全体が収まる最大サイズにします。画像とボックスの縦横比が違うと余った領域ができます。background-repeat: no-repeatで、その領域に画像を繰り返さないようにします。

vertical-align

vertical-align: middleは、インラインボックスの中央を親のベースラインからx-heightの半分上へ合わせます。隣の文字や行全体の見た目を厳密に中央揃えする指定ではないため、フォントを含めて表示を確認してください。

【参考】背景画像をレスポンシブにする方法

背景画像だけではボックスの高さは決まりません。height:100%も、基準になる高さが定まっていないと意図した高さになりません。ここではaspect-ratio:120 / 119を使い、幅に合わせて高さを決めます。HTMLは前の例と同じです。このCSSは前の例へ追記せず、置き換えて使ってください。

CSSコード

.example::before {
  content: '';
  display: block;
  width: 100%;/*指定したい幅*/
  aspect-ratio: 120 / 119;/*画像の幅と高さの比率*/
  background-image: url(https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg);
  background-size: contain;
  background-repeat: no-repeat;/*画像を繰り返さない*/
}

ブラウザ表示

上のGIFは公開当時の、2つの疑似要素を使う実装の記録です。新しいコードは::beforeだけを使い、保存済み画像の比率に合わせるため、絵柄や余白がGIFと異なります。

::before幅100%とaspect-ratio:120 / 119で画像に合った領域を作り、その背景へ画像を表示します。たとえば幅280pxなら高さは約277.67pxです。別の画像に替えるときは、その幅と高さの比率へ変更してください。

通常フローで配置絶対配置や800pxの固定高さ、::afterは使いません。::beforeをblockとして通常フローに置くため、後ろのサンプル文は画像領域の下に続きます。background-repeat: no-repeat;で画像は1回だけ表示されます。

幅を変えたときの比率と、続く文章が重ならないことを確認しましょう。画像自体に意味がある場合は、疑似要素の背景ではなくimgとaltを使う方が適切です。