役立つ記事

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を使用することで、画像の上に効果的に文字を表示することができます。デザインのアクセントとして、ぜひ活用してみてください。

参考リンク

投稿者

愛知県に住んでいる記事作成者です。グルメと旅行に関する執筆をしており、アウトドアにも興味があります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です