2020.12.09

【簡単】画像の上に、文字を重ねる方法【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

 

 

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。