テキストを縦書きにして表示


テキスト（文章）を縦書きにして表示したいという場合があります。

これを実現するためには『<PRE></PRE>というタグで囲んで、思ったようなレイアウトにする方法』もできますが、『スタイルシート』を用いて、次のように記述する ことによって実現できます。
但し、MSIEのみ表示可能な機能です。

以下の部分を<head>～</head>の中に記述して下さい。
<style type="text/css">
<!--div.param1 {writing-mode:設定値;}
-->
</style>

『writing-mode:』の次（つまり、設定値の部分）には下のように指定します。

表記法 説　　　　　　明
rｌ-tb 横書きで表示
tb-rl 縦書きで表示

縦書きにしたい部分を<div class="param1">～</div>の中に記述します。

param1は適当に付けたクラス名です。
上述の『<!--div.param1 {writing-mode:設定値;}-->』の設定で、記述したクラス名（div.の次の部分）と一致させます。
もし、設定値に『tb-rl』を記述してあれば、これにより、param1というクラス名の付けられたdivタグを用い、このdivタグで囲まれた中の文字は縦書きになります。

次の例では

<div class="param1">

雨ニモマケズ

宮沢　賢治

雨ニモマケズ
風ニモマケズ

・・・・

サウイフモノニ
ワタシハナリタイ

</div>

と記述しています。

実際の表示のされ方は次の通りです。
MSIE(Microsoft Internet Explorer)固有の機能なので、MSIEならば縦書きに表示されます。

　雨ニモマケズ

宮沢　賢治

雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲモチ
慾ハナク
決シテ瞋ラズ
イツモシヅカニワラッテヰル
一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジョウニ入レズニ
ヨクミキキシワカリ
ソシテワスレズ
野原ノ松ノ林ノ蔭ノ
小サナ萱ブキノ小屋ニヰテ
東ニ病気ノコドモアレバ
行ッテ看病シテヤリ
西ニツカレタ母アレバ
行ッテソノ稲ノ束ヲ負ヒ
南ニ死ニソウナ人アレバ
行ッテコハガラナクテモイゝトイヒ
北ニケンクワヤソショウガアレバ
ツマラナイカラヤメロトイヒ
ヒデリノトキハナミダヲナガシ
サムサノナツハオロオロアルキ
ミンナニデクノボートヨバレ
ホメラレモセズ
クニモサレズ
サウイフモノニ
ワタシハナリタイ


前のページへ