クリエイターラボ

HTML、CSSで縦書きをする方法

良かったら”♥”を押してね！

縦書きは、業務で画面の左端や、右端に追尾するコピーライトに使われたり、見出しなどに使われたりと、使う頻度は少ないですがデザイン的には見やすかったり何かと便利になります。

今回の記事は、ここさえ見れば簡単に縦書きができるように、簡潔にまとめさせていただきました。

目次

  1. 縦書きと横書きの書き方
    ①縦書きにする方法
    ②横書きに戻す方法
  2. 他にもこんな機能が (英語、数字の縦向き)

1. 縦書きと横書きの書き方

①縦書きにする方法

そんな縦書きのCSSの書き方は、下記になります。

  1. writing-mode: vertical-rl;
  2. -webkit-writing-mode: vertical-rl;
  3. -ms-writing-mode: tb-rl;

これを縦書きしたい文字のCSSにかいてあげればOK！

②横書きに戻す方法

これをまたレスポンシブなどで横書きに戻したいときは、

  1. writing-mode: horizontal-tb;
  2. -webkit-writing-mode: horizontal-tb;
  3. -ms-writing-mode: horizontal-tb;

この記述をCSSに書いてあげれば、元の横書きに戻ります。

2. 他にもこんな機能が (英語、数字の縦向き)

縦書きには他にも色々と機能があるのですが例えば、このままだと数字や英語などが横を向いた状態になっていますが、縦向きにしたいとなると追加でこんな機能もあります。

  1. writing-mode: vertical-rl;
  2. -webkit-writing-mode: vertical-rl;
  3. -ms-writing-mode: tb-rl;
  4. /* --- NEW --- */ text-orientation: upright;

この /* — NEW — */ と書かれた行をCSSに追記していくと、数字や英語なども縦向きにすることができます。

実用的な例としては、以上になります。

縦書きは、地味なのですが意外と記述がややこしかったりしますので、このページを参考にして頂ければ幸いです。

良かったら”♥”を押してね！
shoppingmode関連タグ

ページ
トップへ