ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > CSSで文章を縦書きにするプロパティをわかりやすく解説

CSSで文章を縦書きにするプロパティをわかりやすく解説

HTML/CSS

2022/01/06

2023/04/14

CSS 文章 縦書き

Webサイトを制作するにあたって、Webサイトの雰囲気や配置によっては文章を縦書きにすることがあります。今回は、そんなときに使える「テキストを縦書きにして出力することができるプロパティ」についてご紹介します!

これが使えるようになると、和風なWebサイト制作でも雰囲気に合った配置にすることができます。

いっしょに学習していきましょう!

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐ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 なので「左から右」へ行を並べることを意味します。

ZeroPlusgate50教材の動画

英数字が含まれた文章を縦書きにするプロパティ 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-modevertical-rl「右から左へ」文章を並べる。
vertical-lr「左から右へ」文章を並べる。
text-orientationmixed既定値。縦書き用文章は縦に、英数字は90°回転に配置。
upright縦書き用文章も英数字も縦に配置。
sideways縦書き用文章を90°回転に配置。

ZeroPlusgate50教材の動画

英数字を含んだ文章を制御するプロパティ 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について

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから