CSSで文字を縦書きにする方法を紹介！

CSSで縦書きにする方法を知りたい

この記事は上記の課題に向けて作成しています。

web制作していると文字を縦書きにすることがあります。

cssでは簡単に縦書きにすることが出来ます。

この記事ではcssで文字を縦書きにする方法を紹介します。

この記事を読むメリット

• cssで文字を縦書きにする方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です！

• 都内制作会社でwebデザイナー・webディレクターとして勤務
• webデザイナー3年、webディレクター1年目
• web制作現場で学んだことを発信している人

あわせて読みたい

CSSで三角形を作る方法をわかりやすく紹介！ cssで三角形を作る方法が知りたい この記事は上記の課題に向けて作成しています。 cssで三角形を作るのが面倒だからと画像を使っていませんか？ 実はcssでは簡単に三角...

あわせて読みたい

CSSで改行させない方法！white-space: nowrapで可能！ CSSで改行させないようにしたい この記事は上記の課題に向けて作成しています。 通常webサイトでは横幅がいっぱいになると自動で改行されます。 しかしcssを使うと自動...

CSSで縦書きにする方法

早速cssで文字を縦書きにする方法を紹介します。

文字を縦書きにするには下記のコードを使用します。

縦書きに使用するcssコード

 writing-mode: vertical-rl;

「vertical」というのが縦にすることです。

「rl」とは「right to left」のことで、右から左に文字を表示します。

※文字の縦書きで左から右に表示する場合は「lr」と記載します。

下記は横書きの文章です。

横書きの文章

何も以後何しろいわゆるお話目とともにのの時になろででし。
よく毎日で留学らは単にある活動うなけれまでに入っから行かたがは卒業出るますですて、それほどには行っますうですです。仕儀がしずのは同時に場合でとうとうだだで。

上記のクラスに先ほどのcssコードを当てると縦書きになります。

縦書きの文章

何も以後何しろいわゆるお話目とともにのの時になろででし。
よく毎日で留学らは単にある活動うなけれまでに入っから行かたがは卒業出るますですて、それほどには行っますうですです。仕儀がしずのは同時に場合でとうとうだだで。

このように文章が縦書きに実装されます。

使用したHTMLコード

<div class="test">
 <p>何も以後何しろいわゆるお話目とともにのの時になろででし。<br>よく毎日で留学らは単にある活動うなけれまでに入っから行かたがは卒業出るますですて、それほどには行っますうですです。仕儀がしずのは同時に場合でとうとうだだで。</p>
</div>

使用したCSSコード

.test {
 writing-mode: vertical-rl;
}

※「writing-mode: vertical-lr;」にすると左から右に文字が表示されます。

何も以後何しろいわゆるお話目とともにのの時になろででし。
よく毎日で留学らは単にある活動うなけれまでに入っから行かたがは卒業出るますですて、それほどには行っますうですです。仕儀がしずのは同時に場合でとうとうだだで。

CSSで縦書きにする際の細かな設定

文字の縦書きには細かな設定をすることが出来ます。

CSSの縦書きの細かな設定

• 英数字の文字の向きを調整
• 数字だけ横向きにする

英数字の文字の向きを調整

先ほどのcssコードだけだと英数字は縦書きになりません。

1996年生まれ。26歳。男性。新卒で営業職を経験し、webデザイナーに未経験で転職。現在はwebデザイナーをしつつブログ活動もしています。

下記cssコードを追加することで英数字も縦方向になります。

text-orientation: upright;

1996年生まれ。26歳。男性。新卒で営業職を経験し、webデザイナーに未経験で転職。現在はwebデザイナーをしつつブログ活動もしています。

「writing-mode: vertical-rl;」と「text-orientation: upright;」はセットで使用しましょう。

数字だけ横向きにする

数字だけ横向きにすることも出来ます。

1996年生まれ。26歳。男性。新卒で営業職を経験し、webデザイナーに未経験で転職。現在はwebデザイナーをしつつブログ活動もしています。

数字部分に下記のcssコードを設定すると横向きになります。

text-combine-upright: all;

※「1996」と「26」が横向きになりましたね。「1996」は横にすると窮屈なので「26」のみ横向きで良いかもしれません。

使用したHTMLコード

<div class="test">
 <p><span class="beside">1996</span>年生まれ。<span class="beside">26</span>歳。男性。新卒で営業職を経験し、webデザイナーに未経験で転職。現在はwebデザイナーをしつつブログ活動もしています。</p>
</div>

使用したCSSコード

.beside {
 text-combine-upright: all;
}

未経験からWebデザイナーになれる？

未経験でwebデザイナーを目指している方はいませんか？

webデザイナーは未経験でもなることが出来ます。

※僕自身元々営業職でしたが、未経験でwebデザイナーになりました。

僕がwebデザイナーになるために実際に行ったことを記事にまとめました。

あわせて読みたい

未経験からwebデザイナーになるためにやったことを紹介！ 未経験でwebデザイナーになるには何をすれば良いの？ この記事は上記の課題に向けて作成しています。 未経験でwebデザイナーを目指している方が多いかと思います。 僕自...

自分がwebデザイナーに向いているか知りたい方は下記の記事を参考にしてください。

あわせて読みたい

Webデザイナーに向いている人と向いていない人！ webデザイナーに向いている人の特徴を知りたい この記事は上記の課題に向けて作成しています。 webデザイナーを目指す方にとって事前に知りたい情報だと思います。 web...

CSSで文字を縦書きにするのは簡単！

最後にまとめです。

文字を縦書きに出来るcssコード

writing-mode: vertical-rl;

英数字を縦書きに出来るcssコード

text-orientation: upright;

上記2つのコードを記述すれば問題ありません。

知らなかった方は是非実装してみてください。