こんにちは、しまみさです。
私は現在、自宅でWeb制作の仕事をしながら、生活をしています。
コーディングのお仕事をした際、縦書きのテキストがデザインに含まれていました。
縦書きにするためのCSSは分かっていても、上手くいかず少々詰まってしまったので、備忘録として残しておこうと思います。
テキストを縦書きにする方法
今回は、以下のように、英語のテキストを、1行の縦書きにすることを想定していきます。
縦書きにするCSSは、「writing-mode: vertical-rl」です。
なので、縦書きにしたいセレクタにwriting-mode: vertical-rlを指定するだけです。
ただ、これだけだと、崩れてしまうと思うので、少しCSSを付け足します。
See the Pen vertical-rl by shimamisa (@shimamisa) on CodePen.
ポイントは下記2点です。
- ベンダープレフィックスをつけること。
- 高さを指定すること。
ベンダープレフィックスは、ブラウザ間で表示のされ方に違いが出ないようにするためです。
そして、高さを指定しないと、意図しないところで改行されてしまいます！
私はここで詰まりました（><）
ブラウザによって改行する解釈がバラバラのためのようで、少し面倒ですが、お忘れずに！
ポイントを踏まえた上でも、ブラウザが異なると表示のされ方が違う場合があるので、必ずチェックは行いましょう。
横書きが一般的ですが、ポイントで縦書きをいれるのも素敵ですし、「和」を表現できるので和風なサイトを制作したい時には取り入れると雰囲気が出ますね！
縦幅を考慮してコーディングしなければいけないので、多用すると大変そうではありますが、ぜひ使ってみてください。