WP Demo

作成日 :

2-1.SVG アイコン設定

SVG（Scalable Vector Graphics）は、二次元のベクトルグラフィックスを記述するためのXMLベースの画像形式。1999年からW3C（World Wide Web Consortium）によって標準化が進められている。

アイコンに最適な SVG

  • 無限の解像度
    ベクター形式のため、拡大・縮小しても境界線がボケない。高解像度ディスプレイ（Retina等）でも常に鮮明。
  • CSSでの制御
    mask-image や fill プロパティを用いることで、CSSのみで色やサイズ、アニメーションを自由に変更可能。
  • 軽量なファイルサイズ
    単純な形状であれば、ビットマップ画像よりも圧倒的にデータ量が少なく、読み込み速度に貢献する。
  • アクセシビリティ
    コード内に <title> タグなどを記述できるため、スクリーンリーダーが内容を認識しやすく、SEOやアクセシビリティの面でも優れる。

HTML記述、CSS定義、クイックタグ登録

  1. HTMLのクラス名から、CSSにより擬似要素にSVGの形状を呼び出しマスク描画し、くり抜いてSVGの形状を疑似要素に背景色として描画。
  2. quick-tag.js にアイコンを登録して、編集画面のボタンから HTML スニペットを挿入可能にする。

HTML

<i class="icon-setup sample-code" role="img" aria-label="サンプルコード"></i>

CSS設定

クラス名からSVGの形状を疑似要素（ ::before ）にマスク描画（切り抜きの型データ：mask-image）して、icon-setup の背景色（background-color）をくり抜いてSVGの形状を疑似要素に描画する。

  • .icon-setup.個別クラス名 :（擬似要素の親）の背景色がアイコン背景色
    アイコン背景色：background-color、間隔：margin, padding 設定
  • .icon-setup.個別クラス名::before :（擬似要素）の背景色がアイコン文字色
    SVGデータ：mask-image、縦横比率：width, height、文字サイズ：font-size、アイコン文字色()：background-color 設定
  • .icon-setup.icon-bg.個別クラス名::before：マスクを使用せず、SVGデータを直接表示
    マスクを無効化、SVGデータを背景画像：background-imageに直接表示

サンプル コード表示

<i class="icon-setup wrench" role="img" aria-label="レンチ"></i>
<i class="icon-setup sample-code" role="img" aria-label="サンプルコード"></i>
<i class="icon-setup windows" role="img" aria-label="ウィンドウズ"></i>
<i class="icon-setup seedling" role="img" aria-label="苗"></i>
<i class="icon-setup icon-bg android" role="img" aria-label="android"></i>
...
<i class="icon-setup apple" role="img" aria-label="apple"></i>
<i class="icon-setup apple-circle-gray" role="img" aria-label="apple-circle-gray"></i>
<i class="icon-setup icon-bg apple-gray" role="img" aria-label="apple-gray"></i>
COPY
/* /assets/css/icon.css */
/* <i>リセット */
i {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* アイコン共通設定 */
.icon-setup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;    /* 斜体を解除 */
  line-height: 1;        /* 行高の影響を排除 */
  vertical-align: middle; /* 周囲のテキストとの配置を中央に */
  text-indent: 0;        /* インデント設定を無視 */
  cursor: default;
  pointer-events: none;  /* アイコン自体はクリックを邪魔しない */
}

/* 疑似要素 マスク */
.icon-setup::before {
  content: "";
  display: inline-block;

  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* アイコン自体のサイズ（親の文字サイズに比例） */
  width: 1em;
  height: 1em;
}

/* 疑似要素 マスク無効 個別背景画像指定 */
.icon-bg::before {
  /* マスク機能一括無効化 */
  -webkit-mask: none !important;
  mask: none !important;

  /* 背景色 */
  background-color: transparent !important;
  
  /* 背景画像設定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 個別アイコン設定 */
/* アップル */
.icon-setup.apple::before {
  -webkit-mask-image: url("../images/svg/apple-brands-solid.svg");
  mask-image: url("../images/svg/apple-brands-solid.svg");
  background-color: #8a8a8a;
}

/* iOS Safari アップル（グレー丸背景・白抜き） */
.icon-setup.apple-circle-gray::before {
  /* マスクを2層重ねる：リンゴの形(白抜き用) と 円の形(背景用) */
  -webkit-mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);
  mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);

  /* マスクの合成モード */
  /* 「円」から「リンゴ」を差し引く（型抜きする、親要素の背景色がアイコン色）設定 */
  -webkit-mask-composite: source-out;
  mask-composite: exclude; /* 物理的にくり抜き */

  /* 背景色 */
  background-color: #8a8a8a;
  border-radius: 50%;

  /* サイズと位置 */
  -webkit-mask-size: 55%, 100%; /* リンゴを少し小さく */
  mask-size: 60%, 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: 50% 45%;
  width: 1.1em;
  height: 1.1em;
}
/* /iOS Safari アップル（グレー丸背景・白抜き） */

/* apple-gray */
.icon-setup.icon-bg.apple-gray::before {
  background-image: url("../images/svg/apple-gray.svg");
  clip-path: circle(50% at 50% 50%);
}

/* </> サンプルコード（アイコン色 アイコン背景色あり）*/
.icon-setup.sample-code::before {
  -webkit-mask-image: url("../img/svg/code-solid.svg");
  mask-image: url("../img/svg/code-solid.svg");
  background-color: rgb(124, 252, 0); /* アイコンテキスト色 */
  width: 1.3em;
}
.icon-setup.sample-code {
  background-color: rgb(34, 68, 68); /* アイコン背景色 */
  padding: 0.1em;
}

/* Android（マスクなし） */
.icon-setup.icon-bg.android::before {
  background-image: url("../images/svg/android-head_flat.svg");
}
COPY