Webサイト制作CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。今回はたった一行でそんな問題を解決する方法を紹介します。Left)という意味です。IE用には別の書き方になります。Left)を指定すればOK。段組みとは、特に紙のデザインではよく見かける、文章を複数のカラムにわけて読みやすく表示するレイアウトです。段数を指定するだけで実装できます。FlexboxやGridを使ったカラム分けとは違い、次のカラムにまたがった文章もドラッグして選択・コピペできる特徴を持ちます。指定すると、縦書きの文章も二段にわけられます。<p>これは、私が小さいときに、村の茂平というおじいさんからきいたお話です。<p>むかしは、私たちの村のちかくの、中山というところに小さなお城があって、中山さまというおとのさまが、おられたそうです。指定と同じく、線の幅、線の種類、線の色を指定。2.5rem;}レスポンシブ対応させるこのままでは画面の幅よりも文章量が多くなると、画面左側にズラーッと表示されてしまいます。横にスクロールしないと全文を読めませんね...。*/}これでレスポンシブ対応でき、文章が自動的に次の段に流れるようになりました。略で、表示している画面幅に対する割合です。「画面幅いっぱい」という意味ですね。2以上に設定すると、画面幅が狭くなった時に段数が多くなり、折返しが細かくなってしまいます。メディアクエリーを使って調整するなどの工夫が必要です。Edge含む主要ブラウザーに対応しています!安心して利用できますよ!仕上げに振り仮名(ルビ)や字下げの設定も行いたいですね!以前書いた「日本らしさを表現!CSSで文字の縦書きに挑戦!」という記事の中で縦書きWebサイトと一緒に使いたい小技を紹介しているので、そちらも参考にカスタマイズしてみてください!シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。