【初心者向け】CSSで文章を縦書きにする方法

（最終更新日：2023年10月）

✔当記事がおすすめの方

「CSSで縦書きを実現する方法を知りたい」
「縦書きのCSSのコードを確認したい」
「縦書きCSSの具体的な例を見て学びたい」

✔当記事で得られる知識

CSS縦書きの基本概念
縦書きCSSのコードの記述方法と応用
実際の縦書きCSSの適用例

当記事では、CSS縦書きの基本から応用的なオプションを用いた実践的な使い方まで、具体的なサンプルを交えながら詳しく解説いたします。

ぜひ最後までお読みください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/11/22 13:53:13時点 Amazon調べ-詳細)

CSSによる縦書きの基本

こちらでは、CSSによる縦書きの基本的な手法を解説します。

縦書きデザインを実現するための基本は、CSS（Cascading Style Sheets）によるテキストの表示制御です。

writing-modeプロパティ
文字表示方向の調整

writing-modeプロパティ

縦書きの実現にはCSSのプロパティである「writing-mode」を利用します。

このプロパティを設定することで、テキストの流れを縦方向に変更可能。

writing-mode: vertical-rl;

これによりテキストは右から左へと縦に並びます。

文字表示方向の調整

文字自体の向きを指定するために、CSSプロパティ「text-orientation」を使用しましょう。

text-orientation: upright;

すべての文字が上向きになり、日本語だけでなく、英語や数字も上向きのまま縦書き表示が可能です。

ただし、これにより英数字が縦になるため、一部視認性に問題が生じることもあります。

適切な文字表示の調整をしてください。

英数字と縦中横の対応方法

こちらでは、縦書きデザインにおける英数字の扱いと、縦中横というテクニックについてご紹介します。

これらを適切に使用することで、視認性の高い縦書きデザインを作り出すことが可能です。

英数字で縦書きデザイン
縦中横の活用

英数字で縦書きデザイン

縦書きデザインでは、英数字が上下逆さまになり視認性に問題が生じます。

これを解決する方法のひとつは、英数字だけを横書きにすること。

これはCSSのプロパティである「text-combine-upright」を使って実現します。

text-combine-upright: digits 2;

2文字までの英数字を1文字分のスペースに収めて表示します。

縦中横の活用

「縦中横」は、縦書きの中で特定の文字だけを横に並べる書式のことです。

縦書き文中で年月日や時刻を表記する際などに用いられます。

HTMLでは、縦中横にしたい部分をspanタグで囲み、CSSで以下のように指定しましょう。

text-combine-upright: all;

これにより、該当部分が横書きになり、縦中横を再現できます。

縦書き時の文字配置

縦書きデザインをおこなう際、文字の配置についても注意が必要です。

中央揃えや字下げはデザインを決定づける重要な要素となります。

中央揃えにする方法
縦書き時の字下げ

中央揃えにする方法

縦書き時に、文字を中央揃えにする方法は簡単です。

text-align: center;

これにより、縦書き文節が容易に中央揃えになります。

縦書き時の字下げ

縦書きでも字下げをおこなうこと可能です

「text-indent」プロパティを用いましょう。

text-indent: 1em;

各段落の最初の行が1文字分下がります。

これは左から右への横書きにも同様に適用可能で、こちらでは左インデントです。

縦書きデザインと一緒に使いたい小技

ここでは、リンクの線装飾と振り仮名（ルビ）の表示設定について紹介します。

縦書きデザインをより引き立てるための小技も見ていきましょう。

リンクの線装飾の活用
振り仮名（ルビ）の表示設定

リンクの線装飾の活用

リンクに線装飾を施すことで、縦書きデザインが一層引き立ちます。

text-decoration: underline;

リンク文字下部に下線が引かれます。

以下は、リンク文字中央に取り消し線が引く方法です。

text-decoration: line-through;

これらを駆使して、リンク部分を強調しましょう。

振り仮名（ルビ）の表示設定

振り仮名は、主に日本語の文章において文字の読み方を示すために使われます。

縦書きでも、うまく活用できるテクニックです。

「ruby」タグと「rt」タグを用いて、HTML上で振り仮名を表示できます。

応用編: 縦書きウェブサイトの作成

縦書きの知識を活かして、実際に縦書きウェブサイトを作成してみましょう。

HTMLとCSSのコード例を提供します。

HTMLコード例
CSSコード例

HTMLコード例

以下は、縦書きウェブサイトの簡単なHTMLコード例です。

<div class="vertical-writing">
  <p>これは縦書きのサンプル文章です。</p>
  <p>ここに<a href="#">リンク</a>を追加してみましょう。</p>
  <ruby>難解<rt>なんかい</rt></ruby>な単語には<ruby>振仮名<rt>ふりがな</rt></ruby>を付けます。
</div>

このコードでは、縦書きにする領域を”vertical-writing”クラスで指定しています。

CSSコード例

以下は、上記HTMLコードに対応するCSSコード例です。

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

.vertical-writing a {
  text-decoration: underline;
}

.vertical-writing p {
  text-indent: 1em;
}

このコードでは、以下をおこなっています。