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

【メイン画像】CSSを使ってテキストを縦方向に表示する方法

「transform」や「writing-mode」プロパティを使って、通常横書きになってしまうテキストを縦方向に回転させたり、小説や新聞のように縦書きにしたりする方法を紹介します。

自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例

横書き

Hello Hello

こんにちは

何もスタイルを適用していない、通常のテキスト表示です。

縦方向に回転(1)

Hello Hello

こんにちは

テキストを縦方向に-90°回転させた表示です。(コードはこちら

縦方向に回転(2)

Hello Hello

こんにちは

テキストを縦方向に90°回転させた表示です。(コードはこちら

縦書き(右 → 左)

Hello Hello

こんにちは

テキストを縦書きにし、右から左へ読ませる表示です。(コードはこちら

縦書き(左 → 右)

Hello Hello

こんにちは

テキストを縦書きにし、左から右へ読ませる表示です。(コードはこちら

縦書き(右 → 左)
英字を縦方向に表示

Hello Hello

こんにちは

テキストを縦書きにし、右から左へ読ませる表示です。英字も縦方向に表示されます。(コードはこちら

キーとなるCSSプロパティ

本記事では「transform」と「writing-mode」というCSSプロパティを使って実装しています。

要素を回転させるには「transform: rotate(数値deg);」を使う

要素を回転させるには、CSSプロパティの「transform: rotate(数値deg);」を使います。
以下のように記述することで、特定の要素を回転させることができます。

/* div要素を、要素の中心を起点に90°回転させる */

div {
  transform: rotate(90deg);
}

数値には「-90°」のようにマイナスを指定することもできます。

また、回転の起点はデフォルトでは要素の中心ですが、「transform-origin」プロパティを合わせて設定することで起点を変更できます。

/* div要素を、要素の左上を起点に-90°回転させる */

div {
  transform: rotate(-90deg);
  transform-origin: top left;
}

「transform」プロパティを使うと以下のようなアニメーションも実装できるようになります。興味のある方は合わせてご覧ください。

テキストを縦書きにするには「writing-mode」を使う

新聞や小説のようにテキストを縦書きにするには、CSSプロパティの「writing-mode」を使います。
以下のように記述することで、テキストを縦書きにします。

/* 縦書きテキストを右から左へ表示 */
p {
  writing-mode: vertical-rl;
}

/* 縦書きテキストを左から右へ表示 */
p {
  writing-mode: vertical-lr;
}

/* 縦書きテキストを左から右へ表示 かつ 英字を縦方向に表示 */
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

デフォルトで英字は横向きに表示されますが、「text-orientation: upright;」を指定すると英字も縦方向に表示されます。

HTML / CSS コード

各実装について、HTMLとCSSコードを以下に公開しています。(HTMLはすべて同じです。)

縦方向に回転(1)

Hello Hello

こんにちは

テキストを縦方向に-90°回転させた表示です。

<div>
  <p>Hello Hello</p>
  <p>こんにちは</p>
</div>
div {
  width: 150px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  font-size: 20px;
  transform: rotate(-90deg);
}

縦方向に回転(2)

Hello Hello

こんにちは

テキストを縦書きにし、右から左へ読ませる表示です。(英字は横表示)

<div>
  <p>Hello Hello</p>
  <p>こんにちは</p>
</div>
div {
  width: 150px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  line-height: 60px;
  font-weight: 600;
  font-size: 20px;
  transform: rotate(90deg);
}

縦書き(右 → 左)

Hello Hello

こんにちは

テキストを縦書きにし、右から左へ読ませる表示です。

<div>
  <p>Hello Hello</p>
  <p>こんにちは</p>
</div>
div {
  width: 150px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  line-height: 75px;
  font-weight: 600;
  font-size: 20px;
  writing-mode: vertical-rl;
}

縦書き(左 → 右)

Hello Hello

こんにちは

テキストを縦書きにし、左から右へ読ませる表示です。

<div>
  <p>Hello Hello</p>
  <p>こんにちは</p>
</div>
div {
  width: 150px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  line-height: 75px;
  font-weight: 600;
  font-size: 20px;
  writing-mode: vertical-lr;
}

縦書き(右 → 左)英字を縦方向に表示

Hello Hello

こんにちは

テキストを縦書きにし、左から右へ読ませる表示です。英字も縦方向に表示されます。

<div>
  <p>Hello Hello</p>
  <p>こんにちは</p>
</div>
div {
  width: 150px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  line-height: 75px;
  font-weight: 600;
  font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

まとめ

以上、文字を縦方向に表示させる方法をいくつかご紹介しました。

ホームページのサイドにSNSアイコンやコピーライトを表示させたり、グラフや表などの左右にキャプションや軸名を表示させたりする場合に、テキストを縦方向に表示させられるとスッキリして見やすくなりますよね。

ぜひ、活用してみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次