【CSS Modules】max-block-sizeプロパティの使い方
max-block-sizeプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
max-block-sizeプロパティは、要素のブロック方向における最大サイズを保持するプロパティです。このプロパティを使用することで、要素がコンテンツによって過度に拡大されるのを防ぎ、レイアウトの安定性を保つことができます。
「ブロック方向」とは、CSSの書き込みモード（writing-mode）によって決まる、コンテンツが流れる方向を指します。一般的なWebページでは、文字が上から下へとブロックを形成するため、このプロパティは通常、要素の論理的な「最大高さ」として機能します。しかし、縦書きモードなど、書き込みモードが変更された場合には、水平方向の最大幅として作用することもあります。これにより、物理的な幅や高さに固定されず、国際化されたWebサイトのレイアウトにも柔軟に対応できます。
設定できる値としては、ピクセル（px）やem、remなどの長さの単位、親要素に対するパーセンテージ（%）、または最大サイズを特に設定しないことを示すnoneなどがあります。要素の内容がmax-block-sizeで指定された値よりも大きくなる場合、通常は内容が要素からはみ出す（オーバーフローする）ことになります。
このプロパティは、block-sizeプロパティやmin-block-sizeプロパティと組み合わせて使用することで、要素のサイズをより詳細に制御することが可能です。例えば、コンポーネントの高さに上限を設けつつ、必要に応じて最小限の高さを確保するといった柔軟なレイアウト構築に貢献します。
公式リファレンス: max-block-size
構文(syntax)
1selector { 2 max-block-size: 200px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません