CSS Web制作

CSSで文字を縦書きにする方法をサンプル付きで解説【小技あり】

※ 当サイトではアフィリエイト広告を利用しています

文字を縦書きにするのはどうすればいいの?

ホームページの文章は横書きが多いと思いますが、和風のサイトなどは縦書きも多いです(お寺やお墓のサイトなど)

今回は縦書きで使うCSSのプロパティ3つの解説と、縦書きで使える小技を3つご紹介します。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着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-lrvertical-rlを使ってみます。

 

vertical-lr

See the Pen
縦文字(vertical-lr)
by junpei (@junpei-sugiyama)
on CodePen.

vertical-lrlrはLeft(左)からRight(右)という意味になります。

 

vertical-rl

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

vertical-rlrlはRight(右)からLeft(左)という意味になります。

複数行であれば通常こちらを使うかと思います。

 

text-orientation:行内のテキストの向きを設定

これは縦書きの場合のみ有効なプロパティですwriting-modehorizontal-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文字分の幅に収めることが出来るプロパティです。

値は初期値のnoneallになります。

これは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種類解説】
【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つずつその役割を理解して使いこなせるようにしましょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作