CSS

Sets size along the text flow direction, acting like width in horizontal writing and like height in vertical writing, so the same CSS works even when switching writing modes.

inline-size

やさしい説明（まずは直感）
正確な説明（少し踏み込む）
こう書けばOK（最短メモ）
使いどころ（具体例）
よくあるつまずき（注意点）
関連プロパティ（覚えると便利）

やさしい説明（まずは直感）

inline-size は、「文字が流れる向き（横書きなら横、縦書きなら縦）」に沿った大きさを決めるプロパティです。

横書きのときは実質「横幅（width）」、縦書きのときは実質「高さ（height）」として働きます。だから、言語や縦書き・横書きを切り替えても同じ書き方でOKになります。

正確な説明（少し踏み込む）

inline-size はインライン方向（文字が並ぶ方向）のサイズを指定します。

横書き（既定の writing-mode: horizontal-tb）では width と同じ意味。
縦書き（例：writing-mode: vertical-rl）では height と同じ意味に相当。

値は auto、長さ（px など）、割合（%）、キーワード（min-content / max-content / fit-content()）が使えます。

論理プロパティなので、レイアウトの向きを変えても同じCSSで対応しやすく、国際化（多言語・縦書き）に強い書き方です。

兄弟に block-size（ブロック方向＝段が積み重なる向き）があります。

こう書けばOK（最短メモ）

CSS

/* 横書きでも縦書きでも“文字が流れる向き”のサイズを120pxに */
.card {
    inline-size: 120px;
}

使いどころ（具体例）

後から縦書きに切り替える可能性がある UI

CSS

.article {
    inline-size: 40ch;      /* テキストの読みやすい行長を文字数ベースで固定 */
    writing-mode: horizontal-tb; /* 後で vertical-rl に変えてもCSSはそのまま */
}

ボタンやタグの“横幅っぽい”指定を、向きに強い書き方で

CSS

.tag {
    display: inline-block;
    inline-size: fit-content(20rem); /* 中身に合わせつつ上限を設定 */
    padding-inline: 0.5rem;          /* 左右に相当（論理プロパティ） */
    padding-block: 0.25rem;          /* 上下に相当（論理プロパティ） */
}

縦書きレイアウトで“高さっぽい”指定を同じ書き方で

CSS

.verticalCard {
    writing-mode: vertical-rl;  /* 縦書き */
    inline-size: 200px;         /* ここでは実質「高さ」を決めることに */
    block-size: auto;
}

よくあるつまずき（注意点）

width と同時指定は避ける: 同じ要素に width と inline-size を両方書くと、最終的には「どちらが勝つか（カスケード順）」の話になります。向きに強いCSSにしたいなら、原則として論理プロパティ側（inline-size）に統一しましょう。
インライン要素には効かないことがある: span など純粋なインライン要素にはサイズ指定が効きません。必要なら display: inline-block や block に。
box-sizing の影響を受ける: 境界線や余白を含むかどうかは box-sizing で決まります（レイアウトが合わないときはここを確認）。
パーセント指定の基準: inline-size: 50% の基準は“親のインライン方向サイズ”。意図通りに親要素のサイズが決まっているかをチェック。
min-/max- と組み合わせ: 伸びすぎ・縮みすぎを防ぐなら min-inline-size や max-inline-size を併用。

CSS