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

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

関連記事

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …