figure要素のCSS

ブラウザのデフォルト CSS で figure 要素は、blockquote とほぼ同じスタイルが適用されますが

figure 要素で子要素に画像と figcaption を持つ場合は、カードのような表現が　自然です。

画像サイズは、その画像ごとに変化し、右寄せ左寄せ等ケースバイケースで表示されるとき、

画像とcaptionの幅をそろえるには、どうしたらいいのか

ちょっとした工夫で、画像サイズとcaption幅をそろえる事が出来ます。

figure要素のベーシックなCSS

これは、ごくありふれたfigure要素の一例です。大抵、メインになる画像、図表、ビデオ等と、figcaptionという説明文で構成されます。

このままで、うまく表示されているように見えますが、CSSが必要になるのは、どんな場合なのか少し考えてみます。

画像サイズよりも、figcaptionの幅が広く表示されているのが解かると思いますが、これは、テーマによって異なり、通常の段落と同じ幅で表示されるようなケースも少なくありません。

figure要素の意味合いは、その要素自体が意味を持つ一つの塊で、文書の構造とは切り離されたブロックなので、塊として表示したいというニーズはありそうです。

figure要素を塊として表示するためのCSS

ベーシックなCSSの例です。

キャプションは、短い説明文が記述されますが、WordPressのキャプションフィールドは、現在のところ、html要素も記述できるようになっているため、このフィールドに、長めの文章が記述されることがあります

<figure class="mass">
	<a href="https://tenman.info/labo/css/files/IMG00003-1.jpg">
		<img src="https://tenman.info/labo/css/files/IMG00003-1-300x150.jpg" alt="" width="300" height="150" class="alignnone size-medium wp-image-6848" />
	</a>
	<figcaption>
		キャプションは、短い説明文が記述されますが、WordPressのキャプションフィールドは、現在のところ、html要素も記述できるようになっているため、このフィールドに、長めの文章が記述されることがあります
	</figcaption>
</figure>

.mass{
 display:table;
 outline:1px solid #ccc;
 border:none;
 width:300px;
}
.mass img{
 max-width:100%;
 margin:0;
}
.mass figcaption{
 display:table-caption;
 caption-side:bottom;
 font-size:13px;
 width:inherit;
}

このスタイルの問題点

~~枠線の表示にoutlineを使っていますが、chromeでは、全体の領域を枠線で囲みますが、firefox等では、枠線は画像だけしか囲まないので、工夫が必要~~2020/12/ 修正firefox84.0で正常に表示できるように、CSSを修正しました。
このスタイルに画技った事ではありませんが手書きのfigureを作った場合WordPressのPタグ補完機能（wpautop）が、figure内の要素をpタグで囲むことがあり、その点も工夫が必要。（一番簡単なのは、figure要素内の改行を全部取っ払う？）
キャプションの文字数によって、少ない時には、中央揃え多い時には、左揃えといったスタイルが出来ない（たぶん）やりたい場合は、inline-blockと、width:fit-contentを使うと可
table要素同様、display:tableは、max-widthプロパティが使えません。コンテンツ領域からオーバーフローしてしまわないよう注意が必要

以上、Raindrops figure要素の実装の過程で、一番簡単そうな候補の一つをメモに残します。

Note

figure要素は、html5のアウトラインから、外れる模様です。(HTML5 ドキュメントのセクションとアウトライン - HTML | MDN)なので、figureに見出し要素などがあっても、HTML5のアウトライン解析には含まれません。（aside要素内h*要素はアウトライン解析に含まれます）

HTML 5 Outliner

Photo by Tim Marshall on Unsplash

CSS note