CSS縦書き解説｜writing-modeとtext-orientationでレイアウトを整える（デモ付き）

<div class="box">
  <p class="text">このテキストは<br>縦書き表示のテスト用です。<br>文章の流れが上から下に変わると、<br>いつもと違った印象になります。</p>
</div>

.box {
  display: flex;
  justify-content: center;
  border-radius: 8px;
  background: #f9e8ed;
}

@media (min-width: 552px) {
  .box {
    padding: 40px 0;
  }
}

@media (max-width: 551px) {
  .box {
    padding: 30px 0;
  }
}

.text {
  writing-mode: vertical-rl;
  color: #c11a51;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

@media (min-width: 552px) {
  .text {
    font-size: 30px;
  }
}

@media (max-width: 551px) {
  .text {
    font-size: 22px;
  }
}

<div class="box">
  <div class="column">
    <p class="text mixed">MIXEDを適用した<br class="only-pc">縦書き表示のテスト用です。<br>XYZや123の表示にも注目です。</p>
  </div>
  <div class="column">
    <p class="text upright">UPRIGHTを適用した<br class="only-pc">縦書き表示のテスト用です。<br>XYZや123の表示にも注目です。</p>
  </div>
  <div class="column">
    <p class="text sideways">SIDEWAYSを適用した<br class="only-pc">縦書き表示のテスト用です。<br>XYZや123の表示にも注目です。</p>
  </div>
</div>

.box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  border-radius: 8px;
  background: #f9e8ed;
}

@media (min-width: 552px) {
  .box {
    padding: 40px;
  }
}

@media (max-width: 551px) {
  .box {
    padding: 30px;
  }
}

@media (max-width: 551px) {
  .box br.only-pc {
    display: none;
  }
}

.column {
  flex: 1;
  display: flex;
  justify-content: center;
}

.text {
  writing-mode: vertical-rl;
  color: #c11a51;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

@media (min-width: 552px) {
  .text {
    font-size: 30px;
  }
}

@media (max-width: 551px) {
  .text {
    font-size: 22px;
  }
}

.text.mixed {
  text-orientation: mixed;
}

.text.upright {
  text-orientation: upright;
}

.text.sideways {
  text-orientation: sideways;
}

<div class="wrapper">
  <div class="box">
    <p class="text">このテキストは<br>縦書き表示のテスト用です。<br>いつもと違った印象になります。</p>
  </div>
  <div class="box">
    <p class="text">これは表示サンプル用です。</p>
  </div>
  <div class="box">
    <p class="text">この文章はダミーであり、<br>内容に意味はありません。</p>
  </div>
</div>

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

@media (min-width: 552px) {
  .wrapper {
    gap: 40px;
  }
}

@media (max-width: 551px) {
  .wrapper {
    gap: 20px;
  }
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  background: #f9e8ed;
}

@media (min-width: 552px) {
  .box {
    padding: 40px 0;
  }
}

@media (max-width: 551px) {
  .box {
    padding: 30px 0;
  }
}

.text {
  writing-mode: vertical-rl;
  color: #c11a51;
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 552px) {
  .text {
    font-size: 30px;
    line-height: 1.5;
  }
}

@media (max-width: 551px) {
  .text {
    font-size: 22px;
    line-height: 1.3;
  }
}

<div class="wrapper">
  <div class="box">
    <p class="text">縦書き表示のテスト用</p>
  </div>
  <div class="box">
    <p class="text">表示サンプル用</p>
  </div>
  <div class="box">
    <p class="text">ダミーテキスト</p>
  </div>
</div>

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

@media (min-width: 552px) {
  .wrapper {
    gap: 40px;
    height: 500px;
  }
}

@media (max-width: 551px) {
  .wrapper {
    gap: 20px;
    height: 400px;
  }
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #f9e8ed;
}

.text {
  writing-mode: vertical-rl;
  color: #c11a51;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

@media (min-width: 552px) {
  .text {
    font-size: 30px;
    letter-spacing: 10px;
  }
}

@media (max-width: 551px) {
  .text {
    font-size: 22px;
    letter-spacing: 5px;
  }
}