HTML STUDY
>
>

文章を縦書きで表示する

ここではCSSプロパティwriting-modeで文章を縦書きにする方法を解説していきます。縦書きに対応していないブラウザもありますので、使用の際は注意しましょう。

writing-mode

CSSプロパティwriting-modeにtb-rlの値を与えることによって文章を縦書きに表示させることができます。ただし、Operaなどのブラウザではこの表示に対応していません。現在のところ、IE、Chrome、Safariが縦書きに対応しているようです。縦書きに設定すると横書きに比べてせまい幅になります。縦書きに対応していないブラウザのことも考えてデザインする必要があるかと思いますので注意して使用してください。

要素解説
<p>ひと段落
CSSプロパティ解説
writing-mode縦書き

HTMLコード記述例

<p class="writing-sample">縦書きで文章を設定しています。ひと段落の高さを設定して見やすく次の行へと移動させています。中々パソコンで縦書きの文章を見ることはないので新鮮な感じではありますが。このCSSに対応していないブラウザもあるようなので注意してください。</p>

外部ファイルCSS記述例

@charset "utf-8";

p.writing-sample {
 height: 200px;
 writing-mode: tb-rl;
}

ブラウザ表示例

縦書きで文章を設定しています。ひと段落の高さを設定して見やすく次の行へと移動させています。中々パソコンで縦書きの文章を見ることはないので新鮮な感じではありますが。このCSSに対応していないブラウザもあるようなので注意してください。

CSS文字 関連記事