ホームページの文章は横書きが多いと思いますが、和風のサイトなどは縦書きも多いです（お寺やお墓のサイトなど）
今回は縦書きで使うCSSのプロパティ3つの解説と、縦書きで使える小技を3つご紹介します。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
CSSで文字を縦書きにする方法
文字を縦書きにするときに使うプロパティは3つあります。
- writing-mode：横書き・縦書き、文字を読む方向を設定
- text-orientation：行内のテキストの向きを設定
- text-combine-upright：1文字分の幅に表示する文字の設定
この解説だけではイメージできないと思うので、デモを見ながら解説していきます。
また上記プロパティを使わない通常の横書きはこちらになります。
See the Pen
縦文字 by junpei (@junpei-sugiyama)
on CodePen.
writing-mode：横書き・縦書き、文字を読む方向を設定
まずは縦書きにするのに必須なのがwriting-modeです。
値は3つあります。
writing-mode: horizontal-tb; /* 横書き(初期値) */
writing-mode: vertical-lr; /* 縦書き(左から右) */
writing-mode: vertical-rl; /* 縦書き(右から左) */writing-mode: horizontal-tb;は初期値で何も書かないとこれになります。
なので今回はvertical-lrとvertical-rlを使ってみます。
vertical-lr
See the Pen
縦文字(vertical-lr) by junpei (@junpei-sugiyama)
on CodePen.
vertical-lrのlrはLeft(左)からRight(右)という意味になります。
vertical-rl
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
vertical-rlのrlはRight(右)からLeft(左)という意味になります。
複数行であれば通常こちらを使うかと思います。
text-orientation：行内のテキストの向きを設定
これは縦書きの場合のみ有効なプロパティです（writing-modeがhorizontal-tb以外）
値は3つあります。
text-orientation: mixed; /* 横書き用の文字は右に90度回転、縦書き用の文字はそのまま(初期値) */
text-orientation: upright; /* 横書き用の文字も回転せずに縦方向 */
text-orientation: sideways; /* 縦書き用の文字も右に90度回転 */これは解説ではイメージしにくいと思いますが、デモを見れば分かると思います。
upright
See the Pen
縦文字(upritext-orientation: upright;) by junpei (@junpei-sugiyama)
on CodePen.
通常の縦書きだと英数字は右に90度回転していましたが、これは英数字も回転していません。
sideways
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
通常の縦書きだと英数字以外は右に回転しませんが、これは英数字以外も右に90度回転しています。
text-combine-upright：1文字分の幅に表示する文字の設定
これは複数の英数字や記号などを1文字分の幅に収めることが出来るプロパティです。
値は初期値のnoneかallになります。
これは1文字に収めたい文字をspanタグで囲む必要があります。
例えばtext-combine-uprightを書く前のHTMLとデモがこちらです。
<p><span>2023</span>年</p>
<p><span>令和</span><span>5</span>年</p>
<p><span>6</span>月<span>20</span>日</p>
<p><span>ABC</span></p>See the Pen
縦書き（text-combine-upright未使用） by junpei (@junpei-sugiyama)
on CodePen.
spanタグで囲っているのは1文字に収めたい文字になります。
1文字の『5』や『6』はspanタグで囲む必要ないと思うかも知れませんが、ここではspanタグで囲まないと6だけ右に90度回転してしまいます。
そしてこのCSSはこちらです。
p {
writing-mode: vertical-rl;
}
p span {
-webkit-text-combine: horizontal; /* ベンダープレフィックス(safari対策) */
text-combine-upright: all; /* これを追記 */
}こちらがその結果です。
See the Pen
縦書き（text-combine-upright使用） by junpei (@junpei-sugiyama)
on CodePen.
2文字、3文字、4文字と全て1文字分の幅に収まっています。
これを見る限り4文字くらいが見える限界という所でしょうか。
縦書きで使える小技3選
縦書きで覚えておくと便利な小技を3つご紹介します。
ふりがな（ルビ）
縦書きの文章は主に日本語だと思いますが、中にはふりがなを振りたい文字もあると思います。
これはCSSでは何もせず、HTMLの作業となります。
そしてHTMLではrubyタグとrtタグを使います。
<p><ruby>順平<rt>じゅんぺい</rt></ruby></p>
<p><ruby>星の白金<rt>スタープラチナ</rt></ruby></p>
<p><ruby>愛<rt>あい</rt></ruby>のバクダン</p>このように漢字とふりがなをrubyタグで囲み、その中のふりがなをrtタグで囲みます。
するとこのようになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これは横書きでも使えます。
See the Pen
横書き（ルビ） by junpei (@junpei-sugiyama)
on CodePen.
字下げ
日本語の文章は段落ごとに1文字分のスペースを空けることがあります。
それにはCSSでtext-indent: 1em;を書くだけでOKです。
p {
text-indent: 1em;
}See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
字下げについては以下の記事で詳しく解説しています。
-
【CSS】1行目を1文字分インデント(字下げ)する方法【4種類解説】
続きを見る
リンクの線の位置
横書きの場合、リンクの線は通常下になります。
そして縦書きの場合は、デフォルトだと左側に線が引かれます。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
これはデフォルトではtext-decoration: underline;となっているので、text-decoration: overline;とすればOKです。
See the Pen
縦書きのリンク（右線） by junpei (@junpei-sugiyama)
on CodePen.
ただしtext-decorationは線の位置・色・種類を変えられないので、text-decoration: none;で削除してborderにした方が良いかも知れません（border-rightなど）
例えばCSSをこのようにしてみます。
p a {
border-right: 3px dashed red; /* 線の太さ・種類・色 */
padding-right: 5px; /* 右の余白 */
text-decoration: none; /* デフォルトの線を削除 */
}するとこうなります。
See the Pen
縦書きのリンク（border） by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回はCSSで縦書きにする方法を解説してきました。
ただ文字を縦にするだけではなく、英数字があるかどうかや文字の向きなど微調整をする必要があると思うので、1つずつその役割を理解して使いこなせるようにしましょう。
以上になります。
