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

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

Ads

関連記事

HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
141
WordPress プログラミング

【簡単】Advanced Custom Fieldsを使い、手動で任意の関連記事を出力するフィールドを導入

2022.03.21
83
PHP プログラミング

【php】現在のディレクトリURLを取得し、条件分岐する方法

2021.10.28
334
WordPress プログラミング

【ワードプレス】head内に自動生成される不要なタグを削除する方法

2021.12.08
68