html 画像 の 上 に 文字
はじめに
ウェブデザインにおいて、画像の上に文字を重ねて表示することはよく行われます。特に、ビジュアルコンテンツを強調する際に効果的です。本記事では、HTMLとCSSを使用して、画像の上に文字を表示する方法をご紹介します。
基本的なHTML構造
まず、基本的なHTML構造を作成します。以下のコードを参考にしてください。
<div class="image-container">
<img src="image.jpg" alt="画像の説明" />
<div class="overlay-text">
ここに文字を入れます
</div>
</div>
CSSスタイルの適用
次に、CSSを使って画像の上に文字を配置します。以下のスタイルを追加します。
.image-container {
position: relative;
width: 100%;
max-width: 600px;
}
.image-container img {
width: 100%;
height: auto;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
まとめ
このように、HTMLとCSSを使用することで、画像の上に効果的に文字を表示することができます。デザインのアクセントとして、ぜひ活用してみてください。