HTML & CSS

リファレンス

CSS

ライティング モード

writing-modeプロパティ

ブロック要素内のインライン要素について、流れの向きを指定するプロパティです。

  • 初期値

    horizontal-tb

  • 継承

    継承あり

  • 適用できる要素

    テーブル行、テーブル列以外のブロック要素

次の値を指定することができます。
2016年8月現在、値「sideways-lr」、「sideways-rl」はfirefoxのみ対応しています。また、Safariに値を適用するにはベンダープレフィックス「-webkit-」をつける必要があります。

  • horizontal-tb – 水平に左から右へ向かって流れを作ります。初期値。
  • vertical-rl – 垂直に右から左へ向かって流れを作ります。
  • vertical-lr – 垂直に左から右へ向かって流れを作ります。
  • sideways-lr – 垂直に左から右へ向かって流れを作り、インライン要素の向きを行に対して垂直にします。
  • sideways-rl – 垂直に右から左へ向かって流れを作り、インライン要素の向きを行に対して垂直にします。

値の設定例

各値を指定するCSSコードと、その表示例です。

CSSコード例

<style type="text/css">
.text1 {
	writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
}

.text2 {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
}
.text3 {
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
}
.text4 {
	writing-mode: sideways-lr;
}
.text5 {
	writing-mode: sideways-rl;
}
</style>
<p class="text1">プロパティのテスト</p>
<p class="text2">プロパティのテスト</p>
<p class="text3">プロパティのテスト</p>
<p class="text4">プロパティのテスト</p>
<p class="text5">プロパティのテスト</p>

表示例:

各値の指定例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。