画像に注釈を付ける時などに利用するfigcaption。
普通に利用すると、注釈が長くなってしまう場合は画像の幅からはみ出てしまい、デザイン性が悪くなります。

それを解決する方法として、画像（<figure>）をtableのように扱うという設定をします。

[2回]

display要素のデフォルト値である「inline」では、画像とキャプションが別々の塊として扱われるため、画像の幅とキャプションの幅が違ってしまうという現象が起きるようです。

なので、tableとして画像とキャプションを一つの塊にすることで幅を統一することが出来ます。

figure{
	display:table; /* figure要素をtableとして扱う */
	width: 100px; /* 最小限の幅（数値は何でも可。設定しておかないと上手くいかない） */
}

figcaption{
	width: 100 % ; /* figureの幅に合わせる */
}

tableを使用したことによる失敗

別のキャプション表示方法を試していた際に、マウスオーバーで画像の上にキャプションを表示させようとしたところ、このtable指定が原因でうまくいかなかったことが判明しました。

tableを使用してしまうと、隠そうと思っていたキャプション部分までtableとみなされてしまい、自動でtable高さが変わって隠せなくなってしまうのです。

【成功】
・table高さ＝画像の高さ
【失敗】
・table高さ＝画像の高さ＋figcaptionの高さ

なので、その場合にはdisplay要素のデフォルト値はinlineのままで、figureの幅を「min-content」にするとよい。

「-webkit」とか「-moz」っていうのはブラウザによって対応形式が異なるのに対処するためのやり方らしいです。

成功例

figure{
	position:relative;/* 絶対位置で指定（リセット） */
	overflow:hidden;/* 画像外の部分のコンテンツを非表示にする */
	width: min-content;/* コンテンツの幅に合わせた最小幅にする */
	width: -webkit-min-content;
	width: -moz-min-content;

}
figcaption{
	color:white;
	position: absolute;/* 相対位置で指定 */
	bottom: -1rem;/* 画像の下端から1文字分下げる */
	width: 100 %; /* figureの幅に合わせる */
	background: rgba(0,0,0,0.6);/* キャプションの背景色 */
	transition: 0.3s;/* キャプションが表示されるまでの速度 */
	-webkit-transition:0.3s;
	overflow:hidden;/* 画像外にはみ出た部分は表示しない */
}

figure:hover figcaption{
	bottom : 0;/* 画像の下端とfigcaptionの下端を合わせる */
}