SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.26
  • CATEGORY
TITLE

【CSS】writing-modeを解説!文章を縦書きに指定しよう

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】writing-modeを解説!文章を縦書きに指定しよう
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • writing-modeの使い方について学びたい方へ
  • 今回は縦書きについての学習になります
writing-mode

上の図のように、基本HTMLで記述した際には、横書きになります。
しかし、デザインによっては縦書きで表現しないといけない時があります。
そのような時にwriting-modeを指定し縦書きにします。次の章で詳しく解説していきます。

writing-modeについて

writing-modeについ

writing-modeとは、縦書きで表示する際に指定します。
書き方は以下のようになります。

/*--writing-mode--*/
要素 {writing-mode: 値;}
指定できる値
  • horizontal-tb(初期値)
    横書きで上から下へブロックが流れます。
  • vertical-rl
    縦書きで右から左へブロックが流れます。
  • vertical-lr
    縦書きで左から右へブロックが流れます。

horizontal-tbについて

horizontal-tb

writing-mode: horizontal-tbとは、初期値になります。
横書きで上から下へブロックが流れます。初期値になるため、指定しても何も変更はありません。

horizontal-tbについて

赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	writing-mode: horizontal-tb;
}

vertical-rlについて

vertical-rlについて

writing-mode: vertical-rlとは、縦書きで右から左へブロックが流れます。
verticalは縦を意味し、rlは「right(右)」から「left(左)」という意味になります。
また、縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。

vertical-rlについて

1.赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>1.赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

IE用に「-ms-writing-mode: tb-rl」を指定しないと反映されない恐れがあります。
Chrome用に「-webkit-writing-mode: vertical-rl」を指定しないと反映されない恐れがあります。
「Can I use」(https://caniuse.com/)では、対象のブラウザでベンダープレフィックスが必要かどうかを確認してくれます。
黄色枠に対象となるCSSを入力してください。

Can I use
ベンダープレフィックス
  • -webkit-
    Chrome、Safari、
    ※Operaは元は「-o-」でしたが、現在は「-webkit-」になってます
  • -moz-
    Firefoxになります
  • -ms-
    Internet Explorer、Microsoft Edgeになります

vertical-lrについて

vertical-lrについて

writing-mode: vertical-lrとは、縦書きで左から右へブロックが流れます。
verticalは縦を意味し、lrは「left(左)」から「right(右)」になり、先ほどの逆になります。
先ほどと同じように、縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。

vertical-rlについて

1.赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>1.赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	-ms-writing-mode: tb-lr;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
}

IE用に「-ms-writing-mode: tb-lr」を指定しないと反映されない恐れがあります。
Chrome用に「-webkit-writing-mode: vertical-lr」を指定しないと反映されない恐れがあります。
次の章では、テキストの向きについての解説になります。

text-orientationについて

text-orientationについて

text-orientationとは、テキストの向きを調整する際に指定します。
writing-modeで縦書きの指定をした際に、text-orientationでテキストの向きの調整をおこないます。
書き方は以下のようになります。
また、Safari用に「-webkit-」ベンダープレフィックスが必要になります。※IE, Edge未対応

/*--text-orientation--*/
要素 {
	writing-mode: 値;
	text-orientation: 値;
}
指定できる値
  • mixed(初期値)
    縦書きにされる文字(漢字など)は上向きに表示します。(初期値)
  • upright
    全ての文字を上向きに表示します。
  • sideways
    全ての文字を右向きに表示します。

mixedについて

mixedとは、縦書きにされる文字(漢字など)は上向きに表示します。
和文は縦、英語、数字は横に表示されます。

mixedについて

text-orientation: mixed
1.赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>text-orientation: mixed<br>
1.赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	/*--縦書きの指定--*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	/*--mixedを指定--*/
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
}

uprightについて

uprightとは、全ての文字を上向きに表示します。
和文、英語、数字、全て上向き(縦)に表示します。

uprightについて

text-orientation: upright
1.赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>text-orientation: upright<br>
1.赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	/*--縦書きの指定--*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	/*--uprightを指定--*/
	-webkit-text-orientation: upright;
	text-orientation: upright;
}

sidewaysについて

sidewaysとは、全ての文字を右向きに表示します。
和文、英語、数字、全て右向き(横)に表示します。

sidewaysについて

text-orientation: sideways
1.赤色(情熱・強さ)
情熱・強さ・生命力など
目立つ・・・持っています。

<p>text-orientation: sideways<br>
1.赤色(情熱・強さ)<br>
情熱・強さ・生命力など<br>
目立つ・・・持っています。</p>
p {
	/*--縦書きの指定--*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	
	/*--sidewaysを指定--*/
	-webkit-text-orientation: sideways;
	text-orientation: sideways;
}

まとめ

今回は、基本的な表示方法、テキストの向きについての解説になりました。
次回は、縦書きに対してのCSSを記事にします。
これで以上になります。

POINT
  • writing-modeとは、縦書きで表示する際に指定します。
  • 縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。
  • IE用に「-ms-writing-mode:」を指定しましょう。
  • text-orientationとは、テキストの向きを調整する際に指定します。
  • text-orientationは、Safari用に「-webkit-」ベンダープレフィックスが必要になります。
  • text-orientationは、※IE, Edge未対応になります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top