【HTML,CSSの基礎】⑪imgとbackground-imageの違い


プログラミングを挫折しないコツは楽しむことです。

この記事では「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

imgとbackground-imageの違いについて

結論

• 情報として意味のある画像はimgタグ

• 装飾としての画像ならbackground-image

詳しく

• 画像がそのウェブサイトにとって必要なものならimgタグ

• 見た目を整えるための画像であればdivタグにbackground-imageを指定する

コード

imgタグとは

• imgタグはその名の通り「image」（画像）を表示するものです。

画像のサイズを変更するには、widhtかheightのどちらかを指定します。これで縦横比を保持したままサイズ補正されます。

background-image

• タグのサイズを埋め尽くすように繰り返し画像が表示される。

• 一枚の画像で表示する場合は「background-repeat: no-repeat;」を指定をする。

• widthとheigthは、要素全体（divタグ）のサイズを変えることになり、画像のサイズとは別物。

最後にもう一度コードです。