Written by Kasumi

html・CSSでテキスト文章を縦書きにする方法

サイト内である一部分のテキスト文章を縦書きにしたい。

縦書きにして、ラインを中央寄せにしたい。

このような悩みを解決致します。

本記事ではcssのプロパティを使って、テキスト文章を縦書きにする方法について解説します。

サンプルコード

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

サンプルコードになります。

詳細は以下の通りです。

まずは縦書きにしたいpタグなどをdiv要素で囲みます。

div要素に以下writing-modeプロパティを追加します。

div {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

以上で縦書きテキストの完了です。

上記だけだと上寄せですが、中央寄せにしたい場合はtext-align: center;をプロパティに追加してあげましょう。

まとめ

縦書きは画像を使わなくてもCSSだけで再現できます。

以上で解説を終わります。

目次

関連記事

HTMLCSS jQuery

【簡単CSS・jQuery】上スクロール時のみヘッダー・ナビを固定表示する方法

更新日:2022.09.09
556
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
1455
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
2013
プログラミング

is not a function at chrome-extensionの原因と対処方法

2022.10.05
265