「横書きが世界標準」という思い込みを捨てよ：多言語対応のHTML/CSS設計、その泥臭い現場の話

フロントエンドの現場で「多言語対応」と聞くと、多くのエンジニアはまず「翻訳ファイルをどう管理するか」というJSONの設計に頭を悩ませます。しかし、真のプロフェッショナルが最初にチェックするのはそこではありません。

「日本語の感覚だけで組んだUIは、他の言語に切り替わった瞬間に崩壊する」

これが、国際化対応（i18n）における最初の洗礼です。今回は、Webサイトの骨格であるテキストコンテンツ（`p`や`h1`）を、いかにして「言語の変化に強い構造」にするか。その技術的勘所を共有します。

—

1. 「横書き」という固定観念を捨てる：`writing-mode`の正体

日本語は伝統的に縦書き文化ですが、Webは長らく横書きが支配してきました。しかし、現代のブラウザは`writing-mode`プロパティにより、レイアウトを垂直方向に転換できます。

ここで重要なのは、「marginやpaddingを物理的な方向（top/left/right/bottom）で指定しない」ことです。

例えば、縦書きにした途端に `margin-bottom` が「行の間隔」ではなく「文字の列の並び」になってしまい、レイアウトが壊れます。これに対処するために、CSS論理プロパティ（Logical Properties）を採用してください。

/ 良い例：論理プロパティを使う /
.text-block {
/ margin-bottom の代わりに margin-block-end を使う /
/ これなら横書きでも縦書きでも、常に「進行方向の終わり」に余白が入る /
margin-block-end: 1.5rem;

/ 縦書きへの切り替え /
writing-mode: vertical-rl;

/ テキストの方向性を自動調整 /
text-orientation: mixed;
}

ブラウザのレンダリングエンジンは、`margin-block-end` を見たとき、現在の `writing-mode` を参照して「どこに余白を置くべきか」を動的に再計算します。これを物理プロパティで書くと、CSSが分岐地獄に陥ります。

—

2. フォントスタックの「泥臭い」現実

多言語対応において、「フォントサイズを大きくすれば解決する」という甘い考えは捨てましょう。最大の敵は「レンダリングの重さ」と「文字化け（豆腐化）」です。

実務レベルで推奨されるのは、OS標準フォントを最大限活用し、必要な言語にだけWebフォントを当てる「ハイブリッド・フォントスタック」です。

:root {
/
OSのシステムフォントを優先し、意図しないWebフォントの読み込みを阻止。
日本語、英語、中国語（簡体字/繁体字）を考慮したスタック。
/
–font-family-base:
system-ui,
-apple-system,
“Segoe UI”,
“Roboto”,
“Helvetica Neue”,
“Noto Sans JP”,
“Hiragino Kaku Gothic ProN”,
“Microsoft YaHei”,
sans-serif;
}

body {
font-family: var(–font-family-base);
/ 言語ごとの調整をHTMLのlang属性で受ける /
&:lang(zh) {
font-family: “Microsoft YaHei”, sans-serif;
}
}

ここでのポイントは、`lang`属性をCSSのセレクタとして活用することです。HTML側で `` や `` と正しく記述されていれば、CSS側で言語ごとに最適なフォントへ切り替えることができます。

—

3. 実践：マルチリンガル対応のコンポーネント設計

最後に、現場でそのまま使える、構造的に堅牢な`h1`と`p`の設計コードを載せておきます。

.c-heading {
/ 見出しの論理的な余白 /
margin-block: 2rem 1rem;

/ 多言語対応のキモ：禁則処理をブラウザに任せる /
line-break: strict;
word-break: break-word;

/ 言語に応じたフォントウェイトの調整 /
font-weight: 700;
}

.c-text {
/ 読みやすさを維持する行間 /
line-height: 1.8;

/ 日本語以外の言語でも適正な折り返しを保証 /
overflow-wrap: break-word;
}

/ 縦書き対応が必要な場合のトグル /
.is-vertical {
writing-mode: vertical-rl;
text-orientation: upright;
}

最後に：エンジニアとしての心構え

多言語対応とは、単なる「翻訳」ではなく、「文化の受け皿を作る」作業です。

横書きの英語と、縦書きを許容する日本語、文字幅の広い中国語。これらすべてを同じCSSで美しく表示させるには、ブラウザの「論理的解釈」を信じ、物理的な数値指定を極力減らす勇気が必要です。

「これで動くからいいや」と妥協せず、ブラウザが裏でどう計算しているのかに思いを馳せる。その小さな積み重ねが、数年後に大きな技術的負債を防ぐ鍵となります。ぜひ、明日からの実装で意識してみてください。質問があれば、またいつでもどうぞ。