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] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。 今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。 隣接・間接・直下セレクタ 隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用し …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

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

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

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

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

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