ミラクルタウン

ホームページ作成のプチテクニック!!
Web制作の便利な技を紹介しています♪

HOMEWebテクニックHPのプチテクニック

テキストを縦書きで表示したい

ホームページの文字はたいてい横書きですが、
国語の教科書のような縦書きで表示したい場合もありますよね。
小説サイトで使うとまるで本のような感じが出せそうです。
また、デザインとして一部だけ縦書きを使いたい場合もありそうです。

スタイルシートを使えば縦書きで表示できる方法があります。
ですが、Internet Explorer以外は縦書き表示に対応していないんです。

そこで、コンテンツの大半を縦書きにしたい場合には
スタイルシートをかけて、一部だけデザイン的に使う場合は
テキストの画像を作って画像で表示することをオススメします。

その01 IEのみ対応:layout-flow
スタイルシートで
p{layout-flow:vertical-ideographic;}
を指定します。

もしくは、
p{writing-mode:tb-rl;}
を指定します。
小説など、縦書きテキストが多いサイトは こっちの方法がオススメです。

その02 画像で出力
FirefoxSafariGoogleChromeなどのブラウザでは、
layout-flowやwriting-modeが効きません。
デザインとして縦書き文字を使用する場合は
グラフィックソフトのテキストを利用し画像で作成します。
せっかくのデザインが崩れてしまうともったいないですから。
画像で出力した方が確実です。

おまけ:
縦書きスタイルシートがあまりサポートされていないのは
やっぱり文字を縦書きにする国が少ないからなんでしょうか…。
参考サイト:
CSSにおける国際的レイアウト
HTMLクイックリファレンス-writing-mode-