文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 縦書き

htmlで縦書きするCSSの生成

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

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

縦書きを調整してみよう

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

文字サイズ
リンクのアンダーライン
間隔
文字間隔
行間隔

縦書き

htmlで縦書きを行うにはCSSの「writing-mode」を使用します。

「日本語:あいう」「英数:123abc」「記号:+-*/[]」「特殊文字:©№㈱」

以上

使用したhtml
<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>
生成したCSS
<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>
ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン