HTML/CSS

【CSS】テキストを縦書きにする方法

本記事では、通常横書きで表示されるテキストをCSSを使って縦書きにする方法について解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

テキストを縦書きにする方法

テキストを縦書きにする方法はとても簡単で、writing-modeプロパティを使います。このwriting-modeプロパティとは、テキストのレイアウトを横書きにするか縦書きにするか、フロー方向を左向きにするか右向きにするかを決定します。

writing-modeプロパティに設定できる値は以下のとおりです。

設定値一覧表
horizontal-tb左から右へ水平
vertical-rl上から下へ垂直
次の行は、前の行の右に配置
vertical-lr上から下へ垂直
次の行は、前の行の左に配置
sideways-rl下から上へ垂直
垂直方向に並べられる書体を含むすべての文字を右へ横倒し
vertical-rl上から下へ垂直
垂直方向に並べられる書体を含むすべての文字を左へ横倒し

通常の縦書きの設定をしたいので、値は「vertical-lr」を使用します。

それでは、実際に縦書きのテキストを作成していきます。

<div>
  <p>
    名前:田中 太郎<br>
    年齢:25歳<br>
    趣味:映画鑑賞<br>
    職業:会社員
  </p>
</div>
div{
  background:#000;
  color:#fff;
  padding:50px;
}

p{
  writing-mode: vertical-rl;
}

表示を確認してみると、縦書きになっていることが確認できましたが英数字が横になったままです。英数字も縦書きにしたい場合は「text-orientation」プロパティ使います。text-orientationプロパティは使える場所が限られており、writing-modeがhorizontal-tb以外の場合でのみ効果があります。

text-orientationプロパティに設定できる値は以下のとおりです。

設定値一覧表
mixed横書き用の文字を右に90°回転させ、縦書き用の文字は自然に配置
upright横書き用の文字を、縦書き用の字形と同様に自然に(正立で)配置
sideways全行を横書きで書いて90°回転したように配置

横書きになっている英数字のみを縦書きと同じように表示させたいので、値は「upright」を使用します。

p{
  text-orientation:upright;
}

表示を確認してみると、英数字が縦書きになっていることが確認できました。

テキストの位置を決める

水平方向

初期状態では、テキストが左側に寄っているためこれを中央寄せや右寄せしたい場合はどのように設定するのが正解でしょうか?通常であれば、text-alignプロパティを使いますが縦書きの状態では縦横の位置が逆転しているため、縦方向の位置を指定することになってしまいます。

このような場合は、text-alignプロパティではなくvertical-alignプロパティを使います。

vertical-alignの値
top右寄せ
middle中央寄せ
bottom左寄せ

垂直方向

水平方向の位置移動で、縦書きの状態では縦横の位置が逆転しているとお話ししました。つまり、text-alignプロパティが水平方向ではなく垂直方向の位置を決めるプロパティになります。

text-alignの値
left上寄せ
center中央寄せ
right下寄せ

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村