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です。
たとえば「この箱は広がってもいいけど、ここまで以上は広がらないで」と上限を決められます。
文章が長くても、上限を超えたら折り返して読みやすくしてくれます。
CSS
.article {
max-inline-size: 60ch; /* 文字数ベースで読みやすい幅の上限 */
}
60ch は「およそ 60 文字ぶん」の幅。長文の可読性が上がります。
max-inline-size は論理プロパティ(書字方向に合わせて意味が変わる)です。max-inline-size ≒ max-widthwriting-mode: vertical-rl など)max-inline-size ≒ max-heightch(文字幅基準)、rem、em%(親要素に対する割合)24rem)max-width/max-height は物理方向(常に横/縦)max-inline-size は書字方向に追従(横書きなら横、縦書きなら縦)初期値は none(上限なし)。ほかの指定(width 等)と一緒に使うと、上限が優先されます。
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)を使うと、上限が「縦方向」に切り替わる点を覚えておくと、多言語対応で迷いません。