インターネット上の文章は、基本的に横書きになっていますが、スタイルシートを使うことで縦書きにすることも可能です。
新聞のようなコンテンツを作成したり、ユーザーにインパクトを与えたい時などに使用できます。
ただし、Internet Explorer5.5↑以外のブラウザでの表示が保証されないなどの問題がありますので、どうしても縦書きにしたい場合は、スタイルシートを使うより、テキストをGIF画像にした方がいいでしょう。

→ サンプル

この文章はサンプルです。
「本当にサンプルなんですか？サンプルなんですか？」
「サンプルに間違いありません。サンプルに間違いありません。」

この文章が縦書きになっていない人はIEをお使いください。
ブラウザといったらやっぱりインターネットエクスプローラですよね。
縦書きはうまくいかない可能性があるので注意してお使いください。あんまり使わない方がいいです。
サンプル終了します。

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>
<DIV class="vertical">
ここに縦書きにしたい文章を書きます。
</DIV>
</BODY>
</HTML>

解説・注意点など

writing-mode: tb-rl;で文章を縦書きにしています。
direction: ltr;左から右にテキストを流しています。

スタイルシートについて、詳しくはこちらをご覧ください。

← Webデザインテクニックに戻る

eWeb