▲［ メインメニューに戻る ］
▲［ もくじに戻る ］
縦書きに見えるページの作り方
ここは縦横の区別はありません
基本的な考え方 単純な方法 変換が必要な記号 行間隔、文字間隔を調整する
タグをどうするか より奇麗な表示 どうやって作るか

　まずは、もっとも単純な方法です。必要となるのは、<TT>タグと<PRE>タグです。「基本的な考え方」の項で見ていただいたサンプルは、この方法で表示しています。
　<TT>タグというのは、</TT>までの間を等幅フォントで表示する、というものです。等幅フォントというのは、何でしょう？
　アルファベットの「ｉ」と「ｗ」を考えてみましょう。このふたつの文字は、文字そのものが占める空間が、どう見ても「ｗ」の方が広いわけです。「ｉ」の方が、横幅がずっと狭い。このふたつの文字を、同じ幅の桝目に書くと、「ｗ」の方は桝目いっぱいに書けますが、「ｉ」の方はどうやっても左右が開いてしまいます。ところが、文字をみやすくするためには、そのままではいけません。やはり、「ｉ」の左右と「ｗ」の左右の空間は、同じだけあいていた方がよいわけです。そのように、文字そのものの幅を考慮して、左右の空間を広くしたり狭くしたりするフォントを「プロポーショナルフォント」といいます。逆に方眼用紙や原稿用紙のように、同じ幅の桝目の中に一文字ずつ入れるような表示をするフォントを「等幅フォント」というわけです。
　で、これからやろうとしていることは、横書きしている文章を、あたかも縦書きしているように見せたいわけですから、文字の左右の間隔がバラバラでは困るわけです。そこで、<TT>タグを使って、文字の間隔を統一するわけです。
　それに加えて<PRE>タグです。このタグは</PRE>までの間を入力した通りに表示する、というものです。この<PRE>タグを使わずに入力した文章は、ブラウザの状態にあわせて、勝手に折り返ししたりされてしまうわけです。これは困ります。
　ごちゃごちゃ説明するよりも、サンプルを見てもらいましょう。


見 り 思 少 横 る ん こ 
え あ い し 書 の と の 
る え ま 違 き で 縦 文 
で ず す 和 用 す 書 章 
し 、 。 感 の が き は 
ょ 縦 そ を ま 、 に 、 
う 書 れ 感 ま 句 な 本 
。 き で じ な 読 っ 当 
　 に も る の 点 て は 
　 は と と で が い ち 
　  　 　 　 　、 　 ゃ
　実際の記述は、以下のようになります。


　実際には、<PRE>タグがあれば、<TT>タグがなくても等幅フォントで表示してくれるのですが、ブラウザによってはそれができない場合もあるようなので、念のため<TT>タグも入れておいた方がいいでしょう。

ご意見ご感想はメールか掲示板へ