書いたままの形で?

[新着] Webテンプレートを仮オープンしました



0   名前: 小林A太 : 2005/06/24 23:33
質問ばかりのようで誠に恐縮です。HPで小説を書いています。多分そんな同胞の方々も多くいると思います。
書く時私は、<body>タグ等のHTMLの下書き(文章だけ抜かしている)を書いておいて、後から文章を<body>タグの中に書き入れています。

 この時に不便なのは、そのままだとまったく改行がなされないと言う事です(通常の「Enterキー」での改行は、たしか空白になっちゃうはず)その為コピペした後に、全ての改行のところに<BR>タグを付けなければいけません。
 そこで、<PRE> タグを使用してみました。すると、本文の「Enterキー」での改行でもブラウザ表示で改行されましたが、ブラウザ表示した時に自動的に右端で折り返して表示がされず、非常に横長なページになっちゃいます。

事前に少し過去スレを探してみましたが、似ている(のかな?)と思われるスレを見つけました。横スクロールバーが出てウザイとの事(なぜ出るのかは分かりませんが)結果的に言えばそこでの解決策は『 HTML要素に「overflow-y: scroll;」を設定する』だったようです。
 しかし「overflow-y: scroll;」を設定しても、文章が右端で改行されるわけではないようです。僕の問題の解決にはなりませんでした。
 贅沢な悩みかも知れませんが、『いちいち<BR>タグを入れなくても良い』かつ『ブラウザ表示の時、右端で自動改行される』という都合の良いタグを知っておられる方はいませんでしょうか?

1   名前: 高校生さん : 2005/06/24 23:33
何もしなければ勝手に改行されると思うのですが、なぜなのでしょう。

スタイルシート内に
<STYLE TYPE="text/css">
<!--

P { white-space: nowrap; }

-->
</STYLE>
が入っていないか、確認してみてください。
それでダメなら表を使い枠の大きさを設定してその中に入れてみてはいかがでしょうか?
<TD NOWRAP>セル内の自動改行を禁止します</TD> というようなタグがあるので大丈夫なのでは、と思います。

2   名前:  : 2005/06/24 23:33
自動改行されないのは単純にPREタグの効果では。
http://www.tagindex.com/html_tag/text_font/pre.html
にあるように、ソースが改行していないとそのまま横長に伸びます。

タグで改行が面倒なら、
http://htmldwarf.hanameiro.net/
みたいなのを利用してみては。

エディタにも、エンターで改行すると自動的に<br>が挿入される機能が付いたものがいくつかあったかと思います。

3   名前: カヅサツ : 2005/06/24 23:33  [URL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title>古本と蔵書印</title>
<style type="text/css">
p{
margin: 0.6em 0em;
line-height: 1.4;
}
</style>
</head>
<body>
<h1>薄田泣菫『古本と蔵書印』(抜粋)</h1>
<p>「宣教師だなんて、とんでもない。宣教師などにお前がわかつてたまるものかい。──だが、こんなことになつたのも、俺が蔵書印を持ち合さなかつたからのことで。二度とまたこんな間違ひの起らぬやうに、大急ぎでひとつすばらしい蔵書印をこしらへなくちや……」</p>
<p> 私はその後D博士を訪問するたぴに、その書斎の硝子戸越しに、幾度かこの二冊の書物を見た。</p>
<p> その都度書物の背の金文字は藪睨みのやうな眼つきをして、<br>
「おや、宣教師さん。いらつしやい」<br>
と、当つけがましく挨拶するやうに思はれた。</p>
<address>昭和4年刊『艸木虫魚』)</address>
<hr>
<h2>解説</h2>
<ul>
<li>「段落」を p要素(<p>〜</p>)でマークアップする。</li>
<li>段落内で、読みやすさのために改行するとき(にのみ)br要素を使う。</li>
<li>多くのブラウザは、段落の前後に1文字分の空白を開けるので、CSSのmarginプロパティで好きな値を指定すると良い。</li>
<li>行間は line-heightプロパティで指定する。</li>
</body>
</html>

一覧へ戻る