CSSで縦書きテキストを作成する

垂直テキストのCSSクロスブラウザ実装

HTML

<div class="vertical-text">
  垂直テキスト
</div>

CSS

.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
  transform-origin: top left;
}

解説

1. writing-mode: vertical-lr;

   • 縦書きモードを設定します。
   • vertical-lrは、左から右への縦書きを指定します。

2. transform: rotate(-90deg);

   • テキストを90度反時計回りに回転させます。

3. transform-origin: top left;

   • 回転の基準点を左上に設定します。

クロスブラウザ対応

• 古いブラウザでは、-webkit-, -moz-などのベンダープレフィックスが必要な場合があります。
• ほとんどのモダンブラウザでサポートされています。

例

.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
  transform-origin: top left;
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
}

注意

• 複雑なレイアウトや特定のフォントでは、予期しない挙動が発生する場合があります。
• 垂直テキストのレイアウトやフォントの扱いには注意が必要です。

• クロスブラウザ対応については、最新のブラウザサポート状況を確認することをおすすめします。
• transformプロパティは、他にも様々な変換効果が可能です。
• writing-modeプロパティは、他にもvertical-rl（右から左への縦書き）やhorizontal-tb（水平方向の横書き）などがあります。

CSSで縦書きテキストを作成する際のコード例解説

コード例とその解説

.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
  transform-origin: top left;
}

このコードは、ある要素（この例では.vertical-textというクラス名を持つ要素）に適用すると、その要素内のテキストを縦書きにするためのCSSです。

• • このプロパティは、変形（この場合は回転）の中心となる点を指定します。
  • top leftは、要素の左上隅を回転の中心にすることを意味します。
• • このプロパティは、要素を回転させるためのものです。
  • rotate(-90deg)は、要素を時計回りに90度回転させることを意味します。これにより、横書きのテキストが縦書きの向きに回転されます。
• • このプロパティは、テキストの書き順を指定します。
  • vertical-lrは、「縦書きで、左から右へ」という意味です。つまり、テキストが上から下に並べられ、各行は左から右へ読むように配置されます。

クロスブラウザ対応について

.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
  transform-origin: top left;
  -webkit-writing-mode: vertical-lr;
  -moz-writing-mode: vertical-lr;
}

このコードは、古いブラウザでも正しく表示されるように、ベンダープレフィックスを付加したものです。

• -moz-writing-mode: vertical-lr;
  • Firefoxに対応するための記述です。
• -webkit-writing-mode: vertical-lr;
  • SafariなどのWebKit系ブラウザに対応するための記述です。

注意点

• 複雑なレイアウト
  複雑なレイアウトでは、JavaScriptなどを併用して調整が必要になることがあります。
• レイアウト
  縦書きのテキストを他の要素と組み合わせてレイアウトする場合、ブラウザによって表示が異なる場合があります。
• フォント
  一部のフォントでは、縦書き表示が意図したとおりにならない場合があります。

• text-combine-upright
  数字やアルファベットを縦書きにしたときに、一文字ずつ縦に並べるか、横に並べるかを指定できます。
• text-orientation
  縦書きテキストの文字の向きを調整できます。

より詳細な情報

より詳細な情報や、他のCSSプロパティの使い方については、MDN Web Docsなどのリファレンスサイトをご参照ください。

CSSで縦書きテキストを作成する代替方法

SVGを利用した方法

SVG (Scalable Vector Graphics) を利用することで、より柔軟に縦書きテキストを表現できます。

<svg width="100" height="100">
  <text x="50" y="50" transform="rotate(-90 50 50)">縦書きテキスト</text>
</svg>

• デメリット
  
  • HTML構造が複雑になる可能性がある
  • SVGをサポートしていないブラウザでは表示されない
• メリット
  
  • CSSよりも詳細な制御が可能
  • アニメーションとの組み合わせがしやすい

Flexboxを利用した方法

Flexboxを利用することで、要素の配置を柔軟に変更し、縦書きを実現できます。

.vertical-text {
  display: flex;
  flex-direction: column;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

• デメリット
  
• メリット
  
  • CSSだけで実装可能
  • レイアウトの自由度が高い

JavaScriptを利用した方法

JavaScriptでDOM操作を行い、要素のスタイルを動的に変更することで、縦書きテキストを実現できます。

const textElement = document.getElementById('vertical-text');
textElement.style.writingMode = 'vertical-lr';
textElement.style.transform = 'rotate(-90deg)';

• デメリット
  
  • コード量が増える
  • JavaScriptの知識が必要
• メリット
  

CSS Gridを利用した方法

CSS Gridを利用することで、グリッド状に要素を配置し、縦書きを実現できます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: column;
}

• デメリット
  
  • CSS Gridの理解が必要
• メリット
  
  • 2次元的なレイアウトが容易
  • 複雑なレイアウトにも対応可能

どの方法を選ぶべきか？

• 複雑なレイアウト
  FlexboxやCSS Gridを使うと効率的にレイアウトできる
• 高度なデザインやアニメーション
  SVGやJavaScriptを使うと自由度が高い
• シンプルで一般的な縦書き
  CSSのwriting-modeとtransformを使う方法が簡単

選択のポイント

• パフォーマンス
  大量の要素を扱う場合は、パフォーマンスに影響が出ないよう注意する
• デザインの複雑さ
  シンプルなデザインであればCSSだけで十分、複雑なデザインであればJavaScriptやSVGを検討
• ブラウザのサポート状況
  古いブラウザのサポートが必要な場合は、SVGは避ける

CSSで縦書きテキストを作成する方法には、様々な選択肢があります。それぞれの方法にはメリットとデメリットがあり、プロジェクトの要件に合わせて最適な方法を選択することが重要です。

• アクセシビリティ
  縦書きテキストがスクリーンリーダーなどで正しく読み上げられるように、適切なARIA属性などを設定する
• ブラウザの互換性
  常に最新のブラウザのサポート状況を確認し、必要に応じてベンダープレフィックスなどを付加する