CSSだけで可変幅のfigureとfigcaptionの幅を揃える

分かりづらいタイトルですいません。要はさまざまな横幅のfigure(imgなど)に対して、figcaptionの幅をそのfigureと同じ幅にしたい、というお話です。

やりたいことまとめ

  • figureの中にあるimgなどは横幅がさまざまであるという想定
  • そのimgなどのさまざまな幅とfigcaptionの幅を揃えたい
  • いずれに対しても width , min-width , max-width を設定したくない
  • CSSのみで、可能な限り少ない記述で実現する

実装

必須なのはCSSのコメントで必須と書いた4行のみです。他の記述は単に装飾用となります。

See the Pen cssでfigureとfigcaptionの横幅をfigureの中身なりの幅で揃える by ejointjp (@ejointjp) on CodePen.

解説

なんというか、ひとひねりが必要なあたりがWebのレイアウトの難しさ、というか悩ましさであります。まず、100%幅ではなく中身なりの幅となる可変幅ブロックにするために、figure に display: table;を設定。うーん。この時点で既にもやもや感がすごいっす。

現状では、まだ長いcaptionの場合imgより横幅がはみ出してしまいます。そこで、figcaptiondisplay: table-caption; を指定。tableのcaptionはtableの幅を超えない、という特性を利用します。これで、見かけ上は table タグの中に caption タグを入れたのと同じ状態となりました。

仕上げです。tableのcaptionは、通常tableの上側に表示されるので、下に表示するために、figcaptioncaption-side: bottom; を指定して、下側に表示させます。以上でほぼ完成!

ですが、imgタグは、昔で言うインライン要素の挙動なので、下に意図しない余白が生じます。というわけで、img タグ(ここでは.myfigure__contentですが)に display: block; を指定し、この余白をなくします。

これにて完成!

というわけで、figureの中身なりの横幅にfigcaptionの幅を合わせることができました。

この記事が気に入ったら、シェアしよう