文字を縦書きにする

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

ごく稀に使う機会のある「縦書き」のためのCSSです。
日本らしさや「和」を表現したい時などにどうぞ。

CSSの解説

<div class="vertical-text">
ここに縦書きテキスト
</div>

.vertical-text{
  writing-mode: vertical-rl; /*縦書きにする*/
  line-height: 1.6; /*行間調整用*/
}

縦書きにするには、CSSで "writing-mode: vertical-rl" を指定するだけです。

1行当たりの文字数を増やしたい場合は要素の高さ (height) を調整。
行が狭く感じる・ルビを振りたいといった場合は、line-heightを使って行間を調整しましょう。（縦書きの場合は line-height が1行あたりの "横幅" になります）

ちなみに<ruby>タグを使ったルビが上じゃなく右に付いたり、text-alignの向きが90度動いていたりするので、取り扱いには十分注意しましょう。
縦書きの細かいレイアウト調整はこちらが参考になります → CSSで縦書きレイアウトを導入してみた

併せて使いたいCSS

縦書き表現を行うなら最低限抑えておきたいCSSを2つ紹介します。

リンクの線を削除 (text-decoration: none)

上記のサンプルで気づいた方も多いでしょうが、縦書きの場合はリンクの下線が横線になります。

文中に横線が入ると読みにくくなるため、リンクにtext-decoration: noneを指定して下線（横線）を削除しましょう。また、明朝体を使う場合は太字の薄い色などに変えるのもおすすめです。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

(追記するCSS)

/*** リンク部分 ***/
.vertical-text a{
  text-decoration: none; /*下線削除*/
  color: rgba(0,0,0,65%); /*色変更（好みで）*/
  font-weight: bold; /*太さ変更（好みで）*/
}

英数字の向きを変える (text-orientation: upright)

標準時の英数字は横向きになっていますが、text-orientation: uprightを指定すれば日本語と同じように縦向きにすることが可能です。ただし、その分高さを消費します。

どちらが見やすいかは人によるところが大きいので、好みに合わせて使い分けてください。
一応他にも値があります→ text-orientationの詳細

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

(追記するCSS)

.vertical-text{
  text-orientation: upright; /*英数字を縦に*/
}

応用CSS

グリッド背景 ＋ 縦書き

疑似要素 (::before) を使ってグリッド（方眼紙）背景を設置した縦書きです。

文字に合わせて升を作るのは難しいので、升は大きめにしてごまかすのが良いでしょう。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

紙面 + 縦書き

疑似要素 (::beforeと::after) で背面にも紙を置いた縦書き。

背面の紙（疑似要素）はtransform: rotate()で角度を付けるのがポイントです。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.