2022.10.09レシピテキストテキストの向きを横書き/縦書きにするCSSのwriting-modeプロパティを使って、テキストの向きを横書き/縦書きにする方法について解説します。この記事のポイントテキストの横書き/縦書きを指定する縦書きは行が右から左へ向かうか、左から右へ向かうかを指定できるtransformプロパティのrotateを使って回転させる方法もある目次テキストの向きを指定するHTML要素自体を回転させてテキストの向きを変えるテキストの向きを指定するHTMLではテキストの向きは横書きが初期設定になっていますが、CSSのwriting-modeプロパティを使うと向きを変更することができます。今回の例では以下のHTMLコードを使って、p要素のテキストの向きをCSSのwriting-modeプロパティで調整します。コード例<section><p>テキスト1。text1.</p><p>テキスト2。text2.</p><p>テキスト3。text3.</p></section>横書きテキストの向きを横書きにする設定です。こちらは初期設定になるため、指定を省略した場合はこちらの表示になります。0;}ブラウザで表示すると以下のようになります。ブラウザで表示を確認してみると、以下のようになります。テキスト横向き縦書き(行は右から左に向かう)テキストの向きを縦書きにし、行は右から左に向かって表示する設定です。0;}ブラウザで表示すると以下のようになります。テキスト縦向き(行は右から左へ向かう)テキストを縦書きにすると、日本語のような縦書きに対応している言語は文字の向きは変わりませんが、アルファベットのような縦書きに対応していない言語は文字の向きが90度回転した状態になります。全角のアルファベットや数字は日本語と同じ向きになります。縦書き(行は左から右に向かう)テキストの向きを縦書きにし、行は左から右に向かって表示する設定です。上記のvertical-rlとは行の流れる向きが正反対になります。0;}ブラウザで表示すると以下のようになります。テキスト縦向き(行は左から右へ向かう)HTML要素自体を回転させてテキストの向きを変えるここまではwriting-modeプロパティを使ってテキストの横書き/縦書きを指定しましたが、縦書きに対応している言語とそうでない言語ではテキストの向きにバラつきが出てしまいます。縦書きにしながらもテキストの向きを揃えたいときは、writing-modeプロパティを使わずにtransformプロパティのrotateを使って回転させる方法もあります。こちらの方法は角度を指定できるので、横書き/縦書き以外に細かい角度を指定することも可能です。rotate(15deg);}ブラウザで表示すると以下のようになります。HTML要素自体を回転させて縦書きにする以上、テキストの向きを変更する方法についてでした。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。