【簡単】画像の上に、文字を重ねる方法【HTMLとCSS】

「画像の上に文字を重ねるようにコーディングしたいけど、やり方が分からない!」

と悩んでいる方に向けて、今回は「画像の上に、文字を重ねる方法」について紹介します!

この記事を書いている僕は、現在大阪のWEB制作会社で、WEBサイト制作をしています。

当ブログを通して、あなたは「画像の上に、文字を重ねる方法」について理解することができますよ!

実務でもよく使う実装なので、是非習得してみてください〜!

【簡単】画像の上に、文字を重ねる方法【HTMLとCSS】

今回実装するのはこちら!

画像の上に文字を重ねる方法は、以下の3つのステップです。

① 画像を表示する

② 文字を表示する

③ 画像の上に文字を重ねる

1つずつ紹介していきますね!

① 画像を表示する

まずは画像を表示しましょう!

コードはこちらになります。

「.box」というclassの中に、imgタグで画像を表示しました。

② 文字を表示する

次に、画像の上に表示させたい文字を表示しましょう!

imgタグの下に、pタグを用意しました。

③ 画像の上に文字を重ねる

画像と上に重ねたい文字が揃いました。

これから実際に画像の上に文字を重ねる実装をしていきます!

今回使うプロパティは、「position」プロパティです。

positionを使うことで、要素の位置を決めることができる。

まずは親要素である「.box」に「position: relative;」を指定しましょう!

これで要素の基準値を決めました。

次に、画像の上に重ねたい文字である「pタグ」に「position: absolute;」を指定しましょう!

absoluteは、親要素を基準に、絶対的な位置を決めます。

そして「topから0px」、「leftから0px」を指定することで、文字を左上に配置しました。

これで、画像の上に文字を重ねる実装が完了です!

あとはお好みで文字の装飾を変えるなりしてください。

画像の上に文字を重ねる実装のポイントは、重ねたい文字の親要素に「position: relative;」、そして重ねたい文字に「position: absolute;」を指定することです!

まとめ

以上が、「画像の上に、文字を重ねる方法」についてでした!

制作の現場でもよく使う実装なので、是非参考にしてください!

そして、最後に今回使ったHTML・CSSの全体のコードを貼っておきますね。

HTML

CSS

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事