CSSで縦書きでレイアウトを作りたい

多くのWebサイトでは、横書きのレイアウトで作られていますが、和を意識したWebサイトなどでは欧文にはない、和文独特の縦書きで表現したい場合もあります。その場合は、縦書きの画像を用意したり、Javascriptを使ったりして表現したりしていましたが、最近の主要ブラウザでは、CSS3を使って縦書きを表現することができるようになっているので、手軽にテキストを縦に変更してデザインすることができるようになっています。

CSSでテキストを縦に変更する

スタイルシートを使ってテキストを縦書きにするには、「writing-mode」というプロパティを使います。

.text-jp {
  writing-mode: vertical-rl;
}

値を「vertical-rl」とすることで、テキストを縦に変更することができます。また、和文の中に欧文(英数字)が含まれている場合の表示の仕方は、「text-orientation」というプロパティで制御することができます。

/* 和文も欧文も縦書きの場合 */
.text-jp {
  text-orientation: upright;
}

/* 和文は縦書き、欧文は横書きの場合 */
.text-jp {
  text-orientation: mixed;
}

/* 和文も欧文も横書きの場合 */
.text-jp {
  text-orientation: sideways;
}

左から右へ読ませる横書きのレイアウトとは違い、右から左へ読ませる縦書きのレイアウトは、普段から見慣れているレイアウトに変化を付けることができたりして試してみたいデザインの1つではないでしょうか。Webフォントも充実してきているので、画像ではなくテキストでも幅広い表現ができると思います。

その他の記事
CSSのみで作る見出しデザイン
Bootstrapのナビゲーションスタイル
Illustratorでイルミネーション風の文字を作る方法
Photoshopでクッキーのような質感をした文字を作る
超簡単!Photoshopで水面を表現

TOP