Writing-modelとは？CSSのwriting-modelでテキストの縦書き・横書きを指定する方法

今回はHTMLを書く上で欠かせないテキストの向きの変え方のお話。

CSSの writing-model プロパティで思い通りに文字の向きを変えたいと思っても・・初心者のうちは

・うまくテキストの向きの調整ができない！！
・向きの設定をしても、うまく反映されない！！

というふうに、悩んだ経験もあるはず。

今回は、そんなCSSの【writing-model】プロパティに関する

・基本的な使い方
・テキスト向きの変え方

について説明します。

目次 [非表示]

1 【writing-model】とは
2 【writing-model】の基本的な使い方
- 2.1 【writing-model】の使い方
3 まとめ

【writing-model】とは

【writing-model】の読み方

CSSプロパティの writing-model はライティングモデルと読み、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかといった、書字方向全般の仕様が定義されています。

【writing-model】の説明

属性値としては、主に horizontal-tb、vertical-rl、vertical-lrが挙げられます。

横書きの場合はその言葉の書字方向も影響し、左書きや右書き (ヘブライ語やアラビア語) のどちらかになります。

また、一部のブラウザでは非対応なのでご注意ください。

【writing-model】で利用できる値

【writing-model】では以下の値を使うことができます。

値	説明
horizontal-tb	`ltr` の言語→コンテンツは左から右へ水平に流れます。 `rtl` の言語→コンテンツは右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。
vertical-lr	`ltr` の言語→コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 `rtl` の言語→コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。
vertical-rl	`ltr` の言語→コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 `rtl` の言語→コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。
sideways-lr	`ltr` の言語→コンテンツは上から下へ垂直に流れます。 `rtl` の言語→コンテンツは下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。
sideways-rl	`ltr` の言語→コンテンツは下から上へ垂直に流れます。 `rtl` の言語→コンテンツは上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。

注意

IEをはじめとする、ブラウザは非対応です。また、“sideways-lr”と”sideways-rl”はFirefox以外は非対応なのでご注意ください。

対応ブラウザ

対応ブラウザは以下の通りです。

■horizontal-tb、vertical-rl、vertical-lr

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
Internet Explorer	非対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	非対応

■sideways-lr、sideways-rl

PC用ブラウザ	対応状況
Chrome	非対応
Edge	非対応
Firefox	完全対応
Internet Explorer	非対応
Opera	非対応
Safari	非対応
スマートフォン用ブラウザ	対応状況
Android webview	非対応
Android版Chrome	非対応
Android版Firefox	完全対応
Android 版 Opera	非対応
iOS版Safari	非対応
Samsung Internet	非対応

【writing-model】の基本的な使い方

【writing-model】の使い方

ここでは、writing-modelプロパティの基本的な使い方について説明していきます。

各属性値の設定の仕方も合わせて説明していきます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="writing-mode.css">
  </head>
<h5>horizontal-tb</h5>
<div class="sample horizontal-tb">
あいうえお　かきくけこ　さしすせそ　なにぬねの
ABCDEF　GHIGKL　MNOPQR　STUVWXYZ
</div>

<h5>vertical-lr</h5>
<div class="sample vertical-lr">
あいうえお　かきくけこ　さしすせそ　なにぬねの
ABCDEF　GHIGKL　MNOPQR　STUVWXYZ
</div>

<h5>vertical-rl</h5>
<div class="sample vertical-rl">
あいうえお　かきくけこ　さしすせそ　なにぬねの
ABCDEF　GHIGKL　MNOPQR　STUVWXYZ
</div>

<h5>sideways-lr</h5>
<div class="sample sideways-lr">
あいうえお　かきくけこ　さしすせそ　なにぬねの
ABCDEF　GHIGKL　MNOPQR　STUVWXYZ
</div>

<h5>sideways-rl</h5>
<div class="sample sideways-rl">
あいうえお　かきくけこ　さしすせそ　なにぬねの
ABCDEF　GHIGKL　MNOPQR　STUVWXYZ
</div>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h5>horizontal-tb</h5>

あいうえお　かきくけこ　さしすせそ　なにぬねの

ABCDEF　GHIGKL　MNOPQR　STUVWXYZ

</div>

<h5>vertical-lr</h5>

あいうえお　かきくけこ　さしすせそ　なにぬねの

ABCDEF　GHIGKL　MNOPQR　STUVWXYZ

</div>

<h5>vertical-rl</h5>

あいうえお　かきくけこ　さしすせそ　なにぬねの

ABCDEF　GHIGKL　MNOPQR　STUVWXYZ

</div>

<h5>sideways-lr</h5>

あいうえお　かきくけこ　さしすせそ　なにぬねの

ABCDEF　GHIGKL　MNOPQR　STUVWXYZ

</div>

<h5>sideways-rl</h5>

あいうえお　かきくけこ　さしすせそ　なにぬねの

ABCDEF　GHIGKL　MNOPQR　STUVWXYZ

</div>

</html>

CSS

.sample {
    margin: 1em;
    padding: 5px;
    height: 100px;
    width: 200px;
    
}

.sample.horizontal-tb { writing-mode: horizontal-tb; }
.sample.vertical-lr { writing-mode: vertical-lr; }
.sample.vertical-rl { writing-mode: vertical-rl; }
.sample.sideways-lr { writing-mode: sideways-lr; }
.sample.sideways-rl { writing-mode: sideways-rl; }

.sample {

margin: 1em;

padding: 5px;

height: 100px;

width: 200px;

}

.sample.horizontal-tb { writing-mode: horizontal-tb; }

.sample.vertical-lr { writing-mode: vertical-lr; }

.sample.vertical-rl { writing-mode: vertical-rl; }

.sample.sideways-lr { writing-mode: sideways-lr; }

.sample.sideways-rl { writing-mode: sideways-rl; }

まとめ

いかがでしたか？

今回はwriting-modelプロパティの基本的な使い方を説明しました。

これで、writing-modelプロパティを使って、文字の向きを自在に変更できますね！

文字の向きを変えるだけでも、Webコンテンツの表現の仕方も大きく変わるものです。

閲覧者が見やすいように、工夫してみてください！！

この記事がお役に立てれば幸いです。

参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。