文字を縦書きにする方法とレイアウトなどCSS

縦書きにするには

縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します
この「vertical」が縦、「rl」が右から左（Right to Left）という意味です

また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝Top to Bottom, Right to Left）を指定すればOK

See the Pen 縦書き by ちいうさ (@zqnixpal-the-looper) on CodePen.

文字の表示方向

縦書きできればOKというものでもなく、あれこれ微調整が必要になるのが縦書きの難点。ひとつひとつ見ていきましょう。まずは文字の表示方向。これは text-orientation というプロパティを使います。デフォルトでは mixed で、和文は縦、英語は横に表示されます。英数字も縦に表示するなら upright、和文も横に表示するなら sideways を指定しましょう。

Safari用に -webkit- ベンダープレフィックスが必要です。※IE, Edge未対応

See the Pen 縦書き by ちいうさ (@zqnixpal-the-looper) on CodePen.

縦書きにひと工夫

リンクの線

See the Pen 縦書きにリンク by ちいうさ (@zqnixpal-the-looper) on CodePen.

振り仮名（ルビ）と字下げ

See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.