【CSS】画像の上に文字や画像を重ねて表示させる方法

　「シルク・ドゥ・ソレイユのトーテム見てきたよ！！」

　今回は上の様な画像とテキストを

「シルク・ドゥ・ソレイユのトーテム見てきたよ！！」

　↑このように重ねて表示する方法をご紹介します。

※テキストがそのままだと見え辛いので、背景に色を付けて文字を白にしています。

画像にテキストを重ねる場合のHTMLとCSS

HTMLコード

HTMLの解説

　全体（画像とテキスト）を「div」で囲んで、上に重ねたい部分（テキスト）を「span」で囲みました。

CSSコード

CSSの解説

　HTMLコードの「div」部分に「position:relative;」、上に重ねて表示させたい部分（今回の場合は「div」内の「span」部分）に「position:absolute;」がかかるようにします。

　「position:absolute;」の下に書いた「bottom:5px;」「left:0px;」は重ねる位置の設定です。この命令だと下部から5px上に、左端から0pxの位置に重ねるといった感じ。

　位置は「bottom」「top」「left」「right」で設定可能。

　今回は画像の下部に左寄せでテキストを重ねたかったので上記CSSの様になりました。

　↑画像の上部に右寄せでテキストを重ねたいときはこんな感じ。

　画像とテキストの横幅を合わせるために「div」「img」「span」に「width:300px;」を設定。

「シルク・ドゥ・ソレイユのトーテム見てきたよ！！」

　↑幅設定が無いとテキストが長くなった時に折り返されず、画像からはみ出てしまいます。

　「span」内の「text-align:center;」から下の命令に関してはテキストの装飾に関するものなので割愛します。

画像の上に画像を重ねる

　↑画像の上に画像を重たい場合は、先程のテキストを重ねたときのコードを少し変更することで実現可能です。

HTMLコード

　↑テキストの部分を画像に変更しただけです。

CSSコード

　「span」内の「width」で上に重ねる画像の大きさを設定。

　上に重ねる画像の位置を「bottom:30px;」「right:20px;」にしてみました。

まとめ

　重ねたいもの全体に「position:relative;」、重ねて上に表示したいものに「position:absolute;」を設定する事で、画像の上に文字や画像を重ねる表現が可能になるということですね。

　これを応用すればヘッダー画像の端にリンクやメニューを表示したり、記事一覧をオシャレに装飾できそうですね^^