Blog

【CSS】レスポンシブでは画像を使ったアイコンの指定をemで行う

nino-eye

レスポンシブデザインでは、
PC、タブレット、スマホそれぞれに合わせて、フォントサイズを変更するということが多いと思います。

その際、タイトルなどのアイコンを、
CSSでのアイコンの大きさや背景画像などをpxによって行っていた場合、
フォントサイズごとに指定の変更を行う必要が出てきます。

私はずっとそうしてきたのですが、
そうすると、アイコンが追加になったり、変更になった場合に、多くのCSSコードを追加・変更しなければならなくなるため、
非常に面倒なことになります。

しかし、以下のサイトで、

CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ | コリス

CSSでの単位として、emを積極的に使うことで、
問題が解決されることを知りましたので、試しにやってみました。

DEMO

今回の例では、

  1. width, height
  2. background-size
  3. background-position

について、emを使った指定を行ってみました。

設定するときは、pxをemへ置き換えるための計算をしなくていはいけないので、若干手間のように感じますが、
一つ設定してしまえば、あとは、font-sizeごとに設定する必要が無いため、
全体としては手間を減らすことができました。

注意点としては、emで指定する場合、小数点6桁くらいまでは指定しないと、微妙にずれてしまうことがあるようです。

今後はこの方法を使っていきたいと思います。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ