【HTML・CSS】画像の上に画像や文字を重ねる方法

この記事では、「画像の上にアイコンや文字、または画像を重ねて表示する方法」を紹介します。 まずは、次の画像をご覧ください。 この画像では、右下に「いいね」ボタンを表示しています。 この表現はCSSの“position: absolute”と”position: relative”を使うことで、実現できます。 アイコンや文字が載せられた画像を用意するのではなく、HTMLとCSSを使って表現することで、次のようなメリットが得られます。 アイコンをクリックできるため、JavaScriptと組み合わせて使用できる アニメーション等の効果を設定できる 画像の上にいいねボタンを表示する 例として、いいねボタンを画像の上に表示する方法を説明したいと思います。 アイコンと画像を表示する まず最初にアイコンと画像を表示します。 アイコンは”Font Awesome”を使って表示します。 HTMLは次のように

[sainoue]

“position: absolute; top: 0; left: 0;”

[tetsu23]

画像の上にいいねボタン。