ベストアンサー

CSSで縦書きにして１行１５文字程度にしたい

2004/04/05 00:02

自分のHPを作っています。スタイルシートの辞典で縦書きにするというのは載っていたのですが、１行をどのくらいのスペースにするという指定をする方法はあるのでしょうか？辞典に載っていなかったのでスタイルシートではできないのでしょうか？

209belon
お礼率30% (95/314)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

s_hukami
ベストアンサー率66% (98/148)

2004/04/07 14:34 回答No.3

外部スタイルシートを利用するのかどうかわかりませんが、CSSを記述する部分に ================================== /* 縦書きコンテンツ表示 */ .tate01 { margin:20px auto; /* 外側の余白指定（上下/左右）autoは中央に表示するための指定です。 */ padding:20px; /* 内側の余白指定（上下左右） */ writing-mode:tb-rl; /* 縦書き指定 */ width:20em; /* 横幅指定（この場合は20行表示します） */ height:15em; /* 高さ指定（この場合は1行につき15文字表示します） */ overflow:scroll; /* 文字が溢れた場合にスクロールバーを表示します。 */ background:#ffffff; /* 背景色指定 */ color:#000000; /* 文字色指定 */ border:#cccccc 5px dotted; /* 罫線指定（この場合は点線です） */ line-height:160%; /* 行の間隔指定（この場合は1文字の大きさ×1.6倍） */ letter-spacing:1px; /* 文字の間隔指定（この場合は文字の間に1pxの余白を挿入します） */ text-align:left; /* 左寄せ指定 */ } ================================== などと記述し、<body>～</body>内に ================================== <div class="tate01">  </div> ================================== などと記述してみてください。「/*」から「*/」の部分は注釈です。必要なければ削除して結構です。縦書き表示はIE5.5以上でないとできません。それ以外のブラウザでは横書きで表示されます。スタイルシートを利用すると、かなり細かい指定ができますが、NN4.7などでは表示が激しく乱れます。しかしスタイルシートを使用する場合には、NN4.7に適応させようとは考えない方が良いように思います。

質問者

お礼 2004/04/08 00:49

非常に具体的にCSSの例まで書いていただき有難うございます。わかりやすくよくわかりました。有難うございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

hatsuhisa
ベストアンサー率50% (36/71)

2004/04/14 22:11 回答No.4

　CSS使用の方法については、既出なので、「縦書きサイト普及委員会」というサイトをご紹介（参考URL）します。　こちらでは、まず、CSS他様々な縦書き表示方法が実例と供に解説してあります。CSSでの1行ごとの文字数の指定方法もありました。　あと、なんといっても、ただのテキスト（ファイル）からJavaScript等での縦書HTMLに変換するフリーソフトがたくさん紹介されています。　その中には、振り仮名にまで対応しているものがあり、とてもお勧めです。

参考URL：: http://bobodori.hp.infoseek.co.jp/

質問者

お礼 2004/04/15 01:26

こんなサイトがあるなんて・・・ほんと知りませんでした。参考にさせていただきます。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

noname#107580

2004/04/05 13:46 回答No.2

こんにちは！ネスケの６以降なら　max-width:***px; で出来るようですが、IEには対応していません。テーブルを使うしかないような気がします。

ログインすると、全ての回答が全文表示されます。

mousengoke
ベストアンサー率50% (197/388)

2004/04/05 08:53 回答No.1

height:15em; を指定しておけば大丈夫です。ただし、このままだと句読点など高さの低い文字があるとつめっられていくのでもしそれがいやなら font-family:monospace; も指定しておくといいでしょう。もちろん font-family:"ＭＳゴシック",monospace; のように自分でフォントを等幅のフォントを入れてもかまいません。

ログインすると、全ての回答が全文表示されます。