CSSを勉強しはじめて疑問に思うことの一つが、background-imageとimgタグの使い分け。
どちらも画像を表示させることができるんですけど、一体どっちを使ったらいいの？ってお話。
ちなみにbackground-imageはcssで、imgタグはhtmlのことです。
理論上でははっきりとした違いがありますが、実際にどのように使い分けをしているかご紹介したいと思います。
background-imageの使いどころ
background-imageは単純に見た目を良くする（装飾目的のみ）の場合に使用します。
ナビゲージョンでテキストを非表示にして、画像に置き換える際もbackground-imageを使用します。
又、印刷する際は表示されないのも大きな特徴です。
imgタグの使いどころ
imgタグはその画像自体に意味がある場合。
例えば通販サイト等で商品の説明をする場合、商品写真はimgタグを使用します。
簡単に説明すると、画像自体が見た目を整える以外の役割を持っている時。
僕はimgタグを使うようにしています。
レスポンシブデザインの場合
レスポンシブデザインの場合はややこしいです。
基本は前項で説明した通りで問題ないのですが、レスポンシブデザインの場合はどうしても処理しきれないケースが出て来ます。
例えば、下図の様にPCからスマホでリストタグで横並びに画像を複数並べる場合。
且つそれが装飾目的のみで使用される場合です。
これをコーディングする際、リストタグを使用するなら親boxのulを100%として、それぞれのliを幅23%で指定する様になるでしょう。
レスポンシブデザインではbackground-imageではうまく表現できない場合がありますので、その時はimgタグで対応するようにしましょう。
まとめ
いかがでしたか。
最近はスマホやタブレットといったデバイスの種類が増え、コーディングの方法も多様化しています。
以前まではbackground-imageとimgタグの取り扱いにははっきりとした違いがありました。
しかし今はレスポンシブデザインの対応が求められる場合があるので、その時の状況でimgタグかbackground-imageを使い分ける場合が多い様です。
それ自体が意味のある画像はimgタグ。
装飾のみの画像はbackground-image。
基本はその認識でいいのかなと思っています。
でわ。
コメント