htmlで縦書きするCSSの生成

htmlで縦書きにデザインするにはCSSの「writing-mode」を使用します。また、縦書き時の英字向きは「text-orientation」そ使用します。
当ページでは簡単操作でCSS作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

「writing-mode:vertical-rl」の場合は「leftが上」「rightが下」となりますのでご注意ください。
また、リンクなどのアンダーライン「text-decoration」は「overlineが左」「underlineが右」となります。

<div class="str" id="makeImg">
  <p class="midashi">縦書き</p>
  <p>htmlで縦書きを行うにはCSSの「<a href="https://web-designer.cman.jp/css_ref/abc_list/writing-mode/">writing-mode</a>」を使用します。</p>
  <p>「日本語：あいう」「英数：123abc」「記号：+-*/[]」「特殊文字：&copy;&#8470;&#12849;」</p>
  <p class="ato">以上</p>
</div>

<style type="text/css">
.str {
  /*--- サンプル表示の枠 ---------------------------- */
  max-height      : 250px;
  background      : #fff;
  border          : 1px solid #999;
  padding         : 5px;
  margin          : 0 auto;
  font-weight     : normal;
  
  /* --- 文字情報設定 ------------------------------- */
  text-align      : left;         /* 文章を上詰め     */
  font-size       : 12pt;         /* 文字サイズ       */
  letter-spacing  : .1em;         /* 文字間隔         */
  line-height     : 1.3;          /* 行間隔（1行高さ）*/
  -ms-writing-mode: tb-rl;        /* 縦書き（IE用）   */
  writing-mode    : vertical-rl;  /* 縦書き           */
}
 /* --- 段落の先頭は1文字下げ ----------------------- */
.str p {
  text-indent: 1em;
}
 /* --- 見出しは文字を大きく中央に表示 -------------- */
.str .midashi {
  text-indent     : 0;
  font-size       : 120%;
  text-align      : center;
  font-weight     : bold;
}
 /* --- 見出しは文字を大きく中央に表示 -------------- */
.str .ato {
  text-align      : right;
}
 /* --- 見出しは文字を大きく中央に表示 -------------- */
.str a {
  text-decoration : overline;   /* 縦書きは左側となる */
}
</style>