writing-mode: vertical-rlで中央寄せする方法（Firefox対応）

writing-mode: vertical-rlで中央寄せする方法

縦書きレイアウトを作成する際に使用されるwriting-mode: vertical-rl;ですが、特にFirefoxで要素を中央に配置する方法には注意が必要です。通常のmargin-left: auto;やmargin-right: auto;は縦書きでは意図通りに動作しないため、別の方法を使用する必要があります。

1. なぜmargin: auto;では中央寄せできないのか？

縦書きのwriting-mode: vertical-rl;を使うと、通常の横書きのようにmargin-left: auto;やmargin-right: auto;が効かないことがあります。これは、縦書きの場合にmarginの自動調整が期待通りに動作しないためです。特にFirefoxではこの問題が顕著に現れます。

2. 対応方法

縦書きのテキストを中央に配置するための推奨される方法は、次の二つです。

方法1: display: inline-block;とtext-align: center;を使用する

親要素にtext-align: center;を設定し、子要素にdisplay: inline-block;を適用します。これにより、テキストが中央に配置されます。

.parent {
    text-align: center; /* 親要素の中央寄せ */
}

.child {
    writing-mode: vertical-rl;
    display: inline-block; /* 子要素の表示をブロック化 */
}

方法2: Flexboxを使用する

Flexboxを使って要素を中央に配置する方法もあります。Flexboxは縦書きのレイアウトにも柔軟に対応できるため、縦書きコンテンツを中央に配置する際には非常に便利です。

.parent {
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
}

.child {
    writing-mode: vertical-rl;
}

この方法では、親要素がFlexコンテナとして機能し、子要素を中央に配置するため、縦書きのテキストも意図した位置に表示されます。

3. 使用例と推奨場面

Flexboxはレスポンシブデザインや複雑なレイアウトでの中央寄せに強力ですが、シンプルなテキスト中央寄せではtext-align: center;とinline-blockの組み合わせが簡単で効果的です。状況に応じて使い分けると良いでしょう。

まとめ

縦書きモードのwriting-mode: vertical-rl;でテキストを中央寄せする際には、margin: auto;ではなくinline-blockとtext-align: center;、またはFlexboxを使用するのが効果的です。これにより、ブラウザ間の互換性を保ちつつ、期待通りのレイアウトを実現できます。