版面と行長

行がどこで折り返るかは、文章が決めるのではなく、レイアウトが決めます。

図を大きく見る

図の中身を文字で読む

• ✕ 文章ブロックだけに max-width を当てる　○ 版面をコンテナで定義する
• コンテナは広いのに文章だけが途中で終わり、右に説明のつかない空白が残る　見出し・本文・表がすべて同じ右端で揃う。図版だけが越えてよい
• 図版だけ全幅なので、右端が揃わない　図版は断ち落としで版面を越える
• この空白に理由がない　右端が1本に揃っている
• 行長を短くしたいなら、幅を制限するのではなく理由を作る
• 隣に要素を置いて列幅で決める　／　版面そのものを狭くしてコンテナに与える。どちらも、折り返す位置がレイアウトで説明できる。

ひと目で#

幅は中身ではなく、レイアウトが決める。

版面

内容を収める枠。コンテナで定義し、すべての節がここを通る

行長

1行の文字数。和文は全角35〜45字、欧文は45〜75字が目安

断ち落とし

図版だけが版面を越えて、画面の端まで届く手法

行が折り返る位置は、レイアウトで説明できること。「1行が長いと読みにくいから」を理由にした幅の指定は使いません。

使い分け#

間違えやすいところ#

• ✕p { max-width: 65ch } のように文章だけに幅を当てるコンテナは広いのに文章だけ途中で終わり、右に説明のつかない空白が残る
• ✕節ごとに padding を個別に指定する左端が揃わなくなる
• ✕文章まで断ち落とす行長が長くなりすぎて、版面が消える
• ✕断ち落としに width: 100vw を使う縦スクロールバーの幅が含まれ、横スクロールが出る。DOM でコンテナの外に出す
• ✕コンテナを何種類も作る端がずれて、揃いが失われる

断ち落としは、どこに要素を置くかで決まります。幅の指定で越えさせようとすると、必ずどこかで数値が合いません。

図を大きく見る

図の中身を文字で読む

• ✕ コンテナの中で 100vw　○ DOM でコンテナの外に出す
• 縦スクロールバーの幅が余分に出る　帯は幅100%。中の文字だけ版面に戻す
• 画面の幅　画面の幅
• 図版（100vw）　図版（幅100%・親は .page の外）
• はみ出す
• 横スクロールが出て、375px でページ全体が横に動く。　.page > .bleed { inline-size: 100%; }
• calc(100vw - scrollbar) のような当て物も、環境で外れる。　版面を越えてよいのは図版・写真・色面・区切りの帯だけ。
• 本文まで断ち落とすと行長が伸び、そもそも版面が消える。越えるのは「見せるもの」に限る。

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

珈琲店の読み物ページです。本文に max-width: 34em を直接書いてありました。1280px の画面で開くと、コンテナは版面いっぱいまで広がっているのに、文章だけが左寄りで途中で終わります。右に、説明のつかない空白が残ります。

さらに悪いのは見出しと表です。見出しには幅を書いていないので版面の右端まで届き、本文だけが手前で折り返します。右端が2本ある状態です。読者は「何かが欠けている」と感じますが、原因は指摘できません。

直し方は2手です。まず p から幅の指定を外し、見出し・本文・表・リストを同じ右端に揃えます。そのうえで行長を短くしたいなら、隣に何かを置きます。 目次でも図版でも構いません。折り返しは、その列の幅で決まります。

このページでは、右に「この記事の目次」を 16rem で置きました。本文の列は残りの幅になり、1280px の画面で全角40字前後に落ち着きます。幅を1つも書いていないのに、行長が決まります。 画面が狭くなれば目次が下へ落ち、本文は版面いっぱいに戻ります。

写真だけは版面を越えさせます。ただし width: 100vw は使いません。100vw には縦スクロールバーの幅が含まれるので、横スクロールが出ます。帯にしたい要素を DOM でコンテナの外に出し、幅は 100% にします。文字は版面の中、写真は端まで、という形になります。

本文＋サイドバー が、隣に列を置く形の完成形です。

確認する#

• 本文の p に ch や em の幅指定が残っていない
• 見出し・本文・表・リストの右端が、1本の線の上で揃っている
• 断ち落とした帯が 100vw ではなく、コンテナの外の 100% で作られている

使えるパターン#

• 本文＋サイドバー
• 和文本文段
• 図版とキャプション

このページで扱う語#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませる、余白と幅を決めるにまとめてある。逆引きには全188件。

版面を試す#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 字と余白と幅

版面の幅と、隣に置く列を選ぶと、下の記事の折り返しが変わります。行長は結果として決まる数字で、文章に max-width を当てて作る数字ではありません。

生成した CSS です。既定は 68rem の版面に、18rem のサイドを置いた2列です。

:root {
  --page: 68rem;             /* 版面はここ1か所で決める */
  --gutter: var(--space-6);  /* 32px */
}

.page {
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 行長を短くしたいなら、隣に列を作る */
.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--space-8);
}

@media (max-width: 47.9375em) {
  .with-aside { grid-template-columns: minmax(0, 1fr); }
}

/* 本文・見出し・表・リストには幅を持たせない。この構成で 1行 約42字（全角） */

この道具は JavaScript で動きます。無効の場合は、下の既定値のコードから始めてください。

出典#

• WCAG 2.2 達成基準 1.4.8 視覚的提示
• Robert Bringhurst『The Elements of Typographic Style』

関連#

• グリッド版面を分割する
• 構図のパターン分割レイアウトと断ち落とし
• 字間と行間行長と行送りは連動する
• レスポンシブ幅が変わったときの版面
• 数値の早見表折り返す幅の目安
• 出発点のCSS版面の定義