Web制作で役立つメモをWEB MEMO LOG

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

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。