2024.06.17

【CSS】文字を縦書きにする（数字や英字も）

CSSで数字や英字も含めて文字を縦書きにする方法

1.文字のみ縦書き（数字・英字を含めない）

.vertical-text {
  writing-mode: vertical-rl; /* 右から左の縦書き */
}

縦書きの例（Vertical Text Example）
Numbers and English Letters: 123abc

2.数字・英字を含めて文字の縦書き

.vertical-text {
  writing-mode: vertical-rl; /* 右から左の縦書き */
  text-orientation: upright; /* テキストを直立させる */
}

縦書きの例（Vertical Text Example）
Numbers and English Letters: 123abc

3.中央寄せの縦書き文字（数字・英字を含める）

.vertical-text {
  display: flex;
  align-items: center; /* 垂直方向（列の方向）の中央寄せ */
  writing-mode: vertical-rl; /* 右から左の縦書き */
  text-orientation: upright; /* テキストを直立させる */
}

縦書きの例（Vertical Text Example）
Numbers and English Letters: 123abc

＃CSS
＃縦書き