webmanab.html

menu

意外と知らないけど知っておきたい。内包するコンテンツの大きさに応じて要素の幅を可変させるレスポンシブテクニック -『CSS』

 

高さが指定されていないコンテンツのheigt(高さ)は、内包しているコンテンツの高さに依存しています。
width(幅)についても同じような振る舞いをさせたいときのtipsです。

内包するコンテンツの大きさに応じて幅を可変させる

figurefigcaption使って画像とキャプションを表示させる際に、imgに指定した画像のサイズにキャプションがぴったりくるようにしたい場合を例として考えます。
このときfigureがギャラリーのように複数並んでいて、画像のサイズがばらばらな場合だと個別にサイズ指定するのは面倒です。

ここでは、今回の要件がぴったりはまります。
imgに合わせて、figureの幅が可変するようなCSSを記述します。
たった1行です。

css


figure {
  width: min-content;
}

min-contentとは

CSS3で新しく定義されたキーワードmin-contentは、
 その要素が内包している要素の中で、分割できない項目のうち、最大の大きさを持つ要素に基づいて幅を決定します。
「最大の大きさを持つ要素」とは、一番長い単語、画像、固定幅のコンテンツなどが該当するでしょう。

test

IEのフォローバック

残念なことにIEではこのキーワードに対応していません。
打開案としてのフォローバックとしては、max-widthプロパティをカスケーディングすることで解決しましょう。

css


figure {
  max-width: 350px; // 適切な幅を与える
  max-width: min-content;
}

他のキーワード

補足として、他のキーワードに、 max-contentfit-contentがあります。

max-content
min-contentと逆の働きで、要素が内包している要素の中で、最大の大きさを持つ要素に基づいて幅を決定します。
親要素より幅が大きくなった場合は、親を突き抜けるような挙動になります。(inline-blockを指定したような感じ)
fit-content
内包されたコンテンツをすべて含むことができるサイズまで要素が広がり、親要素より大きくならないように最大値が定義されコンテンツが折り返されます。(floatとかtable-cellみたいに)

参考

おわります。

意外と知らないけど知っておきたい。内包するコンテンツの大きさに応じて要素の幅を可変させるレスポンシブテクニック -『CSS』

share

tip