figure要素のCSS

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

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

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

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

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

figure要素のベーシックなCSS

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

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

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

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

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

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

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

このスタイルの問題点

  • 枠線の表示に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


新着記事

コメントは受け付けていません。