装飾：画像の使い方をマスターしよう！img要素 vs background-image

📷 完成イメージ

📁 作成ファイル・保存場所

css-practice フォルダに以下のファイルを作成してください。

ファイル名	内容
img-vs-bgimg.html	画像の使い方比較トレーニング用HTMLファイル
img-vs-bgimg.css	比較スタイルを記述するCSSファイル
images/cafe.jpg	img要素で使用
images/bk.jpg	cssで背景画像として使用

👉 HTMLとCSSは <link> タグで連携してください。

今回のテーマ

画像を扱う方法には大きく2つあります。

<img> 要素で表示する方法（HTMLで使う）
CSSの background-image プロパティで背景として表示する方法

この2つにはそれぞれ得意・不得意があり、使い分けが非常に重要です。
この課題では「同じ見た目をそれぞれで再現する」ことに挑戦し、違いを体感します。

🔰 目的

<img> と background-image の違いと使い分けを理解する
object-fit, aspect-ratio, background-size, background-position などの使い方を学ぶ
画像が「切れる・余白ができる・はみ出す」などのよくある問題をCSSで解決できるようにする

チェックポイント

.img-card に対して img タグ＋object-fit を正しく指定できているか
.bg-card に対して background-image と background-size などを適切に指定できているか
2つの見た目が近く再現できているか（再現性比較）
用途によってどちらを使うか選べるようになっているか

HTML構造

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice 09</title>
    <link rel="stylesheet" href="img-vs-bgimg.css">
</head>

<body>
    <main>
        <section>
            <div class="img-card">
                <img src="images/cafe.jpg" alt="カフェの写真" width="500" height="">
                <p class="caption">img + object-fit</p>
            </div>
        </section>
        <section class="bg">
            <h2>background-image + cover</h2>
        </section>
    </main>
</body>

</html>

CSS

body {
    font-family: sans-serif;
    background-color: #f9f9f9;
    margin: 0;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

main {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.img-card {
    width: 500px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    border: 2px solid #ccc;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.bg {
    position: relative;
    width: 100%;
    height: 375px;
    margin: auto;
    background-image: url("images/bk.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(1rem, 5vw, 2.5rem);
    color: white;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0.5rem 1rem;
    background-color: rgba(95, 44, 4, 0.5);
    color: white;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
}

応用ポイント

background-size: contain との違いも試してみよう
object-fit: contain や fill の違いも体験してみよう
画像がトリミングされる場合に background-position を調整して、見切れを防ぐ工夫もしてみよう