vertical-rl;}「writing-mode」は文字表記の方向のプロパティです。プロパティ値は以下horizontal-tb横書き/上から下へ。(初期値)vertical-rl縦書き/右から左へ。(今回はこれ)vertical-lr縦書き/左から右へ。基本的に主要ブラウザは問題なく縦書きで表示されます。※ネックになるIE11とedgeでも、問題なく表示されてました。(IE10以下は無視してます)基本的にテキスト系のCSSプロパティは使用できます。テキストの左右の隙間margin-leftとmargin-right行間line-hight文字間letter-spacingDEMO記号や日本語以外の表示例どうやら全角文字は、日本語と同じように立ち上がった状態で半角文字は寝転んだ状態で表示されるようです。横幅を設定しても、段落ちせずに表示領域を突き抜けて表示されます。↓指定した横幅を縦書き文字が突き抜けてます。この辺は、大幅なレイアウト崩れの危険があるので、注意が必要ですね。スマホの場合はモニターから外れてしまう場合があるので、フォントサイズをモニターにおさまるように「vw」などの単位を使ったほうがよさそうです。1.8vw;}text-alignのプロパティは縦に効いてしまう。WEBは基本的に左から右に表示されます。日本の縦書きは、左から右です。左側が無駄に空白ができている感じになってしまうので、レイアウト調整が必要ですが、テキストの配置で「text-align」は使えません。縦方向に効いてしまいます。center;」を当てた場合floatやpositionを使ってレイアウト調整してあげる必要があります。right;}edgeとIEでは、高さの解釈が違う気がする。表示バグなのか、高さの解釈の違いなのか...テキストを縦書きした場合、edgeとIE11で異様にテキストの下に空白ができるバグがあった。縦書きのBoxに「min-height」を設定したほうが大幅なレイアウト崩れを防げると思います。25em;}上記のような書き方で、25文字以上の高さ分は大きくならないとしておけば、とりあえず大きなレイアウト崩れは防げるかと思います。まとめワンポイントデザインやTOPページのメインビジュアルとかの短い文章で雰囲気を変えるのには有効かもしれませんが、全テキスト縦書きというようなサイトは厳しそうです。必要に迫られた時はレイアウトのレパートリーとして持っていてもいいかもしれませんね。【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。