【CSS Modules】inline-sizeプロパティの使い方
inline-sizeプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
inline-sizeプロパティは、要素のインライン方向のサイズを保持するプロパティです。このプロパティはCSSの論理プロパティの一つであり、要素のコンテンツフローにおける主要な方向のサイズを制御します。通常、多くの言語ではテキストが左から右、または右から左へ流れる横書きですが、日本語のような縦書きの言語も存在します。inline-sizeプロパティは、このようなテキストの書き込みモード（writing-modeプロパティ）やテキスト方向（directionプロパティ）に応じて、物理的な幅（width）または高さ（height）のどちらかとして振る舞います。
具体的には、英語のように左から右へ流れる横書き（writing-mode: horizontal-tb）の場合、inline-sizeはwidthプロパティと同じように要素の幅を決定します。一方で、日本語の縦書き（writing-mode: vertical-rlやvertical-lr）の場合、inline-sizeはheightプロパティと同じように要素の高さを決定します。この特性により、さまざまな言語や書き込みモードに対応するウェブページを作成する際に、物理的なwidthやheightを個別に調整することなく、一貫性のあるレイアウトを維持することが可能になります。国際化対応（i18n）における柔軟なレイアウト設計において非常に有用です。
指定できる値には、要素のサイズを自動調整するauto、具体的な長さを示すlength（例: 200px）、親要素に対する割合を示すpercentage（例: 50%）、内容の最大幅または高さに基づくmax-content、内容の最小幅または高さに基づくmin-contentなどがあります。初期値はautoであり、このプロパティは親要素から値を継承しません。
構文(syntax)
1.element-name { 2 inline-size: 100px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません