やっぱりベクターアイコンにします。(2023/07/01)
はじめに
Web ページのアイコンには、古くは画像を使うものに始まり、これを画像スプライト化したり、データ URI 化してスタイルシートに埋め込むなど最適化の工夫がされてきました。
最近の主流は Web フォントによるアイコンです。2011年に登場するデザイントレンド「フラットデザイン」との相性も良く、拡大して良し、色も CSS で簡単に変更できるとあってそのメリットは絶大です。
しかしモダンな環境でも確実に Web フォントが使えるわけでは無い点や、ダウンロードファイル数が増える点を気にして、趣味のブログ運営では導入に二の足を踏んでいました。また今回は関係ありませんでしたが、フォントアイコンをあくまで装飾ではなくコンテンツとして使う場合、Web フォントの無効を検出してのフォールバックについても準備が必要と厄介です。
そもそも、文字だけでもタイポグラフィの工夫で充分素敵なデザインが出来るという自負もありました。ところが、久しぶりに Blogger 用テンプレートの配布サイトを眺めていくと自信を喪失…いよいよアイコンの導入を決意しましたとさ。
サンプル
時計 ラベル 人物 旗 ペン リンク ドライブ コメント
:before, :after擬似要素によるピュアCSSアイコン
今回は :before, :after 擬似要素にボーダーと角丸を組み合わせてみたところ、Web フォントアイコンに迫る表現力で、当面必要なものを揃えることが出来ました。その上、制限のある環境も少なそうだったため好奇心も手伝ってピュア CSS アイコンの導入へ踏み切ることができました。
| 使用技術 | 利点 | 欠点 |
|---|---|---|
| 画像 | 広範な環境で使用可能。フルカラーが可能。 | 設定やアドオンで切っている場合あり。ブラウザの設定やアドオンで画像を無効化している場合が稀にある。拡大に弱い。スプライト画像の準備が結構苦痛。 |
| Web フォント | データサイズが小さめ。拡大縮小に強い。色変えは極めて簡単。 | 一部の環境で非対応。設定やアドオンで無効になっている場合がある。 |
| SVG | SVGスプライトで結構便利に使えそう。ここは不勉強。 | |
| ピュア CSS アイコン | データサイズが小さい。拡大縮小に強め。色変えは簡単。 | 表現力が低い。ブラウザによって描画に微妙な差異がでる。角丸の使えない IE8, Opera Mini では更に低くなる。IE7 以下は非対応。 |
先行事例
先行事例からの変更点
CSS3 の使用を border-radius に留め、これに対応しない IE8 と Opera Mini でもそれなりな表示になるようにデザインしました。表現の幅が大きく拡がる transform, box-shadow は使いませんでした。
em 指定を使ってフォントサイズの変更で拡大表示できるようにしました。但し em 指定ではフォントサイズによっては三角形が綺麗に描画されない場合があります。
印刷対応
印刷の設定から「背景色と背景画像も印刷」にチェックを付けていない場合にも対応するため、背景色は使わず全て枠線で描画します。この際に、矩形の場合は上下左右どちらか一本の枠線に幅を与えます。
角丸指定がある場合は、当該の辺に幅が無いと角丸が正しく描画されません。相対する2辺に幅を持たせると、フォントサイズによってはボーダーの隙間ができるケースがあります。隙間は、縦にできる場合、横にできる場合、十字にできる場合、どれか一つ最も自然なものを選択する他ありません。