CSSで縦書きにする方法【現役エンジニアが解説】
今回は、CSSで縦書きにする方法について、縦書きの基本と英数字も縦に表示する方法に分け、簡単に解説していきます。
縦書きの基本
縦書きにするには、writing-modeプロパティをvertical-rlにします。
また、IE用に-ms-のベンダープレフィックスを付けたプロパティもtb-rlにします。
body{ writing-mode:vertical-rl; -ms-writing-mode:tb-rl; }
上記のコードでは、body要素の全ての文字に対し、IEのブラウザも含め、縦書き表示にしています。
英数字も縦に表示
writing-modeプロパティでは、英数字は横倒しになるだけとなります。
英数字も一文字ずつ縦書き表示させるには、text-orientationプロパティをuprightにします。
body{ text-orientation:upright; }
上記のコードでは、body要素の全ての文字に対して、縦書き表示されている場合には、英数字も一文字ずつ縦書き表示にします。
一部の文字を横に表示
text-combine-uprightプロパティをallにすることで、一部を横書き表示にできます。
Safari用に-webkit-text-combineプロパティをhorizontal、IE用に-ms-text-combine-horizontalプロパティをallにします。
.hoge{ text-combine-upright:all; -webkit-text-combine:horizontal; -ms-text-combine-horizontal:all; }
上記のコードでは、縦書き表示の中で、hogeというクラスを持つ要素の文字に対しては、IEとSafariのブラウザも含め、横書きで表示するようにしています。