世界中の人々に届くWebサイトを作りたい！ そう思ったとき、真っ先にぶつかる壁が「言葉の壁」……だけじゃないんです。実は、文字の「向き」や「カタチ」という、もっと手強い壁が立ちはだかっています。
今日は、HTMLとCSSを使って、世界中のどんな言葉にも優しく寄り添える「多言語対応の土台作り」について、一緒に紐解いていきましょう。難しいことは一切なし。お茶でも飲みながら、リラックスして読んでくださいね。
—
1. 文字の「進む方向」を意識してみよう
日本語は左から右に書くのが普通ですが、世界には右から左へ書く言語（アラビア語やヘブライ語など）があったり、伝統的な日本語のように縦に並べるスタイルがあったりします。
HTMLで文章を書くとき、私たちはつい「左から右に行くもの」と決めつけてしまいがちですが、CSSにはその思い込みをほどいてくれる魔法のプロパティがあるんです。
「物理的な方向」から「論理的な方向」へ
昔は「左から右（left to right）」と直接指定していましたが、今は「論理プロパティ」という考え方が主流です。
例えば、「マージン（余白）」を指定するとき、`margin-left` と書くと「常に左側」に余白ができますよね。でも、アラビア語のように右から始まる言語だと、左に余白があるのは不自然になってしまいます。
そこで登場するのが `margin-inline-start` です。これは「その言語が書き始める側」という意味。これを使えば、言語が変わっても自動的に「よし、ここが始まりだね！」とブラウザが空気を読んで調整してくれます。賢いですよね。
—
2. 縦書きの世界へようこそ（writing-mode）
日本語の雑誌や文庫本のような「縦書き」をWebで表現したいとき、`writing-mode` というプロパティを使います。
.vertical-text {
/ 文字を縦に流す魔法の指定 /
writing-mode: vertical-rl;
/ 縦書きの時は、行の高さ（line-height）を少し広めにとると読みやすいですよ /
line-height: 1.8;
}
これだけで、`h1`や`p`がガラッと表情を変えて、和風の美しいサイトに早変わりします。ただ一つだけ注意！ 縦書きにすると、画面のスクロールが「上下」ではなく「左右」になることがあります。ユーザーが迷子にならないよう、サイト全体で使うのか、一部の要素だけにするのか、設計の段階で少しだけイメージしておくと安心ですよ。
—
3. 言語ごとに「お似合いのフォント」を纏わせよう
多言語対応で一番の悩みどころは「フォント」かもしれません。日本語のフォントをそのまま英語に使うと、なんだか垢抜けない印象になりがちですよね。
ここで大切なのが、HTMLの `lang` 属性をフル活用することです。
HTML側での宣言
この `lang` 属性があるだけで、CSSは「あ、今は英語なんだね！ じゃあこの綺麗な欧文フォントを使おう」と判断できるようになります。
CSSでのフォントスタック例
/ 日本語環境の場合 /
:lang(ja) {
font-family: “Helvetica Neue”, “Hiragino Kaku Gothic ProN”, sans-serif;
}
/ 英語環境の場合 /
:lang(en) {
font-family: “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
このように `:lang()` を使うと、条件分岐のようなことができます。自分の書いたコードが、世界中のパソコンやスマホで「一番美しく見える服」を選んで着替えてくれる……そう考えると、少しワクワクしませんか？
—
4. 最後に：完璧を目指さなくて大丈夫
多言語対応のデザイン設計は、最初から100点満点を目指す必要はありません。
まずは、「`margin-left` ではなく、論理プロパティを使ってみる」こと。そして、「HTMLに `lang` 属性を忘れないこと」。この2つを意識するだけで、あなたのWebサイトはグッとグローバルな視点を持った、懐の深いものに進化します。
もし、文字が重なったり、思った通りの向きにならなかったとしても、それは「ブラウザと対話している証拠」です。ひとつずつ、調整してあげればいいだけ。焦らず、楽しみながら構築していきましょうね。
あなたの書くコードが、国境を越えて誰かの心に届くことを、心から応援しています！
コメント