縦書きテキスト生成

CSSのwriting-modeを使った縦書きHTMLコードを自動生成します。フォントサイズ・行送り・縦書き方向を調整してリアルタイムプレビュー確認できます。

テキスト

文字サイズ24px

行送り2

方向

プレビュー

縦書きの
テキストを
表示します

HTML

<div style="writing-mode: vertical-rl; text-orientation: mixed; font-size: 24px; line-height: 2; padding: 16px; display: inline-block; white-space: pre-wrap;">縦書きの
テキストを
表示します</div>

CSS

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 24px;
  line-height: 2;
  white-space: pre-wrap;
}

使い方

STEP 1
縦書きにしたいテキストを入力します（Enterで改行も可能）。
STEP 2
フォントサイズ・行送り・縦書き方向をスライダーやボタンで調整します。
STEP 3
HTMLコードタブでコードを確認し、コピーしてサイトに貼り付けてください。

writing-modeはモダンブラウザ（Chrome/Firefox/Safari/Edge）で対応しています。InternetExplorerは非対応です。
英数字の縦向きはtext-orientation: sidewaysで調整できます（コードを手動で修正してください）。

活用のヒント

年賀状・招待状のデザインに縦書きレイアウトを取り入れることができます。

「右→左」は日本語の伝統的な縦書き方向です。複数列の場合は右から左に流れます。

行送り（line-height）を1.5〜2にすると読みやすい縦書きレイアウトになります。

よくある質問

Q1
英語テキストを縦書きにした場合、横向きになりますか？
text-orientation: mixedの場合、ASCII文字は90度回転して縦に配置されます。英語を正立させるにはupright指定が必要です。
Q2
Word・PowerPointで縦書きにする方法と何が違いますか？
どちらもCSSのwriting-modeと同じ原理ですが、このツールはWebで直接使えるHTMLコードを生成します。
Q3
行の折り返しを制御できますか？
white-spaceやwidth・max-heightで制御できます。生成されたCSSを必要に応じてカスタマイズしてください。