transformやwriting-modeプロパティを使って、通常横書きになってしまうテキストを縦方向に回転させたり、小説や新聞のように縦書きにしたりする方法を紹介します。
実装例
横書き
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アイコンやコピーライトを表示させたり、グラフや表などの左右にキャプションや軸名を表示させたりする場合に、テキストを縦方向に表示させられるとスッキリして見やすくなりますよね。
ぜひ、活用してみてください！
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
