画像の上にテキストを表示する

画像の上にキャプションを表示

画像の上に被せるような形でテキストを表示する方法を解説します。

HTMLのコード例

<figure>
	<img src="./images/pic.jpg">
	<figcaption>スイスのとあるカフェでの風景</figcaption>
</figure>

figure要素を親要素として、画像のimg要素とキャプションのfigcaption要素を配置しています。

CSSのコード例

figure {
	position: relative;
	display: inline-block;
	margin-right: 20px;
	width: 400px;
}
	figure img {
		max-width: 100%;
		vertical-align: top;
	}
	figure figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 5px 10px;
		font-size: 86%;
		color: #fff;
		background: #333;
	}

figure要素をpositionプロパティの基点(relative)とし、子孫要素のfigcaption要素を左下に表示されるよう設定しています。

positionプロパティを使ってfigcaption要素の位置を指定することで、写真についてのキャプションなどのテキストを好きな位置に表示することができます。

記事一覧のようなレイアウトで画像の上にテキストを表示

続いて、記事一覧ページにあるようなサムネイル画像の上に投稿日や記事タイトルが記載されたレイアウトの作成方法を解説します。

今回は画像の表示にはimg要素を使わず、CSSでheader要素の背景画像として表示します。

HTMLのコード例

<article>
	<header>
		<div>
			<p class="text_date"><time datetime="2018-08-22">2018.08.22</time></p>
			<h2>スイス ひとり旅レポート vol.1</h2>
		</div>
	</header>
	<p class="text_excerpt">2018年8月12日〜19日までの1週間、スイスを1人で1周してきました。<br>今回は初日から2日間滞在したチューリッヒについての旅レポをお届けします。</p>
</article>

CSSのコード例

article {
	width: 400px;
	box-shadow: 0 0 5px #bbb;
	background: #fff;
}
	article header {
		position: relative;
		height: 200px;
		max-height: 200px;
		text-align: left;
		background: url(./images/pic.jpg) left top no-repeat;
	}
		article header div {
			position: absolute;
			left: 10px;
			bottom: 10px;
		}

.text_date {
	margin-bottom: 5px;
}
	.text_date time {
		display: inline-block;
		padding: 5px 10px;
		color: #fff;
		font-size: 79%;
		background: #333;
	}

h2 {
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	font-size: 115%;
	background: #333;
}
.text_excerpt {
	padding: 10px 20px;
	font-size: 86%;
	line-height: 1.6em;
}

今回はheader要素をpositionプロパティの基点として設定し、投稿日や記事タイトルをdiv要素で囲って、div要素に対して位置を指定しています。

div要素を使わず、投稿日のp要素とタイトルのh2要素にそれぞれ位置指定することも可能です。
しかしその場合、タイトルが2行、3行と増えて高さが変わると投稿日の位置も修正しなければならなくなり、CSSやJavaScriptのコードがやや複雑になってしまいます。