【実務・中級編】writing-modeとインライン要素の配置 – HTML実践ガイド

今日は、インライン要素が縦書き環境下でブラウザ内部でどう扱われ、我々エンジニアがどう「論理的な」制御を行うべきか、その勘所を紐解いていこう。

—

なぜインライン要素は「横」から「縦」へ回転するのか

まず前提として、ブラウザが `writing-mode` をどう解釈しているかを理解する必要がある。

CSSのレイアウトエンジンは、かつて「物理的（Physical）」な指定（`width`, `height`, `margin-top` など）が支配的だった。しかし、縦書きが登場したことで、Webは「論理的（Logical）」な指定へとシフトした。

`vertical-rl` が適用されると、ブラウザは座標軸を回転させる。

• Inline-axis (インライン軸): 文字が流れる方向（上から下へ）
• Block-axis (ブロック軸): 改行される方向（右から左へ）

実践：縦書き環境で「崩れない」インライン装飾

現場でよくあるミスは、`display: inline-block` を多用しすぎることだ。インライン要素を無理やりブロック化すると、縦書きの自然な文字の流れ（グリフの並び）を阻害する。

まずは、最も標準的でクリーンな実装パターンを見てほしい。

/ 縦書きのコンテナ設定 /
.vertical-container {
writing-mode: vertical-rl;
text-orientation: upright; / 数字や英字を縦書きにする場合は必須 /
font-family: serif;
line-height: 2;
}

/ インライン装飾のベストプラクティス /
.vertical-container strong {
/ 物理的な margin を避け、padding で調整する /
padding: 0 0.2em;

/ 縦書きでの強調は下線（text-underline-offset等）が美しい /
text-decoration: underline wavy #e67e22;
text-underline-offset: 4px;
}

/ aタグの挙動を安定させる /
.vertical-container a {
/ インラインのまま、リンク領域を確保する /
display: inline;
color: #3498db;
text-decoration: none;
border-bottom: 1px solid currentColor;
}