Webサイトを制作するにあたって、Webサイトの雰囲気や配置によっては文章を縦書きにすることがあります。今回は、そんなときに使える「テキストを縦書きにして出力することができるプロパティ」についてご紹介します！
これが使えるようになると、和風なWebサイト制作でも雰囲気に合った配置にすることができます。
いっしょに学習していきましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSで文章を縦書きにするプロパティ writing-mode
まずは以下のようなpタグで囲まれた文章があるとします。
<p>この文章を縦書きにします！</p>出力結果
この文章を縦書きにします！
こちらは縦書きにするスタイルを適用していないので通常の横書き状態となっています。こちらのpタグに、以下のCSSを適用します。
p {
font-size: 24px;
writing-mode: vertical-rl;
}出力結果
これだけで縦書きとなって出力されました！
writing-modeプロパティは以下の特徴があります。
- テキストの行のレイアウトを縦にするか横にするかの設定
- 文章の流れを左向きにするか右にするかの設定
wirting-modeプロパティに関しては、以下のサイトで詳しく解説されています。
writing-modeに設定してあるvertical-rlという値のrlは、Right to Left の意味で文章を"右から左"へ行を並べることを意味しています。1行だけではこの値の意味がわかりにくいので、文章を追加して確認してみましょう。
例えば先ほどのpタグの文章に1行追加してbrタグで折り返してみると、以下のように表示されます。
<p>この文章を縦書きにします！<br>折り返し文章を縦書きにします！</p>p {
font-size: 24px;
writing-mode: vertical-rl;
}出力結果
折り返し文章が左側に配置されました。
では同じような値のvertical-lrを適用してみます。
p {
font-size: 24px;
writing-mode: vertical-lr;
}出力結果
こちらは折り返し文章が右側に配置されました。vertical-lrはLeft to Right なので「左から右」へ行を並べることを意味します。
英数字が含まれた文章を縦書きにするプロパティ text-orientation
英数字が含まれた文章を縦書きに配置したいという場合に使えるtext-orientationプロパティを解説します。
以下の文章はtext-orientationプロパティ適用前の文章です。
<p>
この文章を縦書きにします！<br>
ABCDEFG、hijklmn o-p-q-R-st:U VWXYZ<br>
1234567890
</p>p {
font-size: 24px;
writing-mode: vertical-rl;
}出力結果
こちらの文章にtext-orientationプロパティを適用すると以下の表示になります。
p {
font-size: 24px;
writing-mode: vertical-rl;
text-orientation: upright;
}出力結果
英数字も日本語文章のように縦書きに配置されるようになりました。
text-orientationプロパティは、行内のテキストの向きを設定することができます。
uprightは横書き用の文字を縦書き用と同様の配置に変更することができます。uprightを適用していない場合、text-orientationプロパティの既定値であるmixedが適用されます。
mixedは横書き用の文字が90°回転し、縦書き用の文字は自然に配置されます。
日本語文章を横書き用の文字と同様に90°回転させる場合は、sidewaysを適用します。
p {
font-size: 24px;
writing-mode: vertical-rl;
text-orientation: sideways;
}出力結果
ここまでをまとめると以下になります。
| プロパティ | 値 | 解説 |
| writing-mode | vertical-rl | 「右から左へ」文章を並べる。 |
| vertical-lr | 「左から右へ」文章を並べる。 | |
| text-orientation | mixed | 既定値。縦書き用文章は縦に、英数字は90°回転に配置。 |
| upright | 縦書き用文章も英数字も縦に配置。 | |
| sideways | 縦書き用文章を90°回転に配置。 |
英数字を含んだ文章を制御するプロパティ text-combine-upright
例えば以下のような英数字を含んだ文章があるとします。
<p>
この文章を縦書きにします！<br>
ABCという文字だけ横に配置します。<br>
2022年12月31日
</p>p {
font-size: 24px;
writing-mode: vertical-rl;
}出力結果
こちらの文章の英数字のみspanタグで囲み、そのspanタグに対してtext-combine-uprightプロパティを適用します。
<p>
この文章を縦書きにします！<br>
<span>ABC</span>という文字だけ横に配置します。<br>
<span>2022</span>年<span>12</span>月<span>31</span>日</span>
</p>p {
font-size: 24px;
writing-mode: vertical-rl;
}
p span {
text-combine-upright: all;
}出力結果
英数字の文章のみ横書きに配置されました。
まとめ
Webサイトの雰囲気やレイアウトしだいでは、文章を縦書きに配置したいときがあります。そんなときは今回学習したプロパティを実際に使ってみましょう。いくつかパターンがあるもののうまく使うことができれば、一味違った配置にすることができます。
アウトプットして学習していきましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
