CSS3: 擬似要素 :before, :after で配置した画像サイズを変更する

開発が完了した Web アプリやサイトで HTML ではなく、CSS 修正のみでアイコン画像等を挿入したい場面があります。
その際、擬似要素 :before, :after でコーディングを行いますが、画像を直接挿入した場合サイズ変更ができません。

今回は上記ケースで画像サイズを変更する方法を説明したいと思います。

目次

  • 擬似要素 :before, :after で配置した画像サイズを変更する
  • まとめ

擬似要素 :before, :after で配置した画像サイズを変更する

以下のような HTML ソースのリスト要素 li の先頭に、アイコン画像を挿入したい場合、content ではなく backgroud 指定による画像配置を行うことで画像サイズの調整が可能になります。

HTML

<ul class="list-sample">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSS

.list-sample li:before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('https://path-to-icon-image-url/icon_sample.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
}

まとめ

Web フォントやアイコンが使えない環境や、後方互換による表示不具合が起こる場合、今回の擬似要素による backgroud のイメージ指定を行うことで、解決できます。
レガシーブラウザ対策によるデザイン問題が起こった場合、有効な手段かと思いますので、参考になさってください。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents