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だけで再現できます。

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

目次

関連記事

プログラミング

webフォント(google、adobe)の読み込み後にページを表示する方法

2023.11.18
778
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2678
プログラミング

ドラゴンボール超ブロリー映画のあらすじ・感想を解説!【記事最後にネタバレ有り】

更新日:2020.04.09
938
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3295