行内の小さなラベルの折り返しを選ぶ：外側と内側を分けて考える

本文の末尾に付けた「予約不要」が、行の途中で「予約」と「不要」に分かれてしまう。行内の小さなラベルの折り返しを選ぶときは、ラベル全体が次の行へ移ることと、ラベルの中の文字が折り返すことを別々に考えます。

題材は架空の資料交換会の案内です。spanとCSSのクラスを読める人向けに、文章の途中にある読み取り専用のラベルを扱います。エディターとブラウザーを用意してください。ボタンやタグ一覧の配置を作る課題ではありません。

文章の流れに残すものを、一つの箱にする

「資料交換会は午後から開催します。予約不要」という一文では、案内が先にあり、参加条件の短いラベルが続きます。spanは通常、文章と同じ行の流れに入り、途中で複数行に分かれます。色を付けただけでは、一つの箱として次の行へ移るようにはなりません。

ラベルへdisplay: inline-blockを指定すると、外側からは一つの行内の箱として配置されます。残りの幅へ箱が入らなければ、次の行へ送られます。MDNのdisplayの説明で、この行内での扱いを確認できます。

ただし、箱の内部の文章まで永久に一行へ固定する指定ではありません。外側の配置と内側の文字の処理を分けることが今回の要点です。独立した分類一覧を均等に並べたいなら、gapによる一覧の間隔を使う設計が別にあります。

短いラベルと長いラベルを同じページへ置く

次をlabel-practice.htmlとして新しいフォルダへ保存し、ブラウザーで開きます。外部ファイルは不要です。一つ目は短い条件、二つ目は長い条件で、同じCSSが両方へ適用されます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ラベルの折り返し練習</title>
<style>
body { margin: 1rem; font-family: sans-serif; line-height: 1.8; }
main { max-width: 30rem; margin-inline: auto; }
.notice { border: 1px solid #777; padding: 1rem; }
.badge {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: .1em .5em;
  background: #fff0dd;
  color: #222;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
}
</style>
</head>
<body>
<main>
<h1>資料交換会（架空の練習）</h1>
<p class="notice">午後から開催します。 <span class="badge">予約不要</span></p>
<p class="notice">持ち込みの案内です。 <span class="badge">大型の資料を持ち込む方は事前に担当者へご連絡ください</span></p>
</main>
</body>
</html>

max-widthはラベルの上限を親の内容幅に合わせます。paddingと枠を含める計算はbox-sizingに任せます。短い文を広い枠で見ると一行のままですが、長い文は枠に合わせて箱の内部で折り返せます。heightを固定していないので、増えた行の分だけ高さが増えます。

文字列の途中に空白がない英字が入る場合に備え、overflow-wrapも指定しています。MDNのoverflow-wrapは、長い文字列によるあふれを防ぐ折り返しを説明しています。この指定を入れても、すべてのラベルが一文字ずつ改行されるわけではありません。

nowrapを足す前に、変えてはいけない条件を確かめる

よくある一つ目の失敗は、短いラベルが分かれないようにwhite-space: nowrapを全ラベルへ指定することです。短文はよく見えても、長い参加条件が箱の右端から飛び出します。原因は箱の上限ではなく、内部の文字の折り返しを禁止したことです。

修正はnormalへ戻し、長文の末尾まで読めることを確認することです。MDNのwhite-spaceで、nowrapとnormalの差を確認できます。overflow-wrapだけを追加しても、nowrapによる折り返し禁止を解消する方法にはなりません。

再確認では幅を狭くした上で、二つ目のラベルの「ご連絡ください」まで読みます。横へ飛び出した部分をoverflow: hiddenで隠しても、読めない問題は解決しません。短い条件なら分断せず、長い条件なら内部で折り返すという二つの期待を同時に残します。

行ごと離れて見える場合は、箱の配置を戻す

二つ目の失敗は、ラベルへdisplay: blockを付けてしまうことです。広い画面で十分な余裕があっても、説明文の次の行へラベルが移ります。文字の折り返しの失敗に見えますが、原因は箱そのものを独立したブロックに変えたことです。

修正ではinline-blockへ戻し、広い幅では文章に続き、狭い幅では必要に応じて次の行へ送られることを確認します。改行を固定するbrを足すと、画面幅に応じた判断を妨げます。まず箱のdisplayを調べ、余白を小さくする作業はその後に行ってください。

Flexboxの最小幅の記事は、親がFlexboxのときに子が縮めない問題を扱います。今回の親は通常の段落なので、そこへmin-width: 0だけを足す修正とは問題の場所が異なります。どんなレイアウトの中にいる要素かを、先に説明できるようにします。

文の一部か、独立した説明かで扱いを選ぶ

短い状態表示なら文章中のラベルに向きますが、条件が長く、読む順番も重要なら独立した段落へ移す方が分かりやすい場合があります。必須条件を小さな装飾へ押し込める必要はありません。長文の見本は耐性を調べるもので、長い説明をすべてラベルにする提案ではありません。

また、見た目をラベルにしてもspanは操作部品にはなりません。押して絞り込む機能を付けるなら、適切なbuttonと状態の設計が必要です。この練習のラベルをTabキーの停止先に増やす必要はありません。表示の判断と操作の判断を混ぜずに扱います。

短いラベルは箱ごと、長いラベルは内部で折り返すか

上のページを作り、幅320pxと768pxで比べます。次に短いラベルを長い英字の文字列へ置き換え、同じ枠の中で最後まで読めるかも試します。

• 広い幅で短いラベルは文章の続きへ置かれ、強制改行されない。
• 残り幅が足りなくなると、短いラベルは箱ごと次の行へ移る。
• 長いラベルは内部で折り返し、末尾が欠けず、ページ全体が横にはみ出さない。
• nowrapへ一時変更すると長文で問題が再現し、normalへ戻すと解消する。

この四条件を、画面幅と使った文字列と一緒に残せば完成です。レスポンシブCSSの無料レッスンに進む際も、箱の配置と箱の中の文字を分けて点検してみてください。