【CSS】テキストを縦書きに(サンプル付き)

ウェブ制作技術

この記事はこんな人に向けて書いています

  • Webデザイナー
  • コーダー/マークアップエンジニア

おはようございます、ヒグチです。

とつぜんですが、ウェブサイトの文章は、横書きが基本です。

が、日本人ならば、縦書きにしたい時もありますよね。

今回は、スタイルシートのテクニックを紹介します。
テクニックといっても、とても単純です。

それでは行ってみましょう!

縦書きの文章

writing-mode

CSSでテキストを縦書きにするには、writing-modeというプロパティを使います。

サンプルをご覧ください。

See the Pen CSSで縦書き by daisukehiguchi (@daisukehiguchi) on CodePen.

※村上春樹『スプートニクの恋人』より

writing-mode : vertical-rl と指定することで、縦書きにできます。

vertical-rlの「rl」は、「右から左に」という意味です。
左から右に読ませたい場合は、「vertical-lr」となります。

writing-modeのデフォルトは、「horizontal-tb」で、これは通常の横書きになります。
上記例では、「22」という数字をspanでマークアップし、ここのみwriting-mode : horizontal-tb を指定することで、横書きに戻しています。

なお、writing-modeのブラウザ対応状況は下記から確認できます。

【writing-mode対応状況】
Can I use?


以上、簡単ではありますが、CSSでテキストを縦書きにする方法を紹介しました。
日本独自の発展を遂げた、縦書きのかっこいいサイトが増えるといいですね〜

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。