魅力的なサイトデザインを実現！CSSでSVGを疑似要素::beforeや::afterに活用する方法

CSSでSVGを疑似要素::beforeや::afterのコンテンツとして使用する方法

CSS疑似要素 ::before や ::after は、要素のコンテンツの前後にテキストや画像を追加することができます。従来、テキストや画像ファイルのみを使用できましたが、近年ではSVG画像も使用できるようになりました。

メリット

• 高度なデザイン表現: SVGはベクター画像形式なので、サイズ変更しても画質が劣化せず、複雑な形状やアニメーションも表現できます。
• 軽量なファイルサイズ: 多くの場合、PNGやJPEG画像よりもファイルサイズが小さくなります。
• アクセシビリティ: スクリーンリーダーなどの支援技術で認識できます。

方法

SVGを疑似要素::beforeや::afterのコンテンツとして使用するには、以下の2つの方法があります。

content プロパティ

.element::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html");
}

• content プロパティ: コンテンツを空("")に設定し、display プロパティで表示をブロック要素に設定します。
• width と height プロパティ: SVG画像のサイズを設定します。
• background-image プロパティ: SVGファイルのURLを指定します。

::svg() 疑似クラス

.element::before {
  content: "::svg(#https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html)";
}

• ::svg() 疑似クラス: SVGファイルのIDを指定して、SVG画像を直接コンテンツとして挿入します。

注意点

• ブラウザの対応状況: 古いブラウザではSVGを疑似要素として使用できない場合があります。
• ファイルサイズ: 複雑なSVG画像を使用すると、ファイルサイズが大きくなり、読み込み時間が長くなる場合があります。

応用例

• アイコン
• ボタン
• ローディングアニメーション
• 装飾

補足

上記以外にも、before や after 疑似要素にSVGを適用する方法はいくつかあります。詳細は上記の参考資料を参照してください。

<div class="element">
  テキスト
</div>

.element::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Wikipedia-logo.svg/1200px-Wikipedia-logo.svg.png");
}

結果

テキストの前にWikipediaロゴが表示されます。

::svg() 疑似クラスを使用したサンプルコード

<div class="element">
  テキスト
</div>

.element::before {
  content: "::svg(#icon)";
}

@svg {
  #icon {
    width: 20px;
    height: 20px;
    display: none;
  }

  #icon path {
    fill: red;
  }
}

<svg id="icon" viewBox="0 0 20 20">
  <path d="M10 0L5 10L0 20L10 10Z" />
</svg>

テキストの前に赤い三角形のアイコンが表示されます。

SVGを疑似要素::beforeや::afterのコンテンツとして使用する方法

@font-face ルールを使用した方法

• SVGファイルをフォントとして登録し、font-family プロパティを使用して疑似要素に適用します。
• メリット: ファイルサイズを小さくできる可能性があります。
• デメリット: 古いブラウザでは対応していない場合があります。

data-uri スキームを使用した方法

• SVGファイルをBase64エンコードし、data-uri スキームを使用して疑似要素の背景画像として設定します。
• メリット: HTTPリクエストを減らすことができます。

CSS Shapes モジュールを使用した方法

• SVGファイルをシェイプとして使用し、疑似要素の形状を定義します。
• メリット: 複雑な形状を表現できます。
• デメリット: ブラウザの対応状況が限定されています。

SVG.js などのライブラリを使用した方法

• JavaScriptライブラリを使用して、SVGファイルを動的にロードして表示します。
• メリット: 複雑なアニメーションやインタラクションを作成できます。
• デメリット: JavaScriptの知識が必要となります。