画像や動画にキャプションを入れる

画像にキャプションを入れる

歴史を感じる扉

<figure>
	<img src="path/to/img.png" alt="">
	<figcaption>歴史を感じる扉</figcaption>
</figure>


figure {
	display: flex;
	flex-flow: column;
	max-width: 510px;
	text-align: center;
	margin: auto;
	padding: 5px;
	border: thin #c0c0c0 solid;
	}
figcaption {
	width: 100%;
	margin: auto;
	padding: 10px;
	text-align: center;
	color: #fff;
	background-color: #222;
	}
figure img {
	width: 500px;
	height: auto;
	}

動画の下部にキャプションを入れる

Atmospheric lights

<figure>
	<video loop autoplay muted>
		<source src="path/to/video.mp4" type="video/mp4">
	</video>
	<figcaption>Atmospheric lights</figcaption>
</figure>


figure {
	display: flex;
	flex-flow: column;
	max-width: 510px;
	text-align: center;
	margin: auto;
	padding: 5px;
	border: thin #c0c0c0 solid;
	}
figcaption {
	width: 100%;
	margin: auto;
	padding: 10px;
	text-align: center;
	color: #fff;
	background-color: #222;
	}
figure video {
	width: 500px;
	height: auto;
	}

TOP