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

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

目次

関連記事

WordPress プログラミング

wordpressパーマリンクの設定で一部だけリンク設定を変更する方法

更新日:2020.07.18
450
WordPress プログラミング

【簡単】デフォルト検索にACFカスタムフィールドの値を含める方法【wordpress】

更新日:2022.03.19
639
HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
317
HTMLCSS

CSSで一部のhtml要素を除く否定疑似クラス:not()の使い方

2022.05.02
101