`.image-item` コンテナに `position: relative;` を設定し、その中の `h3` と `h4` に `position: absolute;` を設定して配置します。まず、HTML構造が以下のようになっていることを確認してください。 html

見出し 3

見出し 4

次に、CSSを以下のように変更します。 .image-item { position: relative; /* 子要素を絶対配置するための基準 */ display: inline-block; /* または block, flex などレイアウトに合わせて */ /* display: flex; や justify-content は不要になる場合があります */ /* align-items: center; */ /* width: 300px; */ /* 必要に応じてサイズ指定 */ /* height: 200px; */ overflow: hidden; /* はみ出した要素を隠す場合 */ border-radius: 6px; /* 親要素にも適用すると綺麗に見える場合がある */ } .image-item img { display: block; /* 画像がベースレイヤーになるように */ max-width: 100%; /* max-height: 100%; */ /* 必要に応じて */ object-fit: cover; /* contain から cover に戻すか、レイアウト次第 */ user-select: none; -webkit-user-drag: none; border-radius: 6px; /* 画像自体の角丸 */ /* vertical-align: middle; /* display: inline-block の場合などに有効 */ } .image-item h3, .image-item h4 { position: absolute; /* 親要素(.image-item)を基準に絶対配置 */ left: 10px; /* 左からの位置 */ right: 10px; /* 右からの位置 (左右に広げる場合) */ margin: 0; /* デフォルトマージンをリセット */ color: white; /* 文字色 (例) */ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 文字の影 (例) */ z-index: 1; /* 画像より手前に表示 */ padding: 5px; /* 内側余白 (例) */ /* background-color: rgba(0, 0, 0, 0.5); /* 背景色 (任意) */ /* border-radius: 4px; /* 角丸 (任意) */ } .image-item h3 { top: 10px; /* 上からの位置 */ font-size: 1.2em; /* 文字サイズ (例) */ } .image-item h4 { bottom: 10px; /* 下からの位置 */ font-size: 1em; /* 文字サイズ (例) */ /* top: 40px; */ /* h3の下に配置する場合など */ } **解説:** 1. **`.image-item`**: * `position: relative;` を設定し、この要素が絶対配置される子要素 (`h3`, `h4`) の位置決めコンテキスト（基準点）となるようにします。 * `display` プロパティはレイアウトに応じて `inline-block`, `block`, `flex` などを選択します。以前の中央揃え (`display: flex` など) は、この新しい配置方法では不要になるか、調整が必要になる場合があります。 * `overflow: hidden;` は、テキストなどがコンテナからはみ出した場合に隠します（任意）。 * `border-radius` を親要素にも適用すると、画像とテキスト背景（もしあれば）が一体感を持って角丸になります。 2. **`.image-item img`**: * `display: block;` を維持します。 * `object-fit` は `cover` または `contain` のどちらが適切か、デザインによります。テキストを重ねる場合は `cover` の方が一般的かもしれません。 3. **`.image-item h3, .image-item h4`**: * `position: absolute;` で、親の `.image-item` を基準にした絶対位置指定を有効にします。 * `top`, `bottom`, `left`, `right` プロパティで、コンテナ内の任意の位置に配置します。上記の例では、`h3` を上部、`h4` を下部に配置しています。 * `z-index: 1;` で、画像 (`z-index` が未指定なら `0` 相当) よりも手前に表示されるようにします。 * `color`, `text-shadow`, `padding`, `background-color` などで見た目を調整します。これで、画像の上に `h3` と `h4` がオーバーレイ表示されます。位置やスタイルは必要に応じて調整してください。