【初心者向け】Web制作の必須知識！imgタグとbackground-imageを使いこなそう
Webサイトに画像を配置する方法はいくつかありますが、特に「<img>タグ」とCSSの「background-image」は、よく似ているようで全く違う役割を持っています。この2つの違いを理解しておくと、あなたのWebデザインはもっと自由になります。
今回は、それぞれの特徴と、状況に応じた適切な使い分けを分かりやすく解説します。
<img>タグ：コンテンツとして画像を配置する
<img>は「イメージ」の略で、HTMLに直接画像を読み込むためのタグです。このタグを使うことで、その画像がWebサイトの「コンテンツ」として重要な意味を持つことを示します。
向いている用途
- ブログ記事のアイキャッチ画像や本文中の画像
- 商品画像やポートフォリオ作品
- 会社のロゴ
メリット
- SEO・アクセシビリティに強い:
alt属性（代替テキスト）を設定することで、検索エンジンや視覚障がいのあるユーザーに画像の内容を伝えられます。 - アスペクト比を保ちやすい: デフォルトで縦横比を維持するため、画面サイズが変わっても画像が崩れにくいです。
簡単なコード例:
HTML
<img src="https://example.com/photo.jpg" alt="青い空と白い雲の写真">
コード解説：
<img>：画像を表示するためのタグです。src（sourceの略）：表示したい画像のURLを指定します。alt（alternative textの略）：画像が表示されなかった場合に代わりに表示されるテキストです。
background-image：装飾として画像を自由に操る
background-imageは、CSS（スタイルシート）で要素の背景に画像を読み込むためのプロパティです。このプロパティを使うことで、その画像がサイトの「装飾」であることを示します。
向いている用途
- ヒーローヘッダーの背景画像: 画像の上にタイトルやボタンを重ねたい場合
- デザインの模様やテクスチャ
- ボタンやアイコン
メリット
- 画像の表示を細かく制御できる:
background-sizeやbackground-positionなどのプロパティを組み合わせて、画像の表示範囲や位置を自由に調整できます。 - 要素の上に重ねやすい: HTMLファイルに記述しないため、画像の上にテキストや別の要素を簡単に配置できます。
簡単なコード例:
CSS
.hero-section {
background-image: url("https://example.com/hero-bg.jpg");
background-size: cover; /* 要素全体を覆うように拡大 */
background-position: center; /* 画像を中央に配置 */
}
どっちを選ぶ？使い分けの簡単な判断基準
どちらの方法が良い、悪いということはありません。作りたいWebサイトの目的によって使い分けることが重要です。
この2つで迷ったら、「その画像がないと、Webサイトやコンテンツの意味が通じるか？」と考えてみましょう。
- 意味が通じない →
<img>タグ - 意味が通じる →
background-image
このシンプルな判断基準を意識するだけで、あなたのWeb制作はより論理的になり、意図した通りのデザインが実現できます。ぜひ、今後の制作に役立ててください！
