開発 2024.03.05

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

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

1 writing-mode プロパティを使う
2 text-orientation プロパティを使う
3 縦書きレイアウトの調整
4 例
5 まとめ

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

例

1. 基本的な縦書き

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縦書きの例</title>
    <style>
        .vertical-text {
            writing-mode: vertical-rl;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        これは縦書きのテキストです。日本語の縦書きは、このように書かれます。
    </div>
</body>
</html>

2. 縦書きの見出し

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縦書きの見出し</title>
    <style>
        h1.vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1 class="vertical">縦書き見出し</h1>
    <p>以下は通常のテキストです。</p>
</body>
</html>

3. 縦書きの段落と横書きの組み合わせ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縦書きと横書きの組み合わせ</title>
    <style>
        .vertical-text {
            writing-mode: vertical-rl;
            border: 1px solid black;
            padding: 10px;
            width: 100px;
        }
        .horizontal-text {
            writing-mode: horizontal-tb;
            border: 1px solid black;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        これは縦書きの段落です。日本語の縦書きは、右から左に進みます。
    </div>
    <div class="horizontal-text">
        これは横書きの段落です。日本語の横書きは、左から右に進みます。
    </div>
</body>
</html>