英数字も縦書きにする方法を知りたい
縦書きが右寄せにできない
文字のガタガタを直したい
縦書きになった途端にコーディングの難易度が上がって、詰まっていませんか。
本記事では、CSSで文字を縦書きにする基本や知っておきたいレイアウトのポイントを丁寧に解説します。
CSSで縦書きにするには？
コピー<p>テキストを縦書きにします。<br />これは折り返しのテキストです。</p>
コピーp {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
/* IE対応 */
}CSSで縦書きをしたいときは、writing-modeプロパティを使用します。
writing-mode: vertical-rl;の「vertical」は縦、「rl」は右から左（Right to Left）を意味しており、右から左へ日本語の自然な縦書きの流れの指定ができます。
-ms-writing-mode: tb-rl;はIE用（Internet Explorer）の設定で、ベンダープレフィックス-ms-を追記してIE用の値「tb-rl」を指定して表示崩れを防ぎましょう。
指定できる値は以下の通り。
| IE用（Internet Explorer） | 意味 | |
| vertical-rl | tb-rl | テキストを縦書きにして右から左に文章を表示する |
| vertical-lr | tb-lr | テキストを縦書きにして左から右に文章を表示する |
CSSで縦書きの文字の向きを変更する方法
CSSで縦書き表示する方法は以下の2パターンです。
- 英数字を含めて全て縦書きにする
- 文章は縦で英数字は横向きにする
それぞれ順番に見ていきましょう。
英数字を含めて全て縦書きにする
コピー<div class="mixed">
<p>
このテキストはtext-orientation:
mixedで出力しています。全部で39文字です。
</p>
</div>
<div class="upright">
<p>
このテキストはtext-orientation:
uprightで出力しています。全部で41文字です。
</p>
</div>
<div class="sideways">
<p>
このテキストはtext-orientation:
sidewaysで出力しています。全部で42文字です。
</p>
</div>
コピーp {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
/* IE対応 */
}
.mixed {
text-orientation: mixed;
}
.upright {
text-orientation: upright;
}
.sideways {
text-orientation: sideways;
}英数字も全て縦書きにしたいときは、text-orientationプロパティを使用します。
デフォルトはmixedで和文は縦、英数字は横表示されます。英数字を含めた全てを縦表示にするならupright、縦書きの中で英単語や数字を横向きにするならsidewaysを選択しましょう。
指定できる値は以下の通り。
| mixed | 初期値。和文は縦、英語は横向き。 |
| upright | 全て縦向き。 |
| sideways | 一文字ずつ90度回転。 |
文章は縦で英数字は横向きにする
コピー<p><span class="text-combine">2024</span>年の夏。</p>
コピーp {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
/* IE対応 */
}
.text-combine {
text-combine-upright: all;
-ms-text-combine-horizontal: all;
/* IE対応 */
}文章全体は縦書きで英数字を一文字分のスペースに入れたいときは、text-combine-uprightプロパティを使用します。HTMLで一文字分のスペースに入れたい部分をspanタグで囲むことを覚えておきましょう。
縦書き表記は上記のように、IEにも対応するようにCSSでコードを追記しておくと安心です。
縦書きレイアウトをCSSで使いこなす4つのポイント
ここでは縦書きレイアウトを使いこなすための、以下4つのおさえておきたいポイントを紹介します。
- 文章の位置指定
- 文字の位置調整
- ルビ
- 字下げ
それぞれ順番に見ていきましょう。
文章の位置指定
コピー<div class="right">
<div class="right-text">
<p>これは縦書きの例です。<br />テキストを右端に揃えます。</p>
</div>
</div>
コピー.right {
text-align: right;
border: 1px solid #333;
padding: 10px;
width: 200px;
height: 300px;
}
.right-text {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
display: inline-block;
text-align: left;
}writing-modeプロパティで縦書き指定すると、デフォルトは左寄せです。上記のように文章を右寄せにしたいときは、親要素rightにtext-align: right;を指定します。
子要素に記述してしまうとテキストが下揃えになるため、親要素に記述するよう気をつけましょう。
またright-textクラスでinline-blockを当てて、rightクラスで指定した右寄せの効果を得られるようにしています。さらに、text-align: left;を指定して縦書きのテキストを左揃え（縦書きのときは上端）で設定し、テキストの開始位置を整えています。
他のレイアウトは？
親要素にtext-align: center;やtext-align: left;を同じように指定すると、それぞれ中央や左寄せのレイアウトが可能です。
文字の位置調整
コピーp {
font-feature-settings: ‘pkna’;
}文字が中心からズレてしまうときは、font-feature-settingsプロパティを追記すると簡単に調整できます。文字間隔が自動で整い、手間要らずで便利です。
とはいえ、フォントやレイアウトによっては字間が詰まりすぎてしまう場合があるため、そのときはletter-spacingで調節してみてください。
ルビ
コピー
<p>
<ruby>縦<rt>たて</rt>書<rt>が</rt></ruby>きのルビ
</p>
ルビは横書きと同様にHTMLでrubyタグを使用します。
rubyタグで漢字と振り仮名を囲み、振り仮名に<rt>タグを使うとHTMLだけでルビの指定ができます。
字下げ
コピーp {
text-indent: 1em;
}最初の一文字を字下げしたいときはtext-indentを使用し、値を「1em」とすることで一文字分を空けます。
二行目以降の字下げをしたいときは、「-1em」とするだけで実装可能です。
CSSの縦書きで気をつけたいこと
縦書きでコーディングしたときは、ブラウザごとに挙動をしっかりチェックしておきましょう。ブラウザによっては改行位置や高さが異なることがあるため、ベンダープレフィックスを使って互換性を持つようにするのが大切です。
たとえば、文字が切れてしまったり、ブラウザ間で配置場所が異なったりということが起こる可能性があります。
文字が切れる場合はline-height、配置場所が違う場合はpaddingやmarginで調節するなど、一つずつ対処していきましょう。
まとめ：CSSの縦書きをマスターしよう
CSSで縦書きをするにはwriting-modeプロパティを使用します。文字の向きを全て縦書きにするならtext-orientationプロパティ、英数字を一文字のスペースに入れるならtext-combine-uprightプロパティを記述しましょう。
インプットとアウトプットを繰り返しながら、CSSの縦書きを使いこなしてみてください。縦書きのコーディングができれば、和風デザインの実装も可能になります。
とはいえ、縦書きは癖があるものが多く、コーディングに迷いを感じることがあるかもしれません。
そんなときに現役エンジニアに相談できるのが、デイトラWeb制作コースの強みです。学習の疑問が解決し、新たな知識が得られ、コーダーとしてレベルアップが期待できるでしょう。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
