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

【sass】@contentを使ってmediaクエリを簡略化する方法

2023.04.24
1076
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
1834
プログラミング

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

更新日:2020.04.09
711
HTMLCSS

CSSで三角形の背景を作成。横幅100%でレスポンシブに可変させる方法

2023.01.16
2539