CSSシークレット ―47のテクニックでCSSを自在に操る

課題

ご存知のとおり、高さが指定されていない要素はコンテンツに合わせて

上下方向に伸縮します。widthについてもこのようなふるまいをさせるこ

とは可能かどうか、考えてみましょう。例として、下のようなマークアッ

プを持つHTML5 の <figure>要素を取り上げます。

これに対して、画像周囲のボーダーなどの基本的なスタイルを設定する

こ と に し ま す。 デ フ ォ ル ト で は 、 図  7.1 の よ う に 表 示 さ れ ま す。

</figure>要素の幅を画像（サイズはさまざまです）と揃え、横方向の

中央に配置しようとしています。しかし、 </figcaption>要素のテキス

トの幅が画像よりも大きく、現状の表示は期待からかけ離れています。親

要素ではなく画像の幅にもとづいて、 </figure>要素の幅が決まるよう

にしたいと思います * 。このような目的のために、読者は今までに以下の

ようなスタイルを指定してきたのではないでしょうか。しかし、これらに

はいずれも副作用が伴います。

内在的なサイズ設定

36

<p>Sometext[…]</p>

<figure>

 <imgsrc="adamcatlace.jpg"/>

 <figcaption>

  ThegreatSirAdamCatlacewasnamedafter

  CountessAdaLovelace,thefirstprogrammer.

 </figcapti