開発

CSS 日本語のサイトに使いたい、縦書き文章の実装方法

みんなの簡素を教えてね!
  • すごい! (0)
  • やってみようと思う! (0)

サイト制作にあたって、日本的な文章の書き方「縦書き」を取り入れたいと思ったことはありませんか?
この記事では、ウェブページで縦書きレイアウトを実現したい場合のCSSを紹介します。

writing-mode プロパティを使う

writing-mode プロパティは、テキストの書き方向を指定するプロパティです。
このプロパティを使うことで、簡単に縦書きレイアウトを実現できます。

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

このCSSを適用してみると、下のように表示されます。
(わかりやすいようにbackground-colorとpaddingも設定しています。)

縦書き
123
abc

上記コードは、.vertical クラスの要素内のテキストを右から左に縦書きに表示します。
ただ、数字やアルファベットを見てみると、文字の向きがそろっていないことがわかります。

text-orientation プロパティを使う

text-orientation プロパティは、文字の向きを指定するプロパティです。
このプロパティを使うことで、縦書きレイアウト時に文字を横向きに表示できます。

.vertical {
        writing-mode: vertical-rl;
        text-orientation: upright;
        }

このCSSを適用してみると、下のように表示されます。

縦書き
123
abc

上記コードは、.vertical クラスの要素内のテキストを右から左に縦書きに表示し、文字は横向きに表示します。
このプロパティを使うことで、数字やアルファベットの向きを日本語にそろえることができます。

縦書きレイアウトの調整

横書きの文章と同様に、行間(line-height)や文字揃え(text-aligin)、余白(marginやpaddingなど)を用いて、縦書きにした文章を読みやすくするための調整ができます。
ただし、縦書きではtext-align:left;が上揃え(下図左)、text-align:right;が下揃え(下図右)になりますから、ご注意ください。

縦書きで左揃え
123
abc

縦書きで右揃え
123
abc

まとめ

CSSで縦書きレイアウトを実現するには、いくつかの方法があります。
日本語のウェブサイトでは、縦書きレイアウトも重要な表現方法の一つですから、必要に応じて活用しましょう

ただし、縦書きレイアウトは、すべてのブラウザでサポートされているわけではなく、複雑なレイアウトを実現する場合、難易度が高くなります。
それぞれの方法のメリットとデメリットを理解して、目的に合った方法を選びましょう。

アバター画像

インターン実習生

こんにちは!合同会社グローワークスのインターン生です。ITとデザインが大好きで、皆さんと一緒に創造的なプロジェクトを進めていくことにワクワクしています!