HTMLの文章を縦書にする方法を解説！日本語やおしゃれな表現にも

2024.01.06

「日本語の文章を縦書きにして、和を演出したい」

「縦書きのレイアウトに挑戦してみたい」

HTMLの学習中や、Webサイトを制作していてそう思ったことはありませんか？

HTMLの文章を縦書きにできれば、日本語らしい表現ができるようになるでしょう。

この記事は、

HTMLの文章を縦書きにする方法
縦書き文字の向きを調節する方法
縦書きの数字を見やすくする方法

など、HTML文章の縦書きに関するノウハウが凝縮された内容になっています。

Webサイトの文章を縦書きにするだけで、印象がガラッと変わります。

縦書きレイアウトに挑戦して、新しい表現力を身につけてみませんか？

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

【CSS】writing-modeプロパティでHTMLの文章を縦書きにする

日本らしさや和を表現したい時、HTMLの文章を縦書きにするにはどうしたら良いのでしょうか？

HTMLで文章を記述すると、通常はWebサイト上に横書きで表示されますので、CSSのwriting-modeプロパティを使って縦書きに変更しましょう！

writing-modeプロパティには、以下の2つの値があります。

右から左へ改行：vertical-rl
左から右へ改行：vertical-lr

ここでは、HTMLを以下のように記述した場合を想定して、それぞれの使い方を解説します。

<!-- HTML -->
  <body>
    <p>縦書きレイアウトに<br>挑戦してみましょう。</p>
  </body>

1.右から左へ改行：vertical-rl

日本語の縦書きを表現する際、一般的に使用される値です。

国語の教科書や小説と同じ表現と言えばわかりやすいでしょう。

CSSでは、以下のように記述します。

p {
  writing-mode: vertical-rl;
}

2.左から右へ改行：vertical-lr

レイアウトの関係で、縦書きでも左から文字を読んでもらいたい場合に使用できる値です。

CSSでの記述方法は、以下の通りです。

p {
  writing-mode: vertical-lr;
}

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

【CSS】text-orientationプロパティでHTML文章の縦書き文字の向きを調整する

ひらがな、カタカナ、漢字はwriting-modeプロパティで縦書きにできますが、英数字はどうなるでしょうか？

<!-- HTML -->
<p>2021年の現在から<br>HTML文章の縦書きレイアウトに<br>挑戦してみましょう。</p>

/* CSS */
p {
  writing-mode: vertical-rl;
}

上記のように、writing-modeプロパティのみの場合だと英数字の向きが横になってしまいます。

英数字など行内のテキストの向きを調整するには、writing-modeプロパティと併用してtext-orientationプロパティを使用します。

text-orientationプロパティには、以下の3つの値があります。

和文も英数字も縦に表示される：upright
和文も英数字も横（右）向きに表示される：sideways
和文は縦、英語は横（右）向きに表示される：mixed

では、それぞれの使い方を見ていきましょう。

1.和文も英数字も縦に表示される：upright

とにかく全部縦書きにしたい！という場合は、text-orientationプロパティでuprightを指定します。

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

日本語だけでなく、英数字も縦に表示されていることがわかるでしょう。

一文字ずつ上向きに縦並びになるので、英数字は少し読みづらくなる可能性があります。

数字を上向き縦並びで表現したい時は、漢数字に変更するという方法もありますよ。

2.和文も英数字も横（右）向きに表示される：sideways

縦書きにしたいけど、文字を全て右向きにしたい場合はtext-orientationプロパティでsidewaysを指定します。

p {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

あまり一般的に使用することはありませんが、かなり個性を出すことができます。

テキストにインパクトを持たせたい時や、レイアウトにテキストを使いたい時などに使えるでしょう。

3.和文は縦、英語は横（右）向きに表示される：mixed

text-orientationのプロパティ値はmixedがデフォルトで設定されています。

そのため、writing-modeプロパティのみでHTMLを縦書きにした時と同じ表示になります。

p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

mixdには、縦書きが標準の漢字や仮名は上向き、横書きが標準のラテン文字などは右向きという特徴があります。

【CSS】text-combine-uprightプロパティで縦中横を指定する

縦中横とは、縦書きの中でマークアップした文字を横組みすることで、複数の文字を１文字分に圧縮して表示されます。

例えば「2021年12月24日」という日付を表現したい場合、一文字ずつ縦向きでは読みづらいですよね？

そんな時に縦中横で数字をマークアップすれば、意味のある数字としてまとめることができます。

縦中横を指定したい時は、text-combine-uprightプロパティを使用します。

<!-- HTML -->

<p><span>2021</span>年<span>12</span>月<span>24</span>日</p>

/* CSS */
p {
  writing-mode: vertical-rl;
}

span {
  text-combine-upright: all;
}

Safari・IEでは反映されない！ベンダープレフィックスを使用して対応

これまでに紹介してきた、3つのプロパティは、SafariやIEでは反映されません！

縦書きレイアウトをいろんなブラウザで表現したい場合は、ブラウザに合わせて各プロパティにベンダープレフィックスを使用することで対応できます。

ブラウザごとに表示が異ならないように、通常プロパティとベンダープレフィックスを併用使用しましょう！

writing-modeプロパティ

writing-mode: vertical-rl;
-ms-writing-mode: tb-rl; /* IE用 */
-webkit-writing-mode:vertical-rl;  /* Safari用 */

writing-mode: vertical-lr;
-ms-writing-mode: tb-lr; /* IE用 */

text-orientationプロパティ

text-orientation: upright;
-webkit-text-orientation: upright; /* Safari用 */

text-orientation: sideways;
-webkit-text-orientation: sideways; /* Safari用 */

text-orientation: mixed;
-webkit-text-orientation: mixed;/* Safari用 */

text-orientationプロパティは、残念ながら2021年6月現在、IEでの表示に対応していません。

text-combine-uprightプロパティ

text-combine-upright: all;
-ms-text-combine-horizontal: all; /* IE用 */
-webkit-text-combine: horizontal; /* Safari用 */

まとめ：Webサイトで「和」を表現できる！HTMLの文章を縦書きにしてみよう

今回は、HTMLの文章を縦書きにする方法について解説しました。

3つプロパティが登場しましたが、対応でないブラウザもあるので、必ずベンダープレフィックスと併用するようにしましょう。

一文字一文字確認して英数字は見やすいように向きを調整することで、Webサイトでは馴染みのない縦書きでも読みやすく表現することができますよ。

HTML文章の縦書きレイアウトに挑戦して、デザインや表現の幅を増やしてみてくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする