CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのwriting-modeとtext-orientationで縦書きテキストを表示する方法

CSSでは、text-orientation: upright と writing-mode: vertical-rl を組み合わせて指定することで、文字を直立させたまま縦書きテキストを簡単に表示できます。日本語や中国語などの縦書きレイアウトを実現したい場合に非常に便利なプロパティです。

基本構文

CSSの writing-mode プロパティと text-orientation プロパティの構文は以下の通りです。

Selector {
   writing-mode: /*値*/
   text-orientation: /*値*/
}

各プロパティの役割

  • writing-mode: vertical-rl … テキストの流れを上から下へ、行は右から左へ配置します(伝統的な縦書きスタイル)。
  • text-orientation: upright … 縦書きモード内で英数字などの文字も回転させず、直立した状態で表示します。

サンプルコード1:単一要素の縦書き表示

次の例では、見出し要素に対して縦書きスタイルを適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h4 {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 3px khaki;
         }
      </style>
   </head>
   <body>
      <h4>Sed nec tortor</h4>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

CSSのwriting-modeとtext-orientationで縦書きテキストを表示する方法

文字が1つずつ直立した状態で、上から下へ向かって表示されているのが確認できます。line-height: 3 を指定することで、縦書きの列幅(行間)に余裕を持たせています。

サンプルコード2:複数の縦書き段落を並べる

次の例では、Flexboxを使って複数の縦書きテキストを横並びに配置しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            display: flex;
            flex: 1;
         }
         p {
            text-orientation: upright;
            writing-mode: vertical-rl;
            line-height: 3;
            box-shadow: inset 0 0 13px orange;
         }
      </style>
   </head>
   <body>
      <p>One</p>
      <p>Two</p>
      <p>Three</p>
      <p>Four</p>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

CSSのwriting-modeとtext-orientationで縦書きテキストを表示する方法

4つの段落が右から左の順で縦書き表示され、あたかも縦書きの書籍のようなレイアウトになります。Flexboxとの組み合わせにより、縦書きカラムを柔軟に配置できる点もポイントです。

まとめ

  • writing-mode: vertical-rl で縦書きの書字方向を指定できる。
  • text-orientation: upright を使うと、ラテン文字なども回転させずに直立表示できる。
  • line-height で縦書き時の列間隔を調整可能。
  • Flexboxなどと併用すれば、縦書きレイアウトを自由自在に組める。

縦書きデザインは和風サイトやポスター風のページで活躍します。ぜひこれらのプロパティを活用してみてください。

  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>