掲示板/総合質問板/過去ログ/一覧/ 長い文章だとフレームをはみだしてしまう。

0 名前： さくや ： 2005/10/10 23:58: フレームを使ってページを作成しています。
左に選択ページがあって（20％）、右に文章を表示する（80％）ようにして
いるのですが、長い文章の場合、下にルーラーが表示されてしまい、その
ルーラーを右に動かさないと全文が読めません。
下にルーラーを表示させず文章をフレーム内に収めるにはどうしたらいいで
しょうか。
色々自分で調べてみたのですが、よく分からないので、どうかよろしくお願
いいたします。

＊CSSでページの設定は一括して行っています。
＜↓以下参考までに＞
@charset "shift_jis";
/* ページ全体のフォントの指定 */
body,div{ color:#404040;font-family:Verdana,sans-serif,"ＭＳＰゴシック",Osaka; font-size:85%;}

/* left.html NOVELS部分 */
.title1{width:100%;font-size:100%;border-bottom:1px #404040 solid;padding-bottom:2px;}

/* right.html 作品紹介文 */
.kiji{width:90%;margin-left:30px;margin-right:10px;padding-top:10px;line-height:140%;}

1 名前： 愛浦憂馬 ： 2005/10/10 23:58 ［URL］: フレームではなく
文章記述自体がそうさせているのではないでしょうか

<pre>タグは改行されません

2 名前： phpinfo() ： 2005/10/10 23:58: ソース希望。

3 名前： さくや ： 2005/10/10 23:58 ［URL］: 早々に書き込みいただきまして、ありがとうございます。
アドバイスいただいた内容を元に自分でも試してみたのですが、愛浦憂馬さんのおっしゃるように<pre></pre>タグを使っていることが原因のようです。
やっぱり<BR>タグで１行ずつ修正しないと駄目でしょうか。
900kbを超えるテキストもあり、改行も頻繁に使用しているので、その全てに<BR>をいれるとなるとかなりの手間がかかってしまいます…。
できれば一括入力などできればいいのですが、無理でしょうか。
何かよい方法がありましたら、アドバイスいただけますよう重ねてお願いいたします。

また、<pre>タグを使用している場合でも、フレーム枠をはみ出さない方法などがありましたら、ぜひ教えていただきたいと思います。
参考までにURLに問題のアドレスを載せております。
（ファイルの構造は下記のようになっています。）
index.html
left.html
right1.html
right2.html
right_top.html
series.html
css.css
A(フォルダ)
∟Aright1.html
　 css.css
左にあるAをクリックしていただくと、問題の箇所を見ていただけると思います。
お手数をおかけしますが、どうぞよろしくお願いいたします。

4 名前： 愛浦憂馬 ： 2005/10/10 23:58 ［URL］: http://htmldwarf.hanameiro.net/tools/BreakPutter.cgi

改行ツールを使って万事解決です

5 名前： Pid ： 2005/10/10 23:58: いや，ちょっと待って下さい。万事解決には早すぎます。

HTML をきちんと学べば分かるのですが，そもそも br や pre なんて滅多に使うものではないのです。

見出しには見出し用のタグ（<h1>，<h2>，…）があり，段落には段落用のタグ（<p>）があります。それらをきちんと使って

　　<h1>第 1 章</h1>

　　<h2>1.1 はじめに</h2>
　　
　　<p>
　　　「あんな娘をどこが好いんだ、と訊かれると、さあ、ちよつと一口に言へないが」
　　　さう云つて、画家のＡは話し出した。
　　</p>
　　
　　<p>
　　　彼女はただ普通のモデル娘として、私の画室に通つてきてゐたのです。
　　</p>

のように見出しと段落をマークアップすれば，br を使わずとも必要な所に改行や空白が自動的に入ります。また，適当な所でブラウザが行を折り返してくれます。

もし，一行の文字数が多すぎて読みづらいと思ったら，br で強制改行するのではなく，スタイルシートで段落の「一行あたりの文字数」を調節します。また，段落の間を広げたければ，br を重ねるのではなく，段落間の余白を多めにとります。

　　<style type="text/css">
　　　p { width: 40em; } /* 段落は一行あたり 40 文字にする */
　　　p { margin: 1em 0; } /* 段落の上下に 1 行分の余白を設ける */
　　</style>

つまり，ごく普通に HTML/CSS を書けば br はまず使いませんし，横スクロールバーも出ないはずなのです。そこを踏まえずに「br を入れればいいや」では，かえってとんでもない結果になりますよ。

＊＊＊

HTML の要素はいつでもどこでも使えるわけではなく，それぞれ「使うべき場面」がありますので，まずはそれを学んで下さい。小説であれば，見出し（<h1>，<h2>）や段落（<p>）をよく使うことになるはずです。強調（<em>）を使ってメリハリを付けても良いでしょうね。

・小説書きのための Web ページ入門（http://hc2.seikyou.ne.jp/home/poup400/weblearn/）
・ごく簡単な HTML の説明（http://www.kanzaki.com/docs/htminfo.html）

＊＊＊

一般に，br（forced line break：強制改行）や pre（preformatted text：整形済みテキスト）は，

・詩や手紙など，改行や空白そのものに意味がある場合
・プログラムコードを載せる場合
・その他，他の手段での改行が難しい場合

に用います。小説だと……誰かの書いた手紙とか，段落中で会話文になるときくらいかなあ。

＊＊＊

あと，
> 900kbを超えるテキスト
はいくら何でもでかすぎです (-o-;)。せめて 50-100KB ずつ分割した方が良いです。

6 名前： eruk ： 2005/10/10 23:58 ［URL］: ちょっと気になったので、改行について小説を書いている身としての意見よろしいでしょうか。

「こんにちは」
　彼は挨拶すると、そのまま走って行った。
　それを眺めながら、私は考えていた。彼はどこへ行くのだろうかと。あの先は海である。もしかすると……。
「待って！」
　気付いたときには、私はそう叫んでいた。

このような文章にしたいときに、会話文があるので<BR>タグは必須です。
それを加えて、<P>タグ主体で作成してみることにします。

<P>
「こんにちは」<BR>
　彼は挨拶すると、そのまま走って行った。
　それを眺めながら、私は考えていた。彼はどこへ行くのだろうかと。あの先は海である。もしかすると……。
</P><P>
「待って！」<BR>
　気付いたときには、私はそう叫んでいた。
<P>

これをブラウザで表示すると、こうなります。

＊
「こんにちは」
　彼は挨拶すると、そのまま走って行った。それを眺めながら、私は考えていた。彼はどこへ行くのだろうかと。あの先は海である。もしかすると……。

「待って！」
　気付いたときには、私はそう叫んでいた。
＊

このように、元の文章とは全く違う内容になってしまいます。
そこで、元の文章に近づけるため<P>タグを使って記述します。

<P>
「こんにちは」<BR>
　彼は挨拶すると、そのまま走って行った。</P>
<P> それを眺めながら、私は考えていた。彼はどこへ行くのだろうかと。あの先は海である。もしかすると……。
</P><P>
「待って！」<BR>
　気付いたときには、私はそう叫んでいた。
<P>

ブラウザ表示

＊

「こんにちは」
　彼は挨拶すると、そのまま走って行った。

それを眺めながら、私は考えていた。彼はどこへ行くのだろうかと。あの先は海である。もしかすると……。

「待って！」
　気付いたときには、私はそう叫んでいた。

＊

このように、やたらと空白行が多くなってしまうのです。
ネットで公開することを目的に書いているのなら、これでも問題はないかもしれません。
しかし、原稿用紙の作法に則って書いている場合には、<P>タグの上下にできる空白行がそれを台無しにしてしまいます。
<BR>を多用しないでやるとしたら、上下に空白ができない<DIV>タグを使うことも考えられます。
<DIV></DIV>での改行と<BR>での改行。明らかに後者の方が手間が省けます。

小説では、意味のある改行が多いのです。それも文章技術のひとつなのです。
例えばこのように、

＊
彼は空を見上げてていた。空には雲が流れている。まるで、彼を歓迎するかのように。
＊

＊
彼は空を見上げていた。
空には雲が流れている。
まるで、彼を歓迎するかのように。
＊

このように、改行ひとつでイメージが変わってしまうのです。
このようなことが頻繁に起こる小説で、<BR>タグを控えるのは厳しいのです。
関係のない話をして申し訳ありません。
ですが、小説を書くには<BR>を多用しなくてはならない現状があることをご理解いただきたく思い、書き込ませていただきました。

尚、フリーウェアで役に立つと思われるものがあるので、リンクしておきます。
http://www.nishishi.com/soft/elad/

7 名前： さくや ： 2005/10/10 23:58: たくさんの書き込みをいただきまして、ありがとうございます。
HTMLでの注意事項や、小説の書き方や改行の取り方についての記述は、ほとんど我流でやってきたので、本当に参考になりました。
また、教えていただいたリンクも全部確認してみて、いろいろ試してみたいと思います。
質問することがあるかもしれませんが、その時はまたどうぞよろしくお願いします。
書き込んでいただいたみなさま、丁寧にアドバイスいただきまして、ありがとうございました。

8 名前： Pid ： 2005/10/10 23:58: >>6
eruk さん：
> 小説では、意味のある改行が多いのです。それも文章技術のひとつなのです。
> 小説を書くには<BR>を多用しなくてはならない現状があること

全く仰る通りだと思います。ですから，>>5 で私が書いたのはあくまで原則論です（ただ，原則を知らなければ応用はできない）。また「改行に意味がある場合には br/pre を使うべき」とも一応書きました。

> <P>タグの上下にできる空白行がそれを台無しにしてしまいます。
> 上下に空白ができない<DIV>タグを使う

空白行はスタイルシートで自由に消せますよね。p か div かは関係ありません。というか，本来 HTML は「ブラウザでの見た目」とは何の関係もありませんので，読者側でスタイルシートに

br { display: none; }

を追加されたら，強制改行は何の役にも立たなくなる（かつ，何の意味も表しえなくなる）ことに注意して下さい。

＊＊＊

私はよく

<p><em class="dialog">「こんにちは」</em>彼は挨拶すると、そのまま走って行った。</p>

のように，会話自体を強調としてマークアップします。そうすれば，スタイルシートで .dialog { display: block; } で必要に応じて改行できますし，行間調節も自由にできます。また，スタイルシート非対応の環境では何らかの形で強調されるので，見やすい／聞きやすいと思います。

逆に，携帯電話など画面の狭いブラウザで小説を読むと，強制改行が非常に鬱陶しく感じてしまいますね（だから，ブックマークレットで強制改行を解除してしまう）……その辺は読者層との兼ね合いもありますが。

9 名前： eruk ： 2005/10/10 23:58 ［URL］: ＞読者側でスタイルシートに
＞br { display: none; }
＞を追加されたら，強制改行は何の役にも立たなくなる

読者側で役に立たなく出来るんですね……。
やり方がわからないので、どう対処したらいいのやら。
<BR>中心なら、スタイルシートのあるなしに関わらずほとんど同じ表示に出来るのですが、読者側の設定はどうしようもないですしね。
無難に、「強制改行は解除しないでください」とでも明記しておきましょうかね。

10 名前： カヅサツ ： 2005/10/10 23:58 ［URL］: > どう対処したらいいのやら。

p要素は形式段落です(*)から、会話文を含む小説をマークアップするなら、以下のようにすべきです。

<p>(前略)</p>
<p>博士は何よりも奸きな煙草の脂で黒くなつた歯をちらと見せながら、心もち厚い唇を上品にゆがめた。</p>
<p>「気まぐれでせうか。気まぐれに読むにしては、物があまりに古すぎますね」</p>
<p>私はうつかりかう言つて、それと同時にこの書物の前の持主が私であつたことを、すなほに打ち明ける機会を取りはづしてしまつたことを感じた。</p>
<p>(中略)</p>
<p>私はその後Ｄ博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの二冊の書物を見た。</p>
<p>その都度書物の背の金文字は藪睨みのやうな眼つきをして、<br>「おや、宣教師さん。いらつしやい」<br>と、当つけがましく挨拶するやうに思はれた。</p>
<p>(後略)</p>

（薄田泣菫『古本と蔵書印』）

「気まぐれでせうか～古すぎますね」は、それ自体で一つの段落ですから、全部を p要素とします。
一方、「おや、宣教師さん。いらつしやい」の後は、「と、当つけがましく～」のように「と」で受けているのですから、これらで一つの段落であり、閉じカッコの後ろを改行しているにすぎません。これは br要素を使います。

11 名前： カヅサツ ： 2005/10/10 23:58 ［URL］: そうすることでどんなメリットがあるでしょう？

以下は、IEでの表示例です。

----
博士は何よりも奸きな煙草の脂で黒くなつた歯をちらと見せながら、心もち厚
い唇を上品にゆがめた。

「気まぐれでせうか。気まぐれに読むにしては、物があまりに古すぎますね」

私はうつかりかう言つて、それと同時にこの書物の前の持主が私であつたこと
を、すなほに打ち明ける機会を取りはづしてしまつたことを感じた。

私はその後Ｄ博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの二
冊の書物を見た。

その都度書物の背の金文字は藪睨みのやうな眼つきをして、
「おや、宣教師さん。いらつしやい」
と、当つけがましく挨拶するやうに思はれた。
----

作成者スタイルシート次第では、以下のように見せることもできます。

----
　博士は何よりも奸きな煙草の脂で黒くなつた歯をちらと見せながら、心もち
厚い唇を上品にゆがめた。
　「気まぐれでせうか。気まぐれに読むにしては、物があまりに古すぎますね」
　私はうつかりかう言つて、それと同時にこの書物の前の持主が私であつたこ
とを、すなほに打ち明ける機会を取りはづしてしまつたことを感じた。
　私はその後Ｄ博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの
二冊の書物を見た。
　その都度書物の背の金文字は藪睨みのやうな眼つきをして、
「おや、宣教師さん。いらつしやい」
と、当つけがましく挨拶するやうに思はれた。
----

読み手のスタイルシート次第では、以下のようになるかもしれません。また、こういう携帯端末も出てくるかもしれません。

----
▼博士は何よりも奸きな煙草
の脂で黒くなつた歯をちらと
見せながら、心もち厚い唇を
上品にゆがめた。▼「気まぐ
れでせうか。気まぐれに読む
にしては、物があまりに古す
ぎますね」▼私はうつかりか
う言つて、それと同時にこの
書物の前の持主が私であつた
ことを、すなほに打ち明ける
機会を取りはづしてしまつた
ことを感じた。▼私はその後
Ｄ博士を訪問するたぴに、そ
の書斎の硝子戸越しに、幾度
かこの二冊の書物を見た。▼
その都度書物の背の金文字は
藪睨みのやうな眼つきをして、
「おや、宣教師さん。いらつ
しやい」と、当つけがましく
挨拶するやうに思はれた。
----

「段落は段落である」「見栄えは無視されうる」ということさえ心にとめておけば、どんな環境でも、どんなスタイルシートでも、それなりの「文意」は伝わります。

12 名前： カヅサツ ： 2005/10/10 23:58 ［URL］: (*)蛇足

HTMLに意味段落はありませんので、意味段落こそ divを使います（というかそれしか方策がありません）。

例：
<div class="greater_paragraph">
<p>段落1</p>
<p>段落2</p>
</div>
<div class="greater_paragraph">
<p>段落3</p>
<p>段落4</p>
</div>

div.greater_paragraph{margin: 1em 0em} p{margin: 0em} とした時の表示例：

段落1
段落2

段落3
段落4

もっともいくらclass属性値を付けようが div要素に意味はないので、気休めです。

HTMLの発展系である XHTML の次期ルールである XHTML 2.0 では、p要素が意味段落になり、新たにline要素が形式段落として追加されるようです（これに代表されるように、XHTML 2.0 は XHTML 1.1 までと異なり、過去の HTML との互換性を放棄する方向のようです）。