cssを使ってなんでも表現するのっていいの？

css3でできることって増えてきています。破線を引いたらグラデーションをかけたり・・・今までは破線の下線を引きたいとなった時は、画像を作ってそれを背景に敷いて表現すると言ったことで再現していました。

それが、css3を使えばcssだけで表現することができるようになっています。もちろん画像をつかって実装する方法も今でも使えます。

どちらもメリットデメリットがあると思うので、まとめてみたいと思います。
(あくまで私個人の考えです。)

cssで表現するメリット/デメリット

まずはcssを使って表現するメリットから。

真っ先に挙げられるのは、画像の読み込みがないので、通信量が少ないことが挙げられるのではないでしょうか。画像が多いとどうしてもページの表示速度に影響を与えてしまいますが、cssはテキストなので通信量は圧倒的に少なく済みます。

また、少しのデザインの変更であれば、デザイナーさんが作り直さなくても修正が効きます。

Retinaディスプレイでも綺麗に表示することがきます。

デメリットとしては、ブラウザごとに使える使えないがあるので、各ブラウザへの対応をしていくことになります。特に古いブラウザやIEへの対応が求められる時には、css3を使うとそのブラウザで崩れる可能性が出てきます。

では、画像を使うことのメリットを紹介します。

こちらはメリットはどのブラウザでも同じように表現できることではないでしょうか。

また、cssの記述量も少なくなるので、cssの見通しも良くなるかと思います。グラデーションなどの指定をしていくとcssの記述量が増えていき、余白などの設定を探すのが難しくなっていきます。

デメリットとしては、画像の大きさによっては、表示までに時間がかかってしまうことです。通信速度の遅い回線を使っているユーザーにとってはページ表示速度が遅いことはストレスになってしまい、離脱の原因につながります。

結局どちらで実装するのがいいの？

個人的には、cssで表現する方が好みです。

最近のブラウザでは、css3はほとんどのものが対応できているので、ブラウザへの影響をあまり考えなくても良いというのが一つの理由です。最近の仕事では、最新ブラウザが対象という案件が増えてきており、cssを使うことのハードルが下がってきています。

また、表示速度が速くなることや、Retinaディスプレイへの対応のことを考えると、cssで作成した方が綺麗に速くページを表示させることができます。