スライドショー

【CSS入門】テキストを縦書きにする方法やレイアウトの指定方法

この記事ではCSSで縦書きをする方法について解説します!Webサイトで縦書きを見る機会はあまりありませんが、CSSを使えば縦書きをすることが出来ます。

Webサイトに縦書きを組み込みたい。

といった方に向けてこの記事では、

  • CSSを使って縦書きをする方法
  • 縦書きのときの文字の向きを指定する方法

について解説していきます。

CSSで縦書きをする方法

Webサイトの構成は基本的には横書きですが、CSSを使うと縦書きに設定することも出来ます。縦書きをするためには、writing-modeとtext-orientationを主に設定する必要があります。

writing-modeでは水平方向と垂直方向、また右から左にコンテンツが流れていくのか、左から右にコンテンツが流れていくのかを設定することが出来ます。

またtext-orientationでは文字を90度回転させるかどうかを設定することが出来ます。それではこれらのプロパティについて見ていきましょう。

「writing-mode」で縦書きを指定しよう

それでは早速縦書きの設定をCSSで書いてみましょう。こちらのコードをご覧ください。

<style>
    .vertical {
        writing-mode: vertical-rl;
    }
</style>
     
<body>
    <p class="vertical">aaaaa   AAAAA   あああああ   亜亜亜亜亜</p>
</body>

実行結果

こちらのコードではwriting-modeをvertical(垂直)かつ日本語の標準的なレイアウトのrl(右rightから左leftに文章が流れていく)に設定しました。ちなみに、writing-modeでは主にこのような設定をすることが出来ます。

horizontal-tb横書き、かつ上から下に行が流れる。
vertical-rl縦書き、かつ右から左に行が流れる。
vertical-lr縦書き、かつ左から右に行が流れる。

この縦書きで使われるwriting-modeはブラウザごとに挙動が変わったり、デフォルトの位置が変わってしまう場合がよくあります。

次は位置の指定方法について見ていきましょう!

見やすいように右詰めのレイアウトを作ろう

先程のままではブラウザごとにレイアウトが変わったままで、読みづらい場合があるかもしれません。なので、先程のコードを次はこのように変えてみましょう。

<style>
    .textbox {
        position: absolute;
        right: 0;
    }
    .vertical {
        writing-mode: vertical-rl;
    }
</style>
     
<body>
    <div class="textbox">
        <p class="vertical">aaaaa   AAAAA   あああああ   亜亜亜亜亜</p>
    </div>
</body>

実行結果

このコードではdivタグで先程の本文が入ったpタグを囲みました。このdivタグに、positionをabsoluteにしてrightを0を設定すると、右詰めにすることが出来ます。

このrightの0をpxや%で指定したり、marginを使うことで好みの配置にすることが出来ます。このように、writing-modeをvertical-rlにしても、配置などは自分で設定する必要があります。

必要な部分はそれぞれレイアウトを変えて、見栄えの良い縦書きレイアウトを作っていきましょう。

「text-orientation」で文字の向きを指定しよう

先程縦書きにした文章は大文字、小文字の英語とひらがな、漢字を使いました。それでも全ての文字は縦書きにはなっていませんでしたね。

ここではtext-orientationを適用してすべての文字を縦書きにしてみましょう。こちらのコードをご覧ください。

<style>
    .textbox {
        position: absolute;
        right: 50%;
    }
    .vertical {
        writing-mode: vertical-rl;
        text-orientation: upright;
    }
</style>
     
<body>
    <div class="textbox">
        <p class="vertical">aaaaa   AAAAA   あああああ   亜亜亜亜亜</p>
    </div>
</body>

実行結果

こちらは分かりやすいように中央寄せにしています。text-orientationをuprightに指定すると、すべての文字を縦書きにすることが出来ます。

初期値はmixeという値が割り当てられていて、日本語は縦に、英語は横に、その他の記号はそれぞれ適切な向きに自動的に設定されます。

もし個別に設定したい文字がある場合は、全体にmixedを割り当てた上で、spanタグで個別に設定したい文字を囲むと良いでしょう。

<style>
    .textbox {
        position: absolute;
        right: 50%;
    }
    .vertical {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .vertical__part {
        text-orientation: upright;
    }
</style>
     
<body>
    <div class="textbox">
        <p class="vertical">aaaaa   <span class="vertical__part">AAAAA</span>   あああああ   亜亜亜亜亜</p>
    </div>
</body>

実行結果

縦書きで箇条書きをする方法

縦書きに変わって今まで横書きのときに使っていたタグは使えるのか不安に思う人もいるかもしれません。これらのタグは通常と同じように使うことが出来ます。こちらのコードをご覧ください。

<style>
    .textbox {
        position: absolute;
        right: 50%;
        writing-mode: vertical-rl;
    }
    .vertical {
        text-orientation: mixed;
    }
    .vertical__part {
        text-orientation: upright;
    }
</style>
     
<body>
    <div class="textbox">
        <p class="vertical">aaaaa   <span class="vertical__part">AAAAA</span>   あああああ   亜亜亜亜亜</p>
        <ul>
            <li>あああああああああああああああ</li>
            <li>ああああああああああ</li>
        </ul>

        <ol>
            <li>あああああああああああああああ</li>
            <li>ああああああああああ</li>
        </ol>
    </div>
</body>

実行結果

表示されたように、同じように縦書きでも箇条書きをすることが出来ましたね。ただ今回紹介したタグ以外にも縦書きに対応していないタグはまだあるのが現状です。

実際に使うことが出来るのかどうかをブラウザごとに確認をする必要があるので気をつけましょう。

まとめ

今回の記事ではCSSで縦書きをする方法について解説をしてきました。縦書きをする方法については分かって頂けたでしょうか?

横書きのレイアウトとは勝手が少し違う部分があるので慣れるのに時間はかかるかもしれませんが、適切な部分で使うことで目を惹くレイアウトを作ることが出来ます。CSSで縦書きをしたい方は、ぜひこの記事を参考にしてみてください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説