「縦書き」のWebサイト、作ってみませんか？`text-orientation`で文字の向きを魔法のように操る方法
Webサイトといえば、左から右へ読む「横書き」が当たり前ですよね。でも、雑誌の特集や日本的な情緒を表現したいとき、ふと「縦書き」のWebサイトに憧れることはありませんか？
実は、CSSを使えば縦書きは驚くほど簡単に実現できます。ただ……いざ縦書きにしてみると、「あれ？ アルファベットや数字が横向きのままで、なんだか読みづらいぞ？」と壁にぶつかるはずです。
今日は、そんな縦書きレイアウトの「最後の仕上げ」とも言える、`text-orientation`プロパティについてお話しします。難しそうな名前ですが、身の回りの例えで紐解いていけば、きっと大丈夫ですよ！
—
縦書きの「迷子」になりやすい英数字たち
まず、`writing-mode: vertical-rl;` というCSSを使うと、日本語の文章は縦書きになります。しかし、そこに英数字を混ぜると、まるで「行列の途中で一人だけ後ろを向いて立っている人」のような違和感が生まれます。
なぜなら、ブラウザにとって英数字は「横書きされるのがデフォルト（標準）」だからです。
ここで登場するのが、`text-orientation`というプロパティです。これは、縦書きの中で「英数字をどう向き合わせるか」を指示する、いわば「整列の号令」のようなものです。
—
`text-orientation` でできること：3つの基本モード
このプロパティにはいくつか設定値がありますが、現場でよく使うのは主にこの3つです。
1. `mixed`（デフォルト：自然な混在）
名前の通り「混ぜこぜ」です。日本語は縦向き、英数字は横向きという、まさに一般的な日本の書籍と同じスタイル。迷ったらまずはこれです。
2. `upright`（直立：すべて縦向き）
すべての文字を「縦書き用の文字」として扱います。アルファベットも「一文字ずつ、お辞儀をせずにまっすぐ立たせる」イメージです。個性的で力強い印象になります。
3. `sideways`（横倒し：すべて横向き）
文字を物理的に90度回転させて配置します。昔のガラケーの画面や、看板などで見かける「首を傾げて読む」スタイルですね。
—
さっそく試してみましょう！
実際にコードを書いてみると、その違いが一目瞭然です。お使いのエディタにコピーして、ブラウザで眺めてみてくださいね。
Web Design 2024
CSSは本当に面白いですね。
—
現場で役立つ「ちょっとしたコツ」
実務で縦書きを扱う際、初心者の皆さんがよく悩むポイントが一つあります。それは「数字の縦中横（たてちゅうよこ）」です。
日付や短い数字（「12日」「No.1」など）は、縦書きの中に横書きで収まっていないと、非常に読みづらいですよね。これを解決するには、`text-orientation`ではなく、`text-combine-upright: all;` という別の魔法を使います。
.date {
/ 数字を1文字分のスペースにギュッと押し込める魔法 /
text-combine-upright: all;
}
「縦書きの中で英数字が浮いてしまう……」と悩んだときは、まずは `text-orientation` で全体の向きを整え、特定の数字だけ `text-combine-upright` で調整する。この二段構えを覚えておくだけで、あなたのWebサイトのクオリティはグッと上がります！
—
最後に：失敗しても大丈夫です！
Web制作を始めたばかりの頃は、意図しない方向に文字が向いてしまうと焦ってしまいますよね。でも、安心してください。CSSのレイアウトは「パズルのピースを置く」ようなもの。少しずつ設定を変えて、自分の理想の形を探す過程こそが、一番の勉強になります。
「英数字をまっすぐ立たせたいな」と思ったら、今日の `text-orientation` を思い出してみてください。あなたのWebサイトに、素敵な縦書きの風が吹き込みますように！
それでは、また次の記事でお会いしましょう！
コメント