和のサイトを作成する際に用いられるようになった縦書きのcssですが、やってみると結構奥が深く、またスマホファーストなこのご時世にレスポンシブさせるのがなかなか大変だということで
いろいろと考えをまとめるためにブログに起こしてみました。

まとめサイトによくある縦書きがレスポンシブをどうしているか見てみたんですが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているサイトも多かったです。

ということで、どういう方法がいいのかも含めてご紹介していきたいと思います！

ではまず基本的なところから…

縦書きにする方法

縦書きにするのはすごく簡単です。縦書きにしたい文章にCSSで「writing-mode: vertical-rl; 」を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。
ただ、ここで注意するのがIEのみ別の書き方をする必要があるというところです。
毎度のことながら-ms- というベンダープレフィックスを付けて、tb-rl（上から下、右から左＝Top to Bottom, Right to Left）を指定する必要があります。

body{
  -ms-writing-mode: tb-rl; //IE用
  writing-mode: vertical-rl;
}

See the Pen writing-mode1 by sayuri (@giraffeweb) on CodePen.0

で、上記のcodepenのような長い文章だと、段組設定を行う必要が出てきますよね？
イラレなどではツールにそういったものがあって、紙媒体ではよくする方法だと思います。

段組設定にする方法

段組みするのも簡単です。
文章を囲っているdivタグに次のcssを記述するだけです。

.tate_gaki {
  column-count: 2;
}

See the Pen writing-mode2 by sayuri (@giraffeweb) on CodePen.0

ここに線や余白を入れたい場合は…

.tate_gaki {
  column-count: 2;
　column-rule: solid 1px #ddd;
　column-gap: 40px;
}

とすれば次のように雑誌のようなレイアウトを組むことができます。column-gapで余白の調節ができるんですね！

See the Pen writing-mode3 by sayuri (@giraffeweb) on CodePen.0

で問題はレスポンシブです。

レスポンシブ対応させる方法

はたまたこれが簡単なんです！
やりかたとしてはwidth: 100vw;を追加するだけ！
上記の見栄えと変わって横にスクロールしなくてもちゃんと団落ちして文章が流れていっているのがわかると思います！
これ100％じゃだめなのでそこは気を付けてくださいね★

.tate_gaki {
  column-count: 2;
　column-rule: solid 1px #ddd;
　column-gap: 40px;
　width: 100vw;
}

See the Pen QZoxOZ by sayuri (@giraffeweb) on CodePen.0

みなさんもぜひ縦書きにトライしてみてくださいー！

• blog,
• code,
• css3