WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

くりりん

2018/04/19

和風なサイトにぴったり!CSSによる縦書き文字の表現方法

投稿者: くりりん
カテゴリー: マークアップ >CSS

最近、和風なサイトでよく見かける「縦書き文字」。普段は横書きに見慣れているので、サイトの雰囲気ががらっと変わりますね。
今回は、CSSによる「縦書き文字」の表現方法を紹介します。

縦書きにするには?

縦書きにするには下記の記述を縦書きにしたいテキストへCSSとして記述します。
下記の書き方だと、bodyに対して記述しているのでページ全体のテキストが縦書きになります。

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;
  writing-mode: vertical-rl;
}

ここで気になるのは、和文は縦、英数字は横に表示されています。
ここは微調整が必要になってきます。text-orientationというプロパティを使います。

テキストの表示方向の調整

文字の表示方向は、デフォルでは「text-orientation: mixed」になっています。
全て縦方向にするには、「text-orientation: upright;」
全て横方向にするには、「text-orientation: sideways」と使い分けができます。
Safari用には-webkit- ベンダープレフィックスが必要です。
※IE, Edgeは未対応です

先ほどの記述に、全て縦方向に揃える「text-orientation: upright;」を記述する事で、下記のように綺麗に揃いました。

body{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
 text-orientation: upright;
}

英数字の縦中横調整

では次に、「4月17日」と書かれた数字部分の調整です。
英数字や記号などを1文字分の幅として表示する縦中横と呼ばれる組み方はtext-combine-uprightというプロパティを使用します。
このプロパティは、縦書きモードでのみ効果があります。

1文字分に当てはめたい部分にspanタグなどで囲み、spanタグに対してtext-combine-uprightプロパティを使用したクラス名を付与します。

またここでもブラウザによって指定方法が異なるのでベンダープレフィックスを記述しましょう。

  • 通常・・・text-combine-upright: all;
  • Safari・・・-webkit-text-combine: horizontal;
  • IE・・・-ms-text-combine-horizontal: all;

・HTML

<span class="text-combine">4</span>月<span class="text-combine">17</span>日

・CSS

body{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  }

.combine {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

数字部分が1文字分に収まりました!これで縦書きの表現の完成です。
フォントを明朝などにしたら、より和風感も増します。源ノ明朝フォントを使用してみました。

サイトの雰囲気に合わせて、縦書き表現をぜひ活用してみてください。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ