こんにちは！フロントエンドの世界へようこそ。
Web制作を始めたばかりの頃、「縦書き」という壁にぶつかって頭を抱えたことはありませんか？「普通の文章ならスイスイ書けるのに、いざ縦書きにしようとすると、なんだか文字が横に倒れたり、意図しない場所で改行されたり……」なんて経験、きっと誰にでもありますよね。
大丈夫です。実はこれ、ブラウザという「職人」が、縦書きの世界をどう解釈しているかを知るだけで、驚くほどスッキリ解決できるんです。今日は、CSSの魔法 `writing-mode` と、仲良しのインライン要素たちが織りなす「縦書きのルール」を、一緒にひも解いていきましょう。
—
縦書きは「本をめくる」イメージで捉えよう
まずは、`writing-mode: vertical-rl;` という呪文から。これは「右から左へ（right-to-left）縦に（vertical）流すよ」という命令です。
想像してみてください。あなたは今、和紙の巻物を広げています。文字は上から下へ書かれ、一行書き終わると、次の行は「左側」に現れますよね？ この「右から左へ行が移動する」という感覚こそが、`vertical-rl` の正体です。
インライン要素は「文字の仲間たち」
`` や ``、`` といったインライン要素は、いわば「文章という川」に浮かぶ小さなボートのようなもの。横書きの時は横に並びますが、縦書きにすると、彼らは「縦の列」の一部として、ごく自然に振る舞うようになります。
—
つまずきポイント：なぜか文字が横を向く？
よくある「あるある」が、`code` タグや特定の数字、あるいは英単語が、縦書きの中で「横に寝そべってしまう」現象です。
これ、実はブラウザが「英語やコードは横書きがデフォだよね？」と気を利かせてくれているからなんです。でも、レイアウトを統一したい時は困ってしまいますよね。そんな時は、`text-combine-upright` という便利なプロパティを思い出してください。
実践！縦書きレイアウトのコード例
まずは、こちらのコードを眺めてみてください。
/ 縦書きの基本設定 /
.vertical-container {
writing-mode: vertical-rl; / 右から左へ流れる縦書き /
height: 300px; / 高さを指定して、ここから溢れたら次へ行くように /
border: 1px solid #ccc;
padding: 20px;
}
/ 数字を一行に収める魔法 /
.date-highlight {
text-combine-upright: all; / 2024などの数字を、文字として横倒しにせず一行にギュッと収める /
}
—
インライン要素を「飾る」時のコツ
縦書きの時、`` で強調したり、`` でリンクを貼ったりすると、時々「あれ、余白が変だな？」と感じることがあります。
ここでのポイントは「縦書きになっても、インライン要素の『上下左右』は、文章の進行方向に追従する」ということです。
- 横書きの時の「上下」 → 縦書きでは「左右」に変換される
- 横書きの時の「左右」 → 縦書きでは「上下」に変換される
最初は少し混乱しますよね。でも、「縦書きになった瞬間、文字の流れる方向が90度回転したんだな」と考えてみてください。そうすると、`margin` や `padding` を設定する時も、「あ、今は縦方向の隙間を作りたいから、`margin-top` ではなく `margin-right` をいじればいいんだ！」と、パズルのピースがハマるように理解できるようになります。
—
最後に：完璧を目指さなくて大丈夫
Webの世界は、日々進化しています。CSSのプロパティも増えていますが、すべてを暗記する必要はありません。「縦書きにする時は、ブラウザが少しだけ解釈を変えるんだな」ということを、心の片隅に置いておくだけで十分です。
もし表示が崩れてしまったら、「ブラウザくん、今はどんな風に解釈しているのかな？」と、要素を一つずつ外して確かめてみてください。その泥臭い試行錯誤こそが、あなたを一流のフロントエンドエンジニアに育ててくれる一番の近道ですから。
これからも、迷ったらまたここに戻ってきてくださいね。一緒に一つずつ、紐解いていきましょう！
コメント