自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【CSS】writing-modeを解説!文章を縦書きに指定しようについての解説になります!こんな方に読んでほしいCSSを学び始めた方へwriting-modeの使い方について学びたい方へ今回は縦書きについての学習になります上の図のように、基本HTMLで記述した際には、横書きになります。デザインによっては縦書きで表現しないといけない時があります。そのような時にwriting-modeを指定し縦書きにします。次の章で詳しく解説していきます。[記事の内容]writing-modeについてhorizontal-tbについてvertical-rlについてvertical-lrについてtext-orientationについてmixedについてuprightについてsidewaysについてまとめwriting-modeについてwriting-modeとは、縦書きで表示する際に指定します。書き方は以下のようになります。値;}指定できる値horizontal-tb(初期値)横書きで上から下へブロックが流れます。vertical-rl縦書きで右から左へブロックが流れます。vertical-lr縦書きで左から右へブロックが流れます。horizontal-tbとは、初期値になります。横書きで上から下へブロックが流れます。初期値になるため、指定しても何も変更はありません。horizontal-tbについて赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。<p>赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。vertical-rlとは、縦書きで右から左へブロックが流れます。verticalは縦を意味し、rlは「right(右)」から「left(左)」という意味になります。縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。vertical-rlについて1.赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。<p>1.赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。tb-rl」を指定しないと反映されない恐れがあります。vertical-rl」を指定しないと反映されない恐れがあります。use」(https://caniuse.com/)では、対象のブラウザでベンダープレフィックスが必要かどうかを確認してくれます。黄色枠に対象となるCSSを入力してください。vertical-lrとは、縦書きで左から右へブロックが流れます。verticalは縦を意味し、lrは「left(左)」から「right(右)」になり、先ほどの逆になります。先ほどと同じように、縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。vertical-rlについて1.赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。<p>1.赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。tb-lr」を指定しないと反映されない恐れがあります。vertical-lr」を指定しないと反映されない恐れがあります。次の章では、テキストの向きについての解説になります。text-orientationについてtext-orientationとは、テキストの向きを調整する際に指定します。writing-modeで縦書きの指定をした際に、text-orientationでテキストの向きの調整をおこないます。書き方は以下のようになります。Safari用に「-webkit-」ベンダープレフィックスが必要になります。値;}指定できる値mixed(初期値)縦書きにされる文字(漢字など)は上向きに表示します。(初期値)upright全ての文字を上向きに表示します。sideways全ての文字を右向きに表示します。mixedについてmixedとは、縦書きにされる文字(漢字など)は上向きに表示します。和文は縦、英語、数字は横に表示されます。mixed1.赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。mixed<br>1.赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。上向き(縦)に表示します。upright1.赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。upright<br>1.赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。右向き(横)に表示します。sideways1.赤色(情熱・強さ)情熱・強さ・生命力など目立つ・・・持っています。sideways<br>1.赤色(情熱・強さ)<br>情熱・強さ・生命力など<br>目立つ・・・持っています。sideways;}まとめ今回は、基本的な表示方法、テキストの向きについての解説になりました。次回は、縦書きに対してのCSSを記事にします。これで以上になります。POINTwriting-modeとは、縦書きで表示する際に指定します。縦書きを指定する際には、ベンダープレフィックスを指定しなければなりません。IE用に「-ms-writing-mode:」を指定しましょう。text-orientationとは、テキストの向きを調整する際に指定します。text-orientationは、Safari用に「-webkit-」ベンダープレフィックスが必要になります。Edge未対応になります。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。