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に付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …