Webデザイナーブログから学ぶホームページ制作

文章・テキスト・文字を上から下、右から左に縦書きにさせたい場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「writing-mode」プロパティを使うことで縦書きのレイアウトを指定することができます。

今回は、CSSで文章・テキスト・文字を縦書きにする方法を解説します。

CSSで文章・テキスト・文字を縦書きにする場合は「writing-mode」プロパティで配置します。

「writing-mode」プロパティで配置し、上から下の横書き「horizontal-tb」、右から左の縦書き「vertical-rl」、左から右の縦書き「vertical-lr」それぞれの値を記述します。

また、IE（Internet Explorer）ブラウザの場合は「writing-mode」プロパティが効かないので「-ms-」というベンダープレフィックスを指定します。

※ベンダープレフィックスとは、CSSのプロパティの拡張機能をさまざまなブラウザに実装するために使用する識別子のことです。
「Google Chrome」、「Mozilla Firefox」、「Safari」、「IE」ブラウザのベンダープレフィックスがあり、ベンダープレフィックスを記述することで新しいプロパティに対応することができます。
「-ms-」ベンダープレフィックスを設定する場合は、「-ms-writing-mode」の値を、上から下の横書き「lr-tb」、右から左の縦書き「tb-rl」、左から右の縦書き「tb-lr」それぞれの値を記述します。

<div class="box1">文章・テキスト・文字</div>

「writing-mode」プロパティで配置し、それぞれの値を設定します。

.box1 {
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
}

.box3 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.box3 {
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}

「writing-mode」プロパティで配置したままだと英語や数字は横に表示されます。
英語や数字の表示方向を縦にする場合は、「text-orientation」というプロパティを記述して調整します。
「text-orientation」プロパティで配置し、デフォルト値「mixed」、全て縦向き「upright」、全て横向き「sideway」それぞれの値を記述します。

.box4 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin:0 auto 5%;
}

.box5 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin:0 auto 5%;
}

.box6 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  margin:0 auto 5%;
}

「text-orientation」プロパティで配置したままだと月日の数字がひと文字づつ表示されます。
月日の数字を縦中横に組む場合は、「text-combine-upright」というプロパティを記述して調整します。
縦中横に組む数字をspanタグで囲みます。
※「text-combine-upright」プロパティは、ブラウザーによって指定方法が異なります。

・通常：text-combine-upright: all;
・Safari：-webkit-text-combine: horizontal;
・IE：-ms-text-combine-horizontal: all;

<div class="box1"><span class="tx01">2022</span>年<span class="tx01">12</span>月<span class="tx01">12</span>日<br>Happy New Year<br>全て横向きレイアウト</div>

.box7 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin:0 auto 5%;
}
.tx01 {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

以前は、透過の設定方法と言えば画像で透過をさせる方法しかありませんでしたが、CSSで透過の設定が出来るようになって非常に使い勝手は良いですね。
「opacity」プロパティも「rgba」プロパティも今後使う機会は増えてきますね。どちらの設定方法も覚えておくとよいと思います。