![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2BsiVa4pwTgHqvCI4S9Zyvg1mjx0IznebNsQJWQv7XIBA6c-ceLb6FBzSEvQpTRa96hVIq_gcBD54qmH3E-BlrEMcVO8YpyXlR7_7aBRiuiR3rFzD2lkFcrJdH2wKiK8-Hw50ZjcoOwcG/s1600/SnapCrab_NoName_2017-4-17_16-27-7_No-00.png)
CSS スプライト画像を使ってアイコンを表示する方法を紹介します。Retina ディスプレイでアイコンがボケないよう、倍の大きさのアイコンを縮小表示しています。
HTML
補足
- span 要素の data-icon-pos 属性でアイコンを表示する位置を指定します。
- 同じく、span 要素の data-icon 属性でアイコンの種類を指定します。
- span 要素は CSS でブロック要素化しています。
CSS
補足
- アイコンは span 要素の before 疑似要素の背景として表示しています。
- このサンプルでは 48px × 48px のアイコンが 24px × 24px で表示されるようにしています。
- data-icon-pos 属性で指定される top、 left、 botton、right 毎に、それぞれの余白や疑似要素の表示位置を指定しています。
- data-icon 属性では表示するアイコンの CSS スプライト画像上の位置を指定しています( background-size で実際の半分の大きさを指定しているので、ここで指定する位置座標も半分になる)。
- このサンプルで使用する CSS スプライト画像は 192px × 192px の PNG ファイルです。
- Retina 対応とするため、CSS スプライト画像は、下のような大きさレイアウトで作成しています(実際の画像は透明の背景に白地のアイコンのみ。それ以外は説明用です)。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEili11bkbZhzx6ZNto_iueZwLsBRrtYrpdNRDagqpnSzcog7kNS5iQn1ek0j7XkUI7t_bNX-vEqUzzhIz7WQFDJ2HrkTBx4trZLBLk-ufx7Y_zJaW2wnP3sxC7pC9HH89YLuJw_3HpRhEZd/s1600/css-sprite-template.png)