CODING

[CSS] CSSで縦書きにする方法

投稿日:


どうも、べ〜やんです。

今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。

和風のデザインやサイドにメニューバーを配置する時などに便利です。





縦書きデザイン


和風テイストのデザインやサイドにメニューバーを配置する時などにテキストを縦にしたい時に便利な方法を紹介します。

日本語だけではなく英語表記などでも縦書きを使用すると、一段と違ったデザインが作れます。


使い方


日本語の縦書き


縦書きにしたい要素に、writing-mode: vertical-rl;を指定すれば縦書きになります。

verticalは垂直を意味して-rlとは(Right to Left)の略です。テキストが複数行になる時は右から左の文章になります。-lrとすれば逆になります。

IEの対応には、少し記述が変わります。

IE用は-ms-writing-mode: tb-rl;とします。

See the Pen bGGjJYK by beeyan (@orientado) on CodePen.


縦書きになりましたが、アルファベットの向きだけが横向きですね。


アルファベットを縦書き


アルファベットの向きも変えたい場合は、text-orientation: upright;を追加するだけです。

See the Pen mddjgXB by beeyan (@orientado) on CodePen.


横書きで縦書き


日本語を横書きのまま縦に表示したい場合は、text-orientation: sideways;を指定します。

See the Pen rNNrbvB by beeyan (@orientado) on CodePen.


数字の縦書き


数字を使ったパターンも紹介します。

数字はアルファベットと同じような扱いになります。

日付など二桁以上の数字を横並びにした縦書きをしたい場合は、

spantext-combine-upright: all;を使って表示できます。

.content {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.content span {
  text-combine-upright: all;
}

See the Pen jOOpRpd by beeyan (@orientado) on CodePen.


おわりに


今回は、CSSで簡単にテキストを縦書きにする方法を紹介しました。

縦書きデザインは日本語に相性がいいのですし、アルファベットをあえて縦書きにするのも面白いですね。

ぜひ使用してみてください。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …