2021/01/20

CSSで縦書きにする方法【現役エンジニアが解説】

PROGRAM

今回は、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のブラウザも含め、横書きで表示するようにしています。

• facebook
• Tweet
• Read Later