【CSS】レスポンシブでは画像を使ったアイコンの指定をemで行う
レスポンシブデザインでは、
PC、タブレット、スマホそれぞれに合わせて、フォントサイズを変更するということが多いと思います。
その際、タイトルなどのアイコンを、
CSSでのアイコンの大きさや背景画像などをpxによって行っていた場合、
フォントサイズごとに指定の変更を行う必要が出てきます。
私はずっとそうしてきたのですが、
そうすると、アイコンが追加になったり、変更になった場合に、多くのCSSコードを追加・変更しなければならなくなるため、
非常に面倒なことになります。
しかし、以下のサイトで、
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス
CSSでの単位として、emを積極的に使うことで、
問題が解決されることを知りましたので、試しにやってみました。
例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | h2::before { content: ""; display: inline-block; width: 1.333333em; height: 1.333333em; margin-right: 0.5em; background-image: url(images/icons.png); background-size: 10.416667em auto; vertical-align: middle; } .ttl-chat::before { background-position: 0 0; } .ttl-pc::before { background-position: -1.458333em 0; } .ttl-sp::before { background-position: -2.916667em 0; } .ttl-calender::before { background-position: -4.375em 0; } |
今回の例では、
- width, height
- background-size
- background-position
について、emを使った指定を行ってみました。
設定するときは、pxをemへ置き換えるための計算をしなくていはいけないので、若干手間のように感じますが、
一つ設定してしまえば、あとは、font-sizeごとに設定する必要が無いため、
全体としては手間を減らすことができました。
注意点としては、emで指定する場合、小数点6桁くらいまでは指定しないと、微妙にずれてしまうことがあるようです。
今後はこの方法を使っていきたいと思います。
追記(2019.09.10)：
1つのSVGでアイコンを出し分ける方法を紹介しました
Author Profile
SHARE
