縦書きホームページの段組表示

質問

縦書きでホームページを作りたいのですが、縦書きにすると横長になり、どうしても横にスクロールするようになってしまいます。私は縦長にしたいので、新聞のように縦書きの段組にして、縦だけにスクロールしたいと思うのですが、どのようなソースを入力すれば可能でしょうか。

回答No.1

chakle · ベストアンサー

縦書きにするにはいくつか方法がありますが、
どれもお薦めはできなかったりもします。

まずは<pre>タグを使う方法。
PREは整形済みテキストの略で、
このタグに挟まれた区間はソースに記述されたままの形で表示されます。
具体的に縦書きを記述するには
<pre>
な縦
り書
まき
すに
</pre>
このように記述します。
ただgoogleなどのロボットは当然「な縦」「り書」「まき」「すに」
と理解するので検索に引っかからなくなります。
これは人に見せたいからサイトを作るという性質上かなりのダメージになります。
あと記述するのが非常に面倒くさいという欠点もありますが、
自動的に縦書きソースを記述してくれるフリーソフトがいくつかありますのでそれで解決できます。

次はスタイルシート（CSS）を使う場合
writing-mode:tb-rl;　で普通の横書きソースをブラウザ上で縦書きに表示してくれます。
ただ現状ではIEにしか対応しておらず、
シェア的に、全ユーザのおよそ2割の人に正しく表示されません。

画像にしてしまうという方法もあります。
これは全員同じように表示されますし、見栄え上も一番美しい方法だと思われます。
ただ、来てくれた人に対して読み込みに時間がかかるのと、検索に全く引っかからなくなるという欠点を持っています。

結論として、どうしても縦書き表示にこだわるのであれば、
やはりいずれかの欠点を受け入れなければならない必要があります。

参考URL：

http://www.sky.sannet.ne.jp/gray/tate/

補足

ありがとうございます。しかし、縦書きにすると横長になってしまうので、長い文章の場合、横へスクロールすることになってしまいます。私は普通のウェブサイトのように縦のみにスクロールするようにしたいので、新聞記事のように段組にしたいと思っております。たとえば、以下のようにしたく思っております。
http://www.asahi-net.or.jp/~gr4t-yhr/back1/chu_04.htm

回答No.2

MAN_MA_RUI

提示されたページでは以下のような構造で縦書きを実現しています。
ただこの方法でも環境によっては全く意味の分からない文章となってしまうので注意が必要ですね。

<table>
<tr>
<td>
た<br>
て<br>
が<br>
き<br>
２</td>
</tr>
<tr>
<td>
た<br>
て<br>
が<br>
き<br>
１</td>
</tr>
</table>

お礼

縦書きにするにはやはりどうしても煩雑になってしまうのですね。
ありがとうございます。