CSSで縦書きに挑戦する!

HTML/CSS/JavaScript HTML&CSS

今挑戦している模写コーディングで「縦書き」サイトを模写したので、基本的な部分をまとめておこうと思います。
これまでは、Webサイト=「横書き」みたいな感覚だったので、自分の中ではかなり新鮮でした。作ってみると「純日本風」って感じで、表現としても「いい感じ」と思いました。

まとめ(CSS 縦書き)

  • 縦書きにするプロパティ:writing-mode
  • 半角英数字も縦書きにする:text-orientation

いろいろと調整はほかにもありますが、まずは、基本となるこの二つについて書いていきます。

Step1 まず縦書きにしてみる

縦書きにするのはそんなに難しいことではありません。縦書きにしたい箇所にCSSで
   writing-mode: vertical-rl;
を記述します。
「vertical」が縦、「rl」が右から左(Right to Left)ということになります。
「lr」と書くと左から右書きの縦書きになります。

Step2 文字の方向を調整する

縦書きでは、全角文字はそのまま縦書きになるだけですが、半角文字は90度回転して表示されます。その場面場面の表現の中で、半角文字もそのままの向きで縦書きにしたり、全部90度回転させたいなどが出てくると思います。

そんな時に文字の表示方向を変更するには
   text-orientation: xxxxxx; (xxxxxxに下記のmixed,upright,sidewaysを記述)
を使います。

  • 初期値は mixed(和文は縦、英語は横に表示)
  • 英数字も縦に表示するなら upright
  • 和文も横に表示するなら sideways
縦書mixed
縦書upright
縦書sideways

上の例では電話番号の文字が、真ん中は半角文字、左端は全角文字になっています。文字の向きの違いがわかると思います。
あとは通常のCSSで余白やcenteringなどなどを記述していくことになりますが、横書きで想定している動きと異なることもあります(感覚的に気持ち悪い?)
これ以外にも関連するプロパティもあるので、自分の学習のタイミングでアップデートしていければと思います。
また、縦書きはブラウザによっては、見栄えが変わったり、「ベンダープレフィックス」の指定が必要などあるようなので、調べながらやった方が良さそうですね。

コメント

タイトルとURLをコピーしました