段組みを使って縦書きの文章をレスポンシブ対応させる方法

2018年7月26日 CSS, Webサイト制作 CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。今回はたった一行でそんな問題を解決する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 縦書きの設定 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝Top to Botto

[Hi32]

IE11～

[style_blue]

ほほー縦書き。IEはもう無かったことでいいよね。

[sisicom]

縦書きが出来るの？！

[y2_naranja]

IE対応は要注意、と。

[karasunekoneko]

段組みを使って縦書きの文章をレスポンシブ対応させる方法｜Webクリエイターボックス @webcreatorboxより