今回は、imgとbackground-imageの違いと使い方について解説したいと思います。
私も、最初は『img』と『background-image』どちらも画像を表示させるコードだけど、どのように分けて使えばいいのだろう？と疑問に思っていました。
そこで、今回は『img』と『background-image』の違いと使い方をわかりやすく共有したいと思います。
imgとbackground-imageの違いと使い方
まず結論から言うと、
img・・・サイトや記事に関して関連性が高い画像に対して使う
background-image・・・サイトに装飾を加える際の画像に対して使う
さらに、詳しく言うと、
img・・・人物・商品・記事の写真など、本文に対して関連性が高い
以下、imgの使用例
background-image・・・サイトの背景・ちょっとしたアクセントに対して使う
以下、background-imageの使用例
このように、imgはサイトに対して関連性の高い画像に使い、
background-imageは、サイトに対して関連性が低い装飾などに使う！
と、イメージしておきましょう！
imgの使い方
まず、imgのHTMLコードの書き方は、
<img src="./img/logo.png" alt="女性のモデルと花の写真" class="item">
このように、imgタグには閉じタグは必要ありません。
また、altの中には、写真で表現していることを言語化した内容を記載します。
なぜaltを設定しないといけないのかと言うと、
もし画像がサイトでうつらない場合、サイトを見に来た人はどのような画像なのかわからないという状況では困ります。
そのためaltの内容がテキストとして補助的にサイトにうつるようにし、
画像がなくてもテキストを読むことで予測できるようにするためaltを記載しているというわけです。
また、imgは、『id』『class』をつけることができます。
そのため、CSSで画像を編集することが可能です。
CSSでの編集方法は、以下の記事で解説しています。
background-imageの使い方
まず、background-imageの使用例は、
.contact {
・・・
background-image: url("../../img/contact.png");
}
このように、url(“〜”)のように『〜』の中に、画像のパスを記入します。
『”』がないと画像が反映されないため書き忘れがないよう気をつけましょう。
また、background-imageの場合、画像に対して様々な編集ができるため、
興味がある人は、以下の記事をご覧ください。
まとめ
・imgは、人物や商品など、サイトに対して関連性が高い画像に対して使う
・background-imageは、サイトの背景など、サイトに対して関連性が低い装飾などに対して使う
今回は、imgとbackground-imageの違いと使い方について解説しました。
他にも、実戦でよく使うHTMLコードを以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
