CSS

Sets a maximum spread in the reading direction so text and boxes don’t grow too wide, keeping content easy to read.

max-inline-size

• まずはイメージ（やさしい説明）
• こう書けばOK（最短メモ）
• もう少しだけ正確に
  • max-inline-size は論理プロパティ（書字方向に合わせて意味が変わる）です。
  • 値の例
  • 似ているプロパティとの違い
• よくある使いどころ
• ミニサンプル（実務で使いやすい形）
• 注意ポイント（つまずき防止）

まずはイメージ（やさしい説明）

max-inline-size は「横書きなら最大の“横幅”を決めるスイッチ」と考えてOKです。

たとえば「この箱は広がってもいいけど、ここまで以上は広がらないで」と上限を決められます。

文章が長くても、上限を超えたら折り返して読みやすくしてくれます。

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

.article {
  max-inline-size: 60ch; /* 文字数ベースで読みやすい幅の上限 */
}

60ch は「およそ 60 文字ぶん」の幅。長文の可読性が上がります。

もう少しだけ正確に

max-inline-size は論理プロパティ（書字方向に合わせて意味が変わる）です。

横書き（日本語や英語の通常）

max-inline-size ≒ max-width

縦書き（writing-mode: vertical-rl など）

max-inline-size ≒ max-height

値の例

長文向け

ch（文字幅基準）、rem、em

レイアウト合わせ

%（親要素に対する割合）

伸ばしたくないとき

具体的な長さ（例：24rem）

似ているプロパティとの違い

• max-width/max-height は物理方向（常に横/縦）
• max-inline-size は書字方向に追従（横書きなら横、縦書きなら縦）
  → 多言語や縦書きも視野に入れるならこちらが便利。

初期値は none（上限なし）。ほかの指定（width 等）と一緒に使うと、上限が優先されます。

よくある使いどころ

• 記事本文やコメント欄の「読みやすい行幅」の上限を決める
• カード型UIのテキストが横に伸びすぎて読みにくくなるのを防ぐ
• 多言語サイトで、横書き/縦書きどちらでも自然な見た目にしたい

ミニサンプル（実務で使いやすい形）

main {
	padding: 1rem;
}

.prose {
	max-inline-size: 65ch; /* 行の最大長さを制御 */
	line-height: 1.7;
}

/* 画面中央に寄せたい場合 */
.wrapper {
	display: grid;
	place-items: start center;
	min-block-size: 100vh; /* 画面の縦方向いっぱい */
}

.prose--center {
	margin-inline: auto; /* 横方向の中央寄せ */
}

<main class="wrapper">
	<article class="prose prose--center">
		<h1>読みやすい記事タイトル</h1>
		<p>長めの文章でも、max-inline-size で行の長さに上限を設けると、読みやすさが上がります。</p>
	</article>
</main>

注意ポイント（つまずき防止）

• width と一緒に書いたとき、実際の広がりは min()-的に小さい方になります（max-inline-size が“天井”）。
• 画像や長い英単語で折り返せないときは、max-inline-size だけでは収まらないことがあります。
• その場合は img { max-inline-size: 100%; height: auto; } や overflow-wrap: anywhere; を併用。
• 縦書き（writing-mode）を使うと、上限が「縦方向」に切り替わる点を覚えておくと、多言語対応で迷いません。