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だけで再現できます。
以上で解説を終わります。
目次
