縦書き文字を上下左右の中央にCSSのみで配置する方法

和風ホテルや割烹料理店などの公式サイトで「縦書き文字」を上品に使っているのをよく見かけます。今回の記事はピンポイントで「縦書き文字を画面や親要素の中央に配置する方法」をご紹介します。

左右の中央に配置する方法を解説しているサイトはいくつかありますが、
CSSのみで上下左右の中央寄せにするにはどうしたらいいの？を解決します。

▼やりたいことはこれです！

「ブラウザ画面の中央配置」や「親要素に対する中央配置」を実現します。

縦書きにするにはwriting-modeプロパティを指定する

サイト内の文章をCSSのみで縦書きにするには、writing-modeプロパティを指定します。

writing-modeプロパティは、テキストを「縦書きにするか横書きにするか」や複数行のテキストを「左から右へ改行するか右から左へ改行するか」を指定できます。

結論から言ってしまえば縦書きにするには「縦書きにしたい要素」か「親要素」に「writing-mode: vertical-lr;」を指定するだけです！

ただし、「writing-mode: vertical-lr;」だけでは、要素が縦書きになるだけなので、左右の中央配置、上下の中央配置のCSSを追記する必要があります。

上のサンプルでは、子要素（.message pタグ）に対して「writing-mode: vertical-lr;」を指定しました。そして「display: inline-block;」も追記します。

次に親要素（.message）に対して「text-align: center;」と「display: flex;」と「justify-content: center;」を追記します。backgroundとheightはサンプル上の設定ですので、任意で調整してください。

デモサンプルを用意しましたのでご確認ください。

デモサンプル

 

writing-modeプロパティの説明も以下に記載しておきますが、詳細は別の記事でまとめたいと思います。補足程度に確認してみてください。

writing-modeプロパティで指定できる値

値	仕様
horizontal-tb（デフォルト）	文字は左から右へ表示され、次の行は下に配置されます。
vertical-lr	文字は上から下へ表示され、次の行は右側に配置されます。
vertical-rl	文字は上から下へ表示され、次の行は左側に配置されます。
sideways-rl	文字は下から上へ表示され、垂直方向に並べられる書体を含むすべての文字を右へ横倒しにします。
sideways-lr	文字は上から下へ表示され、垂直方向に並べられる書体を含むすべての文字を左へ横倒しにします。

writing-modeプロパティ｜CSS｜MDN