【CSS Modules】min-inline-sizeプロパティの使い方

min-inline-sizeプロパティは、要素の最小インラインサイズを保持するプロパティです。このプロパティは、CSS論理プロパティで、writing-modeプロパティで定義される書字方向に沿った最小寸法を設定します。

通常の水平書字モード（テキストが左から右へ流れる場合など）では、要素の最小幅（min-width）に相当します。一方、垂直書字モード（テキストが上から下へ流れる場合など）では、要素の最小高さ（min-height）に相当します。このように、書字方向に応じて物理的な寸法が自動的に調整されるため、国際化対応や多言語サイトにおける柔軟なレイアウト設計に有用です。

このプロパティには、長さの単位（例: ピクセル、em）、パーセンテージ、またはauto、max-content、min-contentといったキーワード値を指定できます。要素のコンテンツがその最小インラインサイズを下回って縮小するのを防ぎ、レイアウトの崩れを防ぐ目的で使用されます。例えば、ボタンやテキストブロックが、短いテキストによって過度に縮小され、読みにくくなるのを防ぐ場合などに活用されます。これにより、どのような書字方向であっても、要素が読みやすい最小サイズを維持することが可能です。

Copy
1selector {
2  min-inline-size: 100px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません