max-contentとmin-contentの違い

min-contentとmax-contentの違い


要素のwidthを決める値に「max-content」と「min-content」というものがあります。
max-content は、その要素内のサイズに合せたwidthとなります。

たとえば、

<p>今日は良い天気です。</p>

というpタグに、width: max-content; を指定すると、テキストが収まる最小幅がwidthとなります。個人的には、ブロックレベルの振る舞いのままbackgroundやborderをアイテム幅で指定したいときによく使います。

h2{
background: aliceblue ;
border-bottom: navy 1px solid ;
}

見本1(width指定なし)

見本2(width:max-content)

このようにmax-contentは分かりやすいのですが、「じゃあmin-contentってなんだ?」となります。

min-contentは最小文節

先に言っておくと、min-contentは正直なところ日本語ではあまり有能ではありません。
まずは英語でサンプルを作ってみます。

親{
display: flex ;
}
1つめ{
width: min-content ;
background: tomato ;
}
2つめ{
width: max-content ;
background: green ;
}

This is just sample

This is just sample

察しの良い方ならお分かりいただいたと思いますが、min-contentを指定したブロックは、テキストを単語で区切り、最大幅となる「sample」にあわせたwidthに調整されますwidthにあわせテキストは自動的に改行されます。

日本語ではまだ文節の区切りが怪しい

英語では単語を空白で区切るのでmin-contentの設定も容易ですが、空白を用いない日本語ではmin-contentに意図通りの働きを求めるのは難しいです。

句読点を使うことである程度調整できますが、正確に文節を区切るのはまだまだ無理でしょう。

width: auto(指定なし)

これはサンプルです

width: min-content(句読点なし)

これはサンプルです

width: min-content(句読点あり)

これは、サンプルです。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年4月19日HTML/CSScss,max-content,min-content

Posted by ミフネWEB