CSSで文字を縦書きにする方法とサンプル集｜writing-modeの使い方

<div class="vertical-text-basic">
<h2>縦書きの見出し</h2>
<p>これは縦書きで表示される日本語のテキストです。昔ながらの書籍のように、右から左に向かって文字が配置されます。</p>
</div>
<style>
.vertical-text-basic {
  writing-mode: vertical-rl;
  height: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #fafafa;
}

.vertical-text-basic h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.vertical-text-basic p {
  line-height: 1.8;
  font-size: 16px;
  color: #666;
}
</style>

<div class="orientation-samples">
<div class="sample mixed">
  <h3>mixed（デフォルト）</h3>
  <p>Today is 2025年7月13日です。ABC123の表示確認。</p>
</div>
<div class="sample upright">
  <h3>upright</h3>
  <p>Today is 2025年7月13日です。ABC123の表示確認。</p>
</div>
</div>

<style>
.orientation-samples {
  display: flex;
  gap: 30px;
  height: auto;
}

.sample {
  writing-mode: vertical-rl;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  width: auto;
}

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

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

.sample h3 {
  font-size: 14px;
  margin-bottom: 15px;
  color: #333;
}

.sample p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}
</style>

<article class="vertical-article">
<header class="article-header">
  <h1 class="title">日本の四季</h1>
  <p class="subtitle">季節の移ろいと文化</p>
</header>

<div class="article-content">
  <p>日本には美しい四季があります。春の桜、夏の緑陰、秋の紅葉、冬の雪景色。それぞれが独特の風情を持ち、私たちの心を豊かにしてくれます。</p>

  <p>特に春の桜は、日本人にとって特別な意味を持つ花です。その短い開花期間に、人々は花見を楽しみ、新しい季節の始まりを祝います。</p>
</div>
</article>
<style>
.vertical-article {
  writing-mode: vertical-rl;
  height: 400px;
  padding: 30px;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-radius: 8px;
  font-family: 'Yu Mincho', serif;
}

.article-header {
  margin-bottom: 40px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
}

.subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 0;
}

.article-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #34495e;
  margin-bottom: 25px;
}

.article-content p:last-child {
  margin-bottom: 0;
}
</style>