HPでの小説の改行について

倉梨月夜さんからの質問
　HPでの小説の改行について
　　
　タイトルの通り、「HPでの改行について｣です。
　このサイト様で学ばせて頂き、改行は、段落の変わるところですれば良いのだな、と分かりました。
　原稿の1行の文字数は決まっていて、１段落がながくなっても問題はないと思ったのですが、
　HPで作品を公開する場合、1行の文字数が決まっていないので、
　改行が１段落ごとならば、段落がかわるまで、延々と改行ができないことに……!

　まぁ、現実にそんなことはないのでしょうが。
　そこで、皆様はHPで作品を公開する際、

1.1行の文字数を決めて改行する
2.キリの良いところで改行し、段落が変わる部分で字下げする
3.その他

　のうち、どれにしていますか?
　また、どれが適切だと思いますか?

　本当に初歩的な質問ですが、ご返答よろしくお願いします。

●答え●

卯月さんからの意見
　こんばんは。携帯から卯月です。

　私の場合はテーブルを使いますので、答えとしては３ですね。
　文字数は決めず、見栄えよく読みやすいくらいの大きさをプレビューで確認しながら決めてます。
　人によってはスタイルシート使うみたいですが。

　あと、幾つかサイトを見て自分が見やすいなと思ったのを参考にするのも良いと思います。

216SOHさんからの意見
　こんばんは。

　行の文字数ではなく横幅で改行しています。
　例えば僕は横幅が５８０ピクセルの表を作ってその中で打ち込んでいるので、
　５８０ピクセル分文字を書くと勝手に改行してくれます。

　どれが適切かは僕には判断できませんが、お好みでいいと思いますよ。
　あと場合によっては見る環境（画面の解像度など）で、
　表示のされかたが変わるかもしれないことも知っておいてください（僕はこれで失敗したｗ

　では失礼します。

フミツキマサヒトさんからの意見
　どうも、フミツキマサヒトです。ここにカキコするのもすっごい久しぶりな奴ですが、以後お見知りおきを。

　まず結論から言いますと、僕は「3」に該当します。
　理由は卯月さんと同じように、テーブルで境界を決めているからです。
　文字がそこへ到達しようとすると自動的に下の段へ行ってくれますので、
　わざわざ改行するなどという手間が省けます。

　HTMLに表現しますと、
<tabel>

　ここ（間）に文章を書くと、テーブル内に文字が表示されます。

</table>

　またtableの右に半角でスペースを開け、widthを記述すると横の広さを決められます。
　ちなみに僕のサイトでは大体850pxくらいです。
　普通の1024×768サイズのディスプレイなら、若干左右に余裕ができるくらいの広さとなるはずです。

　ちょっと専門的な話になってしまいました。すみません。
　

かずのんさんからの意見
　こんばんは。すっかりＲＯＭ専のかずのんです。

　私もこれは悩みましたが、他のお三方と同じくテーブルを使っています。
　そのままだと行間が詰まり過ぎてとても読みにくいので、行間を空けるタグなどを使っています。
　下のサイトがわかりやすくてオススメです。

　ＨＴＭＬ講座
　ttp://rurunta.gooside.com/
　頭にhを付けてください。

　それでは、サイト運営頑張ってくださいませ。

悠香さんからの意見
　こんばんは。悠香と申します。
　私も番号でいうと3ですが、レイアウトには<table>ではなく<div>を使っています。

<div style="width:500px">
　文章
</div>

　こんな感じですね。
　幅は広すぎず狭すぎずがいいです。あんまり幅が広いと視点の移動が大変ですし、
　狭すぎると今度は段の移動に忙しくなるのでやはり読み辛くなります。
　個人的には500～600pxくらいがちょうどいいかな、と感じています。

　1はあまりおススメできません。

　例えば、ブラウザの解像度が決めた文字数の長さよりも短かっ
　た場合、
　意図していないところでも改行されてしまうので見る側からす
　れば、何
　だこれ、という状況になってしまいます。

（32文字で改行してたけれども、閲覧者のブラウザの幅が28文字分しかなかった場合、
　上のように表示されます）

　こんな感じで非常に見苦しくなります。2の場合も同じようになる可能性があります。

　<table>と<div>の違いは少し話が長くなるので省略させて頂きます。基本的には変わりません。

　それでは、失礼します。

jogtyさんからの意見
> 1.1行の文字数を決めて改行する
> 2.キリの良いところで改行し、段落が変わる部分で字下げする
> 3.その他

　仮にもあいてー関係で飯を食ってる人間として回答しておきます。
(といってもHTMLの専門家というわけではありませんが)

　HPの目的にもよりますが、1が一番対応はいいです。
　
　1を実現するには、Pタグで段落を囲ってBRタグで改行をするのだと思いますが、
　この2つのタグに対応していないブラウザは私の知る限りありません。
　さすがにモザイクとかそこまで古いものになれば分かりませんが。
　lynxなどでも問題なく表示できるはずです。

　同様の理由で2も悪くはないのですが、一文の長さによってきりのいいところは変わりますし、
　ブラウザの解像度もマチマチなら、ブラウザをフルウィンドウで表示するとは限りませんので、
　場合によってはレイアウトがかなり崩れ読みにくくなるでしょう。
　それならば一律に何文字で改行と決めるほうがいいと思います。

　3のやりかたは色々あります。
　テーブルタグで枠を作ってしまうのもひとつの方法です。
　ただこの方法はHTMLの文法的には間違っているので、今は推奨されませんし、嫌う人もいます。

　文法的に間違っているというより、
　HTMLで書かれた文書の体裁や論理構成がおかしいというべきですが。
　テーブルタグというのは本来、表を記述するためのタグであって、
　レイアウトをするタグではないからです。
　ただテーブルタグレイアウトは一時(今でも？)、かなり流行したやりかたで、
　今でもHP作成ソフトを使ってデザインモードでHTMLを書くとこのやり方が使われてたりしますし、
　HP作成の本やHPでも紹介してたりします。
　
　私自身は、メモ帳ひとつあればそれなりのHPを作る程度の技量はありますので、
　この方法は使いませんが、一般の方でしたらおススメします。楽です。
　テーブルタグで変な挙動を起こすブラウザというのも聞きませんし。

　iframeタグというページの中に別のページを埋め込めるタグがありますので、それを使う手もあります。
　ただこれもframeタグ自体が現在はw3cの推奨に入っていないタグだったりしますし、
　iframeに対応していないブラウザなどもあったりします。

　あとdivタグで小説を囲って、style属性なりCSSで横幅を決めるやり方もあります。
　私はこの方法でやっています。
　CSSを使うと行間や文字間隔なんかも設定できますので、かなり読みやすいレイアウトにできます。

麻さんからの意見
　初めまして、麻と申します。

　私は３ですね。というか、１と２はどうも好きになれません。
　自分がスタイルシート大好きでレイアウト重視だからかもしれませんが。

　私はCSSでマージン（余白）を左２０％、右２５％くらいで設定しています。
　残りの真ん中５５％に文字が表示されます。
　意外とpxで指定されてる方が多いようですが、
　パソコンのディスプレイによっては横スクロールが出てしまうとどこかで聞いたことがあるので、
　私は小説だけでなくサイト全体のレイアウトにpxでなく％で指定しています。
　
　横スクロールって読むのが非常に苦痛に感じますからね（笑
　
　ただ、CSSは便利ですが対応していないブラウザで見ると、
　どうなっているのか非常に恐ろしいです・・ひええぇぇ；
　それから、テーブルタグですが、あれはレイアウトに非常に便利ですが結構重いです。
　私も前まで使っていましたが、CSSの方が勉強大変ですが断然軽いのです。

　ADSLとか早いものを使ってる人はそんなに関係ないかもしれませんが、
　使っていない人もいるでしょうから、そんな方にはちと不親切ですね。

　まぁ色々と書きましたが、月夜さんが得意でかつ好きな方法でレイアウトするのが一番かと＾＾
　ではでは。

Hjさんからの意見
　CSSは古いブラウザには対応出来ないと書いている人がいますが、
　現在(2011年)の状況を考えると、その情報は古過ぎます。

　現在は一部の古い携帯電話を除き、CSSに対応していないブラウザで見られることはまずありません。
　そういう携帯電話では、画面の横幅いっぱいの自動改行でも視覚的な問題はないので、
　特別考慮に入れなくても致命的なことは起こりません。

　ブラウザの幅などによっては、字数による
　強制
　改行は、このようなレイアウト崩れを起こ
　す可
　能性があるので、あまりオススメできませ
　ん。

　特に上記のような携帯電話などの場合、そもそ tableタグが表現出来ない可能性がありますので、
　レイアウト崩れが起こる可能性も高いです。

　CSSはひとつのCSSファイルを作ってレイアウト情報を入れれば、
　たくさんのHTML等のファイルから呼び出して使う事ができます。

　つまり、一度レイアウト情報を設定すれば、何作品作ってもそれが適用されるのです。
　レイアウトは外部CSSで作るようにしましょう。

　また、CSSを利用することにより、段落要素<p>の字下げや、
　形式段落と意味段落の使い分けなどができたりします。

CSS使用例

CSSファイル(style.css)
#novel{margin:0;padding:1em 10%;border-top:groove #333 medium;border-bottom:groove #333 medium;line-height:1.6em;font-style:serif;}
#novel div{margin:1.6em 0;}
#novel p{margin:0;}
.indent{text-indent:1em;}

htmlファイル(novel.html)
<!DOCTYPE html(略)>
<html>
<head>
(略)
<link rel="stylesheet" href="style.css" type="text/css" />
<title>作品タイトルサイト名</title>
</head>
<body>
(ヘッダーナビゲーション部分)
<div id="novel">
<h1>作品タイトル</h1>
<div>
<p class="indent">
字下げ(インデント適用)をしている段落です。pタグもきちんと閉じた方がいいでしょう。タグ(<p>)と閉じタグ(</p>)に挟まれた部分を要素(p要素)と言います。
</p>
<p>
「セリフなどには字下げをしたくないですよね。工夫してみました。CSSファイルはHTMLファイルと同じようにテキストエディタで簡単に作れます。htmlのmeta要素内のlink要素を使ってCSSファイルへのパスを指定すればOKです」
</p>
</div>

<div>
<p class="indent">
p要素にclass属性を入れることにより、何度も使用するスタイルが設定できます。ここではクラス名"indent"にtext-indentプロバティの値"1em"を設定しています。
</p>
<p>
（小説全体を囲っているdiv要素には、class属性でなくid属性を設定してるんですよね。id属性は、ひとつのページに同じ名前を何度も入れることは出来ないのです。しかし、そのままアンカーの役割を果たすので、もしリンクを"novel.html#novel"という風に指定すれば上部のナビゲーションを飛ばして小説部分にを直接見せることも可能と言えます)
</p>
<p>
「今回のように外部のCSSを使ったりhead要素内にまとめて表示する場合は、CSSのセレクタを指定してスタイルを記述するの。セレクタの種類は大きく分けて3つ。ひとつは要素(タグ)セレクタ。これは同じタグにはすべて同じスタイルが指定できる方法よ。次はクラス名を使うクラスセレクタ。クラス名の前に"."を付けるのを忘れないで。最後にidセレクタ。id名の前に"#"が付くわ。これは音楽記号のシャープではなくナンバーサイン(ハッシュ)よ。idセレクタ、クラスセレクタ、タグセレクタの順に優先されるわ」
</p>
<p>
「おっと、大事な事を忘れてるんじゃないか。セレクタは入れ子を表現出来るんだ。スペースを入れて表現することで特定のセレクタの中にあるセレクタだけに効果を与えているのさ。"#novel div"というセレクタは『"novel"というidが付けられた要素の中にあるdiv要素』、という意味だ。『"novel"というidが付けられたdiv要素』の場合は"div#novel"になる。これにはスペースが入らないから注意が必要だ。
</p>
</div>
</div>
(フッターナビゲーション部分)
</body>
</html>