この記事では、CSSを使って縦書きで文章をコーディングする方法を紹介します。右寄せ・中央寄せ・左寄せ・複数カラム・段落間隔・文字間隔・行間隔・下線・フリガナ・字下げの設定方法も紹介します。WEBサイトは基本的に横書きですが、和風テイストのサイトでは縦書きが良く使われますので、CSSで縦書きにする方法を覚えておいた方が良いです。
縦書きCSSの概要をザックリ
CSSプロパティの「writing-mode: vertical-rl;」を使います。ただし、このプロパティだけでは表示の対応範囲が狭いため、「column-count」と「column-gap」も合わせて設定する必要があります。
２段組の縦書き文章の場合は下のCodePenのようなコードになります。
See the Pen 縦書き文章 by Satoru Shimizu (@sat-simizu) on CodePen.
HTMLの構造やCSSはそれなりに複雑になりますので、詳しく説明していきます。
縦書き文章のHTML・CSSの記述例
最初の例では２カラムでしたが、１カラム表示の場合は「column-count」と「column-gap」の設定が必要ありませんので、コードは少しシンプルになります。
まずはCodePenで表示とコードをご確認下さい。
See the Pen 縦書き文章１カラム by Satoru Shimizu (@sat-simizu) on CodePen.
縦書き文章のHTML構造｜共通
縦書き文章のHTML構造は下のとおりです。このHTML構造は右寄せ・左寄せ・中央寄せ・カラム数に関わらず、すべて共通して使えます。
縦書き文章のHTMLの構造はザックリ言って、３種類のタグから構成されます。
- 右寄せ・左寄せ・中央寄せを設定するタグ（下の例では、vertical-text-outerのdivタグ）
- 縦書き設定・カラム数設定・height設定用のタグ（下の例では、vertical-text-innerのdivタグ）
- 縦書きコンテンツ本体（hタグやpタグ）
<body>
<main>
<!-- 右寄せ・左寄せ・中央寄せを設定するタグ -->
<div class="vertical-text-outer">
<!-- 縦書き設定・カラム数設定・height設定用タグ -->
<div class="vertical-text-inner">
<!-- 以下、縦書きコンテンツ本体 -->
<h2>縦書き文章のCSS</h2>
<p>
この記事では、CSSを使って縦書きで文章をコーディングする方法を紹介します。WEBサイトは基本的に横書きですが、和風テイストのサイトでは縦書きが良く使われますので、CSSで縦書きにする方法も覚えておくべきしょう。
<br>
この記事では、CSSを使って縦書きで文章をコーディングする方法を紹介します。WEBサイトは基本的に横書きですが、和風テイストのサイトでは縦書きが良く使われますので、CSSで縦書きにする方法も覚えておくべきしょう。
</p>
<p>
この記事では、CSSを使って縦書きで文章をコーディングする方法を紹介します。WEBサイトは基本的に横書きですが、和風テイストのサイトでは縦書きが良く使われますので、CSSで縦書きにする方法も覚えておくべきしょう。
</p>
</div>
</div>
</main>
</body>右寄せ・縦書き文のCSS｜１カラム
縦書き文章用（１カラム・右寄せ）のCSSは下記のとおりです。
/* 右寄せ・左寄せ・中央寄せを設定するタグのスタイル */
.vertical-text-outer{
text-align: right;
}
/* 縦書き設定・カラム数設定・height設定用タグのスタイル */
.vertical-text-inner{
writing-mode: vertical-rl;
display: inline-block;
height: 600px;
text-align: justify;
}
/* 以下、縦書きコンテンツ本体のスタイル */
h2{
font-size: 18px;
font-weight: 800;
margin-left: 1em;
}
p {
line-height: 1.8;
margin-left: 1em;
}縦書きCSSのコード解説
右寄せ・左寄せ・中央寄せを設定するタグのスタイル
この記述例ではHTMLで縦書きコンテンツ本体の２階層上の親（祖父）のdivタグ（CSSセレクター：vertical-text-outer）で、縦書きコンテンツの右寄せ・中央寄せ・左寄せを設定します。
- 右寄せ：text-align: right;
- 中央寄せ：text-align: center;
- 左寄せ：text-align-last: left;
縦書き設定・カラム数設定・height設定用タグのスタイル
この記述例ではHTMLで縦書きコンテンツ本体の直接の親のdivタグ（CSSセレクター：vertical-text-inner）で、縦書きコンテンツの縦書き設定・カラム数設定・height設定を設定します。
- 縦書き設定：writing-mode: vertical-rl;（要ベンダープレフィックス）
- カラム数設定：今回は必要なし（ただし、書いても構わない。書く場合は要ベンダープレフィックス）
- height設定：このタグで縦書きコンテンツの高さを設定します。この例では600pxに設定しています。
なお、カラム数設定を書く場合には下記のように書きます。１カラムの場合は書かなくても影響はありません。
.vertical-text-inner{
writing-mode: vertical-rl;
column-count: 1; //カラム数
column-gap: 1em; //カラムの間隔
display: inline-block;
height: 600px;
text-align: justify;
}ちなみにベンダープレフィックスまでを書くと下記のようになります。
.vertical-text-inner{
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
column-count: 1;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
display: inline-block;
height: 600px;
text-align: justify;
}縦書きコンテンツ本体のスタイル
コンテンツ本体のスタイルで設定することは下記のとおりになります。
- 文字サイズ
- 文字の太さ
- コンテンツの間隔：marginなど
２カラムの縦書き文のCSS｜右寄せ
２カラムの縦書き文章は下記CodePenのような表示になります。
See the Pen 縦書き文章 by Satoru Shimizu (@sat-simizu) on CodePen.
このような２カラム表示にする場合は、縦書き設定・カラム数設定・height設定用タグ（CSSセレクター：vertical-text-inner）のスタイルに、下記のようにカラム数（column-count）とカラム間隔（column-gap）の設定を記述します。
以下、関係箇所のCSS抜粋です。他は１カラムのCSSと全く同じですので省略します。
.vertical-text-inner{
writing-mode: vertical-rl;
column-count: 2; //カラム数
column-gap: 1em; //カラムの間隔
display: inline-block;
height: 600px;
text-align: justify;
}上の記述例では、カラム数（column-count）を２、カラム間隔（column-gap）を1emに設定しています。
中央寄せの縦書きCSS｜１カラム
中央寄せ・縦書き表示を下のCodePenでご確認下さい。
See the Pen 縦書き｜１カラム・中央寄せ by Satoru Shimizu (@sat-simizu) on CodePen.
コードの詳細はCodePenを直接見て頂くとして、CSSの書き方は簡単で、右寄せ・左寄せ・中央寄せを設定するタグ（vertical-text-outer）のスタイル を、text-align: center;にするだけです。
以下、関係箇所のCSS抜粋です。
/* 右寄せ・左寄せ・中央寄せを設定するタグのスタイル */
.vertical-text-outer{
text-align: center;
}左寄せの縦書きCSS｜１カラム
縦書きで左寄せ１カラムのCodePenは下記のとおりです。表示とコードをご確認下さい。
See the Pen 縦書き｜１カラム・左寄せ by Satoru Shimizu (@sat-simizu) on CodePen.
縦書きを左寄せにする方法は、右寄せ・左寄せ・中央寄せを設定するタグ（vertical-text-outer）のスタイル を、text-align: left;にするだけです。
/* 右寄せ・左寄せ・中央寄せを設定するタグのスタイル */
.vertical-text-outer{
text-align: left;
}文字間隔・行間・段落の間隔
縦書き文章の文字間隔・行間隔・段落の間隔の変え方は下記のとおりです。
- 文字間隔：コンテンツ本体（例：pタグ）のletter-spacingをで設定できます。
- 行間隔：コンテンツ本体（例：pタグ）のline-heightをで設定できます。
- 段落の間隔：コンテンツ本体（例：pタグ）のmargin-leftをで設定できます。
CodePen｜縦書き文の文字間隔・行間隔・段落の間隔
縦書き文章の文字間隔・行間隔・段落の間隔を変えたCodePenは下記のとおりになります。
See the Pen 縦書き｜文字間隔・行間隔 by Satoru Shimizu (@sat-simizu) on CodePen.
縦書き文の文字間隔・行間隔・段落間隔のCSS記述例（抜粋）
縦書き文章の文字間隔・行間隔・段落間隔のCSS記述例は下記のとおりです。
p {
line-height: 3; //行間隔
margin-left: 2em; //段落の間隔
letter-spacing: 0.5em; //文字間隔
}アンダーライン
See the Pen 縦書き文章｜アンダーライン by Satoru Shimizu (@sat-simizu) on CodePen.
縦書き分のアンダーラインはborder-rightで書きます。
以下、アンダーライン部分のHTML抜粋です。今回はaタグでアンダーライン部分を作りましたが、spanタグでもOKです。
<p>
この記事では、CSSを使って縦書きで文章を<a>コーディングする方法</a>を紹介します。
</p>以下、アンダーライン部分のCSS抜粋です。
/* アンダーライン */
a{
text-decoration: none;
border-right: 2px solid red;
padding-right: 0.15em;
}リセットCSSでデフォルトのaタグのスタイルを消していない場合は、text-decoration: none;でスタイルを消してから、CSSを書きます。線はborder-rightで書いて、文字との間隔はpadding-rightで設定します。
縦書きのルビ（ふりがな）
縦書きでルビ（フリガナ）を付けた事例のCodePenは下記のとおりです。CSSは特に設定せず、HTMLだけを少し変えています。
See the Pen 縦書き文章｜ルビ・フリガナ by Satoru Shimizu (@sat-simizu) on CodePen.
関係箇所のHTML抜粋を下に載せます。
<p>
この<ruby>記事<rt>きじ</rt></ruby>では、CSSを使って縦書きで<ruby>文章<rt>ぶんしょう</rt></ruby>をコーディングする方法を紹介します。
</p><ruby>漢字<rt>フリガナ</rt></ruby>フリガナを付けたい漢字を<ruby></ruby>で囲い、漢字に続けて<rt></rt>で囲ったフリガナを続けて書くイメージでです。
縦書きのインデント（字下げ）
See the Pen 縦書き｜字下げインデント by Satoru Shimizu (@sat-simizu) on CodePen.
縦書きの字下げ（インデント）の方法は、字下げしたいタグ（例：pタグ）に対してCSSでtext-indent: 1em;を設定するだけです。
以下、CSSの記述例になります。
p {
line-height: 1.8;
margin-left: 1em;
text-indent: 1em; //字下げ設定
}まとめ
以上、CSSで縦書きをする時の方法について解説しました。すべての縦書きパターンに対応すると、HTMLを３階層にする必要がありますが、ルールを覚えれば然程難しくないと思います。最近は和風デザインのWEBサイトも増えてきましたので縦書きのマスターはマストと言えるでしょう。
