inline-sizeプロパティの説明
CSSのinline-sizeプロパティは、要素の書字方向に応じたインライン方向の寸法を指定します。HTML文書にはインラインとブロックの概念があり、インライン方向は文章の文字列が連なっていくいく方向を指します。
一般的に、日本語や英文で書かれた横書きの文章であれば、文字は左から右へと読まれます。この場合、インライン方向は文章における文字が書き連なる横方向となります。それに対して、縦書きの文章であれば文字は上から下へと流れ、改行されると右から左へ行が足されます。そのため、インライン方向は垂直に変わり縦方向の寸法になります。
インライン方向に対するブロック方向の寸法は、block-sizeプロパティで指定します。これらに適応される方向の基準は、文書の書字方向を定めるwriting-modeの値に応じて変化します。このような特性を持つプロパティのことを論理的プロパティ（Logical Properties）と言います。
要素のサイズ指定を行う機能という意味では、heightやwidthと同じです。ただし、これらは画面に映し出される結果を表す物理的プロパティ（Physical properties）に属しているので、上手く使い分ける必要があります。
inline-sizeは、書字方向が変化することを想定したコンテンツや、フレックス・ボックスやグリッド・レイアウトを扱う際に役立ちます。通常、要素の幅を指定するプロパティはwidthで構いませんが、この値は画面に映し出される物理的な寸法を表すため、論理的な書字方向の変化には対応しません。
今後、ユーザビリティを意識した柔軟なレイアウトや、縦書き横書きが動的に変わるサービスを作りたい場合は、要素の寸法指定に論理プロパティを用いて下さい。逆に、私たちが見ている画面の方向や位置関係を維持したい場合は、物理的プロパティを採用します。
inline-sizeに指定できる値
auto- ブラウザの自動計算に従います。これが初期値です。
<length>- CSSで使用できる長さを表す単位付きの数値です。画面サイズや親要素の幅に影響されない絶対的な寸法を指定できます。
<percentage>- 親要素の包含ブロックの幅に対する割合です。親要素の幅や画面のサイズが変わる環境で有用です。
max-content- コンテンツが要求する最大の幅で表示します。
min-content- コンテンツが要求する最小の幅で表示します。
fit-content(<length-percentage>)- 利用可能な空間に対して
fit-contentの計算式を用いて、指定された引数に置き換えます。これはmin(max-content, max(min-content, <length-percentage>))と同じ結果を表します。
inline-sizeの使い方とサンプルコード
inline-sizeプロパティの構文は以下の通りです。
/* <length>値 */
inline-size: 120px;
inline-size: 16rem;
inline-size: 5lh;
/* <percentage>値 */
inline-size: 25%;
inline-size: 100%;
/* キーワード値 */
inline-size: auto;
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(10em);
/* グローバル値 */
inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: unset;
inline-sizeの実例
それでは実際にinline-sizeプロパティの書き方を見ていきましょう。要素の寸法の基準となる振る舞いは、box-sizingプロパティで指定します。これについて詳しく仕様を知りたい方は、CSSのボックス・モデルの解説を参照して下さい。
以下の例は、同じinline-sizeの値を持つ要素の書字方向のみを変えた場合の振る舞いです。要素の幅と高さが、画面の物理的な位置関係ではなく、文章の論理的な値に従っていることが分かります。
<div class="sample-block">
<section>
<div class="item-1">横書き</div>
<span>writing-mode: lr;</span>
<span>block-size: 50px;</span>
<span>inline-size: 100px;</span>
</section>
<section>
<div class="item-2">縦書き</div>
<span>writing-mode: tb;</span>
<span>block-size: 50px;</span>
<span>inline-size: 100px;</span>
</section>
</div>
.sample-block {
display: flex;
align-item: center;
justify-content: center;
gap: 1rem;
}
.sample-block > section {
flex: 1;
padding: 1rem;
border: 2px solid #999;
}
.sample-block div {
block-size: 50px;
inline-size: 100px;
border-block-start: 2px solid #f63;
background-color: #fc6;
}
.item-1 {
writing-mode: lr;
}
.item-2 {
writing-mode: tb;
}
section > span {
display: block;
}
論理プロパティと物理演算プロパティの比較
続いて、要素の幅や高さを指定する際に用いるheightやwidthプロパティとの比較を行います。先ほどと同様に、同じ寸法を持つ要素を用意しますが、一方は物理的な値を、もう一方は論理的な値を持つ状態で書字方向のみを変化させてみます。この場合、どのように振る舞うでしょうか。
<div class="sample-block">
<section class="size-phys">
<h2>height × width</h2>
<div class="item-lr">横書き</div>
<div class="item-tb">縦書き</div>
</section>
<section class="size-logi">
<h2>block-size × inline-size</h2>
<div class="item-lr">横書き</div>
<div class="item-tb">縦書き</div>
</section>
</div>
.sample-block {
display: flex;
align-item: center;
justify-content: center;
gap: 1rem;
}
.sample-block > section {
flex: 1;
padding: 1rem;
border: 2px solid #999;
}
.sample-block section > h2 {
margin-block: 0;
font-size: 1rem;
}
.sample-block section > div {
margin-top: 1rem;
border-block-start: 2px solid #f63;
background-color: #fc6;
}
.size-phys div {
height: 50px;
width: 100px;
}
.size-logi div {
block-size: 50px;
inline-size: 100px;
}
.item-lr {
writing-mode: lr;
}
.item-tb {
writing-mode: tb;
}