CSS「min-block-size」でWebデザインをもっと自由に！高さ制限を解除して表現の幅を広げる

CSSの「Miscellaneous」カテゴリーにある「min-block-size」プロパティは、要素のブロックサイズの最小値を設定するために使用されます。ブロックサイズは、要素の水平方向または垂直方向の大きさを指します。このプロパティは、要素の書記モードによって、min-widthまたはmin-heightプロパティに対応します。

使い方

min-block-size: <値>;

値

unset: プロパティを未設定状態に戻します。
initial: 初期値にリセットします。
inherit: 親要素のmin-block-size値を継承します。
fill-available: 利用可能なスペースをすべて要素で埋めます。
fit-content: 要素のコンテンツとパディングに必要な最小スペースを設定します。
min-content: 要素のコンテンツが収まる最小スペースを設定します。
max-content: 要素のコンテンツに必要な最小スペースを設定します。
auto: ブラウザが要素のコンテンツに基づいてブロックサイズを決定します。
<percentage>: 親要素のサイズの割合で指定します。
<length>: ピクセル、em、remなどの長さ単位で指定します。

.example {
  min-block-size: 200px; /* ブロックサイズを200ピクセルに設定 */
}

.example {
  min-block-size: 50%; /* 親要素のサイズの50%に設定 */
}

.example {
  min-block-size: auto; /* ブラウザが自動的に決定 */
}

min-block-sizeプロパティは、すべてのブラウザでサポートされています。
min-block-sizeプロパティは、flexboxレイアウトやgridレイアウトなどのレイアウトシステムと併用できます。
min-block-sizeプロパティは、writing-modeプロパティによって影響を受けます。writing-modeプロパティがhorizontal-rlまたはvertical-rlの場合、min-block-sizeプロパティは要素の幅に影響します。writing-modeプロパティがinitialまたはautoの場合、min-block-sizeプロパティは要素の高さに影響します。

例 1：要素のブロックサイズを 200 ピクセルに設定

.example {
  min-block-size: 200px;
}

この例では、.example クラスを持つすべての要素のブロックサイズを 200 ピクセルに設定します。要素の高さが 200 ピクセル未満の場合は、高さが 200 ピクセルに調整されます。要素の高さが 200 ピクセル以上の場合は、そのままの高さになります。

例 2：要素のブロックサイズを親要素のサイズの 50% に設定

.example {
  min-block-size: 50%;
}

この例では、.example クラスを持つすべての要素のブロックサイズを親要素のサイズの 50% に設定します。親要素の高さが 100 ピクセルの場合、.example 要素の高さは 50 ピクセルになります。親要素の高さが 200 ピクセルの場合、.example 要素の高さは 100 ピクセルになります。

例 3：ブラウザが要素のコンテンツに基づいてブロックサイズを自動的に決定

.example {
  min-block-size: auto;
}

この例では、.example クラスを持つすべての要素のブロックサイズは、ブラウザが要素のコンテンツに基づいて自動的に決定されます。要素内にテキストや画像などのコンテンツが多い場合は、ブロックサイズが大きくなります。要素内にコンテンツが少ない場合は、ブロックサイズが小さくなります。

例 4：要素のコンテンツに必要な最小スペースを設定

.example {
  min-block-size: max-content;
}

この例では、.example クラスを持つすべての要素のブロックサイズは、要素のコンテンツに必要な最小スペースに設定されます。要素内にテキストや画像などのコンテンツがある場合は、コンテンツを表示するために必要な最小限の高さになります。要素内にコンテンツがない場合は、高さは 0 になります。

例 5：要素のコンテンツとパディングに必要な最小スペースを設定

.example {
  min-block-size: fit-content;
}

この例では、.example クラスを持つすべての要素のブロックサイズは、要素のコンテンツとパディングに必要な最小スペースに設定されます。要素内にテキストや画像などのコンテンツがある場合は、コンテンツとパディングを表示するために必要な最小限の高さになります。要素内にコンテンツがない場合は、パディングの高さのみになります。

例 6：利用可能なスペースをすべて要素で埋める

.example {
  min-block-size: fill-available;
}

この例では、.example クラスを持つすべての要素は、利用可能なスペースをすべて埋めます。親要素に十分なスペースがある場合は、.example 要素は親要素の高さをいっぱいにします。親要素に十分なスペースがない場合は、.example 要素は親要素で利用可能なスペースすべてを占有します。

例 7：親要素の min-block-size 値を継承

.example {
  min-block-size: inherit;
}

この例では、.example クラスを持つすべての要素は、親要素の min-block-size 値を継承します。親要素の min-block-size 値が 200 ピクセルの場合、.example 要素のブロックサイズも 200 ピクセルになります。

例 8：初期値にリセット

.example {
  min-block-size: initial;
}

この例では、.example クラスを持つすべての要素の min-block-size プロパティは初期値にリセットされます。初期値は、要素の種類によって異なります。たとえば、div 要素の場合、初期値は auto になります。

例 9：プロパティを未設定状態に戻す

.example {
  min-block-size: unset;
}

この例では、.example クラスを持つすべての要素の min-block-size プロパティは未設定状態に戻されます。要素には min-block-size プロパティが設定されていないかのように扱われます。

min-height と writing-mode の併用

min-block-size プロパティは、writing-mode プロパティの影響を受けます。writing-mode プロパティが horizontal-rl または vertical-rl の場合、min-block-size プロパティは要素の幅に影響します。一方、writing-mode プロパティが initial または auto の場合、min-block-size プロパティは要素の高さに影響します。

したがって、要素のブロックサイズを常に高さを基準に設定したい場合は、min-height プロパティと writing-mode: vertical-rl を併用する方法が有効です。

例

.example {
  min-height: 200px;
  writing-mode: vertical-rl;
}

この例では、.example クラスを持つすべての要素のブロックサイズは、常に 200 ピクセルの高さになります。

長所

高さを基準としたブロックサイズの制御が容易

短所

writing-mode プロパティを vertical-rl に設定する必要があるため、レイアウトによっては意図した動作にならない場合がある

flexbox レイアウトの使用

flexbox レイアウトは、要素を柔軟にレイアウトするための強力な方法です。min-block-size プロパティの代替として、flex-grow プロパティと min-height プロパティを組み合わせて使用することができます。

例

.example {
  display: flex;
  flex-grow: 1;
  min-height: 200px;
}

この例では、.example クラスを持つすべての要素は、親要素の利用可能なスペースをすべて占有するように伸縮し、高さは最低でも 200 ピクセルになります。

長所

min-block-size プロパティよりも多くの制御が可能
柔軟なレイアウトが可能

短所

flexbox レイアウトの仕組みを理解する必要がある

grid レイアウトの使用

grid レイアウトは、要素を行と列に並べてレイアウトするためのもう一つの方法です。min-block-size プロパティの代替として、grid-template-rows プロパティと min-height プロパティを組み合わせて使用することができます。

例

.example {
  grid-template-rows: minmax(200px, auto);
}

この例では、.example クラスを持つすべての要素は、高さが最低でも 200 ピクセルになるように行の高さが設定されます。要素内にコンテンツが多い場合は、行の高さが自動的に調整されます。

長所

min-block-size プロパティよりも多くの制御が可能
行と列に要素を並べてレイアウトできる

短所

grid レイアウトの仕組みを理解する必要がある

calc() 関数を使用

calc() 関数は、数学的な計算に基づいて値を設定するために使用できます。min-block-size プロパティの代替として、親要素の高さからパディングを引いた値を設定することができます。

例

.example {
  min-block-size: calc(100% - 20px);
}

この例では、.example クラスを持つすべての要素のブロックサイズは、親要素の高さを 100% とし、そこからパディングの 20 ピクセルを引いた値になります。

長所

親要素の高さに基づいてブロックサイズを動的に設定できる

短所

計算式を理解する必要がある

JavaScript を使用する

JavaScript を使用して、要素のブロックサイズを動的に設定することもできます。この方法は、より複雑なレイアウトが必要な場合に役立ちます。

例

const element = document.querySelector('.example');
element.style.minHeight = '200px';

この例では、JavaScript を使用して、.example クラスを持つ要素の min-height プロパティを 200 ピクセルに設定します。

CSS「min-block-size」でWebデザインをもっと自由に！ 高さ制限を解除して表現の幅を広げる

例 1：要素のブロックサイズを 200 ピクセルに設定

min-height と writing-mode の併用

CSS「min-block-size」でWebデザインをもっと自由に！高さ制限を解除して表現の幅を広げる