LINEで現役エンジニアに直接質問してみよう!登録無料

CSSで縦書き文字を左右中央に配置(中央寄せ)する方法

横書き文字を縦書きにする基礎

まずは、縦書き文字にする方法(前提)を解説して、縦書きにする方法を解説します。

まず、下記のテキストを見てください。

<div class="text">
  <p>吾輩わがはいは猫である。名前はまだ無い。<p>
<p>どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。</p>
<p>この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗むやみに眼が廻る。胸が悪くなる。到底とうてい助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。</p>
</div>

これを普通にWebブラウザで表示すると、下記のように横テキストになってしまいます。

このようなテキストを縦書きに変えるにはwriting-modeというCSSを使います。縦書きには、右上から書き始める文章と左上から書き始める文章がありますよね?もちろん、CSSにもこれらのどちらとも選択することが出来ます。

  • 右上始まりの縦書き: writing-mode: vertical-rl;
  • 左上始まりの縦書き: writing-mode: vertical-lr;

例えば、右上始まりの縦書きのwriting-mode: vertical-rl;を使った場合、下記のように文章が縦書きにないります。

このままでは1行の長すぎるので、複数に分けたりも出来ます。column-count: 2;を使えば、2段組みで書くことも出来ます。

縦書き文字を左右中央に配置する方法

さて、いよいよ本題の「縦書き文字を左右中央に配置する方法」を紹介します。

中央に配置する方法は、3つあります。

  • display: flex; + align-items: center;を使う(推奨)
  • 親要素の幅を決める + margin: 0 auto;を使う
  • position:absolute;+transform:translate(-50%, -50%);で中央に配置する

順番に解説していきますね!

display: flex; + align-items: center;を使う

この方法は、中央配置したい要素に対してdisplay: flex; + align-items: center;を設定します。この方法は一番簡単でオススメです。

この方法だと、

  • 余計なHTMLタグがいらない
  • テキスト量が増えても量合わせて自動調整
  • 親要素と子要素の幅が同じになる

といったメリットが有り、周りに及ぼす影響を少なく出来ます。

早速コードを見ていきましょう

<div ca="text">
  <p>吾輩わがはいは猫である。名前はまだ無い。<p>
</div>
.text {
  display: flex;
  align-items: center;
}

テキストに配置したいテキスト全体を<div>で囲み、それにdisplay: flex; + align-items: center;を設定します。

なぜこのコードが機能するのか?

flexboxを使っている人にとっては違和感を覚えるコードだと思います。なぜなら、align-itemsは縦方向の位置を制御するプロパティだからです。

実は、writing-modeをつかって縦書きにすると、横方向と縦方向で指定できるプロパティが入れ替わります。ですので、text-alignでも横方向ではなく縦方向の位置を揃えるプロパティに変化しています。

ですので、flexboxを使った時、テキストの横方向の位置を揃えるにはalign-items: center;を使うんです。

親要素の幅を決める + margin: 0 auto;を使う

もう1つの方法は、中央配置したい要素の外側に固定幅の親要素を作りmargin: 0 auto;で中央配置する方法です。

この方法もテキスト量合わせて自動調整してくれるので、便利でおすすめです。

まずはコードを書きます。

.box {
  width: 200px;
}
.text {
  writing-mode: vertical-rl;
  margin: 0 auto;
}
<div class="box">
  <div class="text">
    <p>吾輩わがはいは猫である。名前はまだ無い。</p>
  </div>
</div>

このように、.textがblock要素なので、それ全体を囲む親要素でmargin: 0 auto;で左右の余白を均等にとると、中央配置できるという方法です。

position:absolute;+transform:translate(-50%, -50%);で中央に配置する

この方法はおすすめできません。可能な限り使わないほうがいいです。

なぜなら、内部要素のテキスト量が多くなると、CSSでwidthheightの値を手動調節しないといけないからです。

使い勝手は、上記の2種類より格段に劣りますが、一応手法としては有るので紹介します。

まずはコードを紹介します。

<div class="box">
  <div class="text">
    <p>吾輩わがはいは猫である。名前はまだ無い。</p>
  </div>
</div>
.box {
  position: relative;
  width: 200px;
  height: 320px;
}
.text {
  position: absolute;
  writing-mode: vertical-rl;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,
  -50%);
}

親要素で背景として幅と高さを設定します。更に、その左端から親要素の左から50%、上から50%の位置に配置します。それでは要素が移動しすぎてしまうので、子要素の縦と横幅の半分を元に戻します。

このように、複雑な設定を得て中央配置を実現しているので、変更に弱く簡単にデザインが壊れます。固定幅と固定高使えませんし、テキストの量が増減する環境では殆ど役に立たないので、この方法は本当の最終手段としましょう。

まとめ

  • 縦書きをするにはwriting-mode: vertical-rl;をCSSで設定する
  • 縦書きの中央配置をするには、flexboxのalign-items: center;を使おう

以上、縦書きのテキストを左右中央配置する方法を、アキ(@hackablejp)が解説しました!

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。