CSS

この記事では「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 は「横書きなら最大の“横幅”を決めるスイッチ」と考えてOKです。

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

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

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

CSS

.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のテキストが横に伸びすぎて読みにくくなるのを防ぐ
多言語サイトで、横書き/縦書きどちらでも自然な見た目にしたい

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

CSS

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; /* 横方向の中央寄せ */
}

HTML

<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）を使うと、上限が「縦方向」に切り替わる点を覚えておくと、多言語対応で迷いません。

CSS