日本語を読みやすくするCSS｜自動余白・改行・文字詰めの使い分け

日本語の文章が窮屈に見える、見出しが不自然な場所で折れる。その調整には、英数字との間の余白、文節での折り返し、句読点の禁則、文字詰めを分けて考えると、目的に合ったCSSを選びやすくなります。

例えば、和文と英字の境界を整えるなら text-autospace、見出しの切れ目を調整したいなら word-break: auto-phrase が候補です。ただし、すべての文章に同じ指定を入れると、ボタンが折れたり、長い本文の行末がばらついたりする可能性があります。まず実際の原稿と表示幅で比較しましょう。

この記事では、Xで共有された日本語CSSの話題を入り口に、独自の検証原稿で表示を比較しました。技術の仕様と、サイト制作で採用するかどうかの判断を分けて解説します。

Xで共有された4つのCSSは、何を変えるのか

きっかけは、2026年10月12日に池田泰延氏が公開した日本語表示のCSSに関する投稿です。添付画像では、自動余白・文節での折り返し・厳密な禁則処理・OpenTypeによる文字詰めの4つが紹介されています。10月18日の確認時点で710件のいいねと700件のブックマークが表示されていました。これは当該投稿への反応であり、検索需要の数値を示すものではありません。

また、別の利用者による引用投稿では、画面幅によって折り返し結果の確認が必要になるという指摘もありました。ここで紹介するCSSが一斉に今週登場したわけではありません。文節での折り返しは、Chromeの2023年の国際化機能の解説でも扱われています。

この表は4つの指定を一括で導入するためのセットではなく、調整対象を選ぶための整理です。

独自比較：同じ原稿と幅で、一つずつ変えてみる

比較用に「Web制作でAIを活用」と「必要な情報を迷わず見つけられる企業サイトをつくります。」という原稿を作成しました。Xの画像や他サイトの作例は転用していません。各比較では、幅やフォントをそろえ、対象のCSSだけを変更しています。

英数字との余白は、文字サイズ30px・枠幅300pxで no-autospace と normal を比較しました。「Web」と「制作」、「AI」と前後の日本語の間に違いが見られます。原稿中に空白文字を足さず、表示上の余白を変えた例です。

折り返しは文字サイズ24px・行高1.6・枠幅300pxで比較しました。通常の指定では「見つけ／られる」「つくり／ます。」と行をまたいだのに対し、auto-phrase では、次の区切りになりました。

どちらも3行ですが、各行に入る言葉が変わりました。今回の例では語の途中での分断が減る一方、1行目の右側の余白が増えています。どちらを採用するかは、見出しとしてのまとまりや周囲の配置を含めて判断します。これは1環境の描画比較であり、読解速度・問い合わせ数・検索順位を測った実験ではありません。

英数字との余白はtext-autospaceで検討する

MDNのtext-autospace解説では、CJK文字とそれ以外の文字の間隔を扱います。一方、letter-spacing は文字同士の間隔を調整する指定です。「英数字の境界だけ少し空けたい」という相談に、文章全体の字間を広げる対応が合うとは限りません。

採用前には、会社名、製品名、日付、単位の付いた数字など、サイトに出る表記を並べて確認します。原稿に手入力の半角スペースがある場合も、そのままの原稿で試してください。今回使った normal を、既存の空白をすべて正規化する指定として扱うことはできません。

公開されている導入例として、NTT docomo Business Engineers’ Blogでは、本文の段落やリストを対象にし、コードや見出しなどを対象外にした方針が説明されています。他社の実施範囲は参考になりますが、自社サイトも同じ対象にすればよいとは限りません。短いラベルと長文の記事では、確保できる幅も用途も違うためです。

auto-phraseとline-breakは役割が違う

word-breakのauto-phraseは、言語に応じた分析を使って折り返し位置を扱います。Chromeの解説では日本語の lang="ja" を設定する条件も示されています。CSSを足す前に、ページや対象部分の言語指定を確認しましょう。

一方、line-break: strict は、主にCJKの句読点や記号などの改行規則を厳密にする指定です。文の意味を読んで希望する場所に折る機能とは区別します。「句読点の位置」と「言葉のまとまり」のどちらが問題なのかを先に確認すると、試す指定を絞れます。

特に短い見出しでは、1文字の変更で行数やカードの高さが変わる場合があります。採用候補の見出しだけでなく、長い見出し、英語の商品名を含む見出しも並べて確認してください。未対応ブラウザや自動処理が期待通りにならない場合にも読める、通常の折り返しを用意することが大切です。

長いURLや途切れない識別子のはみ出しには、overflow-wrapのような別の検討が必要です。自動で文節を判断することと、長い文字列を枠内に収めることを一つの問題として扱わないようにします。

文字詰めのpaltは、採用するフォントで確認する

font-feature-settings はOpenTypeの機能を指定するCSSです。OpenTypeのpaltの定義では、全角幅向けの字形について、個々の字形に応じた送り幅を利用する機能として説明されています。文字間を一律にマイナス方向へ調整する方法とは仕組みが違います。

そのため、"palt" 1 を書くだけで、すべてのフォントが同じように詰まると考えないでください。フォントにその機能があるかを確認し、本文と見出しを分けて比較します。書体が切り替わったときの行数や、同じ幅に置いたボタンの収まりも確認対象です。

MDNの解説も、利用できる機能がフォントに依存する点を示しています。今回の独自画像は余白と改行だけを比較し、paltを変数にしていません。画像から文字詰めの効果まで読み取ることはできません。

サイトへ入れる前に、対象と確認条件を決める

次の表は、仕様と今回の比較から作成した導入判断用のチェック表です。既存の制作案件の成果や、全サイト共通の推奨設定を示すものではありません。

例えば、本文の自動余白と見出しの折り返しを別々のクラスで試すなら、次のように適用範囲を限定できます。言語はHTML側で日本語と指定し、この例をそのままサイト全体へ適用せず、検証用のページから始めます。

/* HTML側：対象の言語を lang="ja" とする */
.article-copy { word-break: normal; }
.page-title { word-break: normal; }

@supports (text-autospace: normal) {
  .article-copy { text-autospace: normal; }
}
@supports (word-break: auto-phrase) {
  .page-title { word-break: auto-phrase; }
}

@supportsは、その指定をブラウザが扱えるかを条件にする仕組みです。表示が必ず望み通りになるという判定ではありません。対応状況はプロパティの値ごとに資料を確認し、利用者が使うブラウザでも実際の原稿を表示してください。

確認記録には、原稿・書体・文字サイズ・枠幅・ブラウザ・変更したCSSを残します。同時に何項目も変えると差の理由が分かりにくいため、まず一つずつ比較し、最後に組み合わせた表示を確認します。スマートフォンの縦横、文字を拡大した状態、原稿を差し替えた状態まで確認できると、更新時の判断にも使えます。

画面全体の課題から見直す場合は、親記事のWebサイトのUI改善の進め方をご覧ください。表示環境の確認はスマートフォンでのサイト確認項目、読める・使える状態の点検はWebアクセシビリティの確認方法にも整理しています。

CSSの相談を依頼するときは、「文字をきれいにしたい」だけでなく、対象ページ、困っている文言、気になる表示幅を伝えると確認条件を共有しやすくなります。SEVEN PEBBLESへのWebサイト制作・改善のご相談でも、まず現在の表示と課題をお知らせください。

確認日：2026年10月18日。出典は各説明に付記しています。ブラウザの対応状況は変化するため、実装時には参照先と対象環境を再確認してください。