HTMLで画像の上に文字を表示する方法

HTMLで画像の上に文字を表示する方法

Webデザインの中で、画像の上に文字を重ねて表示することは、視覚的に魅力的なコンテンツを作成するための一般的なテクニックです。このガイドでは、HTMLとCSSを使用して、画像の上にテキストを配置する方法を説明します。

基本的なHTMLの構造

画像の上に文字を表示するには、まず基本的なHTMLの構造を作成します。以下はその例です：

<div class="image-container">
    <img src="image.jpg" alt="画像の説明">
    <p class="overlay-text">画像の上の文字</p>
</div>

CSSスタイルの定義

次に、CSSを使って画像とテキストをスタイリングします。以下は、画像の上に文字を配置するためのスタイルです：

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    text-align: center;
}

実際の例

実際にこのテクニックを使った例を見てみましょう。この例では、ユーザーが画像に目を引くオーバーレイテキストを追加しています。詳細なデモは、以下のリンクで確認できます：

• 画像オーバーレイのデモ

まとめ

以上の手順で、HTMLとCSSを使用して画像の上に文字を表示することができます。このテクニックを使って、より魅力的なWebページを作成しましょう。