ひどいマークアップがあまりにも多いので書きたくなった次第。ただしhtml講座にあらず。
簡潔で、かつ汎用性を高いhtmlとする事で小説などを読みやすい文書とする。
こんな物を読むよりはるかに良いサイトがあります。と言うかまずhtmlについて学んでください。
htmlは文章の体裁を整える言語ではありません。せいぜい、文書中の文字列を構造や意味ごとに範囲指定できるだけです。
まあ世の中には頑張ってhtmlだけでレイアウトしようとする人もいるかも知れません。しかし、その努力はあまり実りません。特定のブラウザではある程度整うかも知れませんが。たいていの場合ソースは汚れ、文書の管理、保守、修正が困難になった上、特定のブラウザでは表示が乱れます。htmlを書く段階でレイアウトを考えるのは面倒です。と言うか小説自体が読めればよいのであって、何でレイアウトなんか考えますか。
レイアウトや飾り付けにこだわりたい人は、文法違反でないhtmlができあがったという前提で、スタイルシートをつかって装飾を行います。
まず小説を書いてください。どうかいても何を書いても何を使って書いてもかまいませんがあとでhtmlにすることを考えるとコンピュータのテキストエディタやワープロを使って書いた方が良いでしょう。OCRとかはよく知りません。何とかしてその小説をテキスト形式のファイルに保存してください。
長編の場合は複数のファイルに分けても良いでしょう。
言い忘れましたがこの文書は日本語で小説を書くことを前提としています。それでも、いくつかの項目は他の言語にも当てはまるかも知れません。
小説の題名があるはずです。なかったら着けてください。仮題でもいいから「適当な題名（仮）」と言った感じに着けてください。その題名をファイルの先頭に書いてください。
htmlでは必ず明示しなければならない要素として、文書の題名を表すtitle要素があります。先ほど決めた題名をtitle要素として明示するため題名の前に<title>、題名の後ろに</title>を書きます。
適切に見だしを書いておくと文書が読みやすくなります。多分。ブラウザによっては見出しごとにジャンプできたり、見出し情報を元に目次を作成したりするやも知れません。ぜひ見出しを書きましょう。それも適切に。見出しを表す要素は以下の六つ。
上の六つの要素について「字を大きくするタグ」などと書いてある本は棄てましょう。某テキストブラウザではいずれも大きくなりません。音声読み上げブラウザは字を大きくしません。多分。一部のブラウザが見出しであることを視覚的に表現しようとして、字を大きくしているに過ぎません。
h1〜h6を使って何を表すかというと、文章の木構造を表します。「文章の木構造って何？」と言う方は水無月ばけらの HTML リファレンスを参照してください。
h1の中身はおそらくタイトルと同じ物になるでしょう。そして文章の始め、少なくとも小説の本文が始まる前に位置するでしょう。長編小説などで複数のファイルに分割した場合は<h1>第一章</h1>などとしても良いかも。
文章には段落があるはずです。小学校の国語の時間にいちいち段落に番号をつけさせられたという思い出話はさておき。文学者ではないので段落が何であるかと言う話はしないことにして、日本語の活字印刷において改行後に一文字分インデントされていたり、新聞のコラムで“▼”などの記号で区切られているあれです。
段落は一つ以上の連続した文の集まりであり、小説の本文は一つ以上の段落で成り立っているはずです。段落をどこで区切るかは著者の自由です。誰ですか？段落の一部でない文を書いてるのは。
htmlでは段落をP要素として表現します。ですから一つの段落を<p>と</p>でくくります。<p>が一行開けるタグだと言うのはガセネタかデマです。そんなことが書かれている本は燃えるゴミです。地域の条例に従って適切に処分してください。
これで文書全てをマークアップし終えたはずです。何か余りましたか？
余った物が何であるかよく考え、参考で上げたページで勉強して適切にマークアップしてください。
矢野啓介さんの「HTMLにおける「段落」をめぐって」なども参照。
ブラウザは適切に折り返しをしてくれます。また、ある音声読み上げブラウザは<br>によって文字列が分けられている物とみなします。
１文毎に強制改行してみたり、数十文字毎に強制改行してみたりするのはあまり賢い行為とは思われません。なぜならば、そこで改行する必然性がない上、かえって読みにくくなる場合が多いからです。
もし貴方が段落を分ける意味で強制改行を行っているならば、それはマークアップの仕方が間違っています。段落は一つのp要素としてマークアップされるべきものです。
段落についてはすでに述べました。文は末端に句点や終止符をおくことで区切られています。文中に読点やカンマをおくことで文の内部を区切ることとができます。これはhtmlの話ではありません。自然言語の話です。段落がすでに区切られ、文が記号によって明示されているわけですから、強制改行を用いて文を区切る必要性はありません。
強制改行を用いるのはおそらく会話文（台詞？）の前後、あるいはどうしても改行せざるを得ない場合です。会話文については後述。
どういう訳か小説を表で表現しようとする人がいる。これはかなり気狂いじみた行為であるように思われます。オーサリングツールの使い方を知らないか、あるいは大変な前衛芸術家です。そう言った前衛的な行為をやりたい人はhtmlなど使わずに他の方法を探してください。
２つほどパターンがあります。一つは一行一列の表の中に本文を全て含んでいる場合。もう一つはn行一列の表の各セルに一定文字数毎に入れている文書です。
小説を表にしようと言う発想自体が不思議な発想ですが、後者の場合は有害です。 視覚的なブラウザといえども、文字の大きさ、解像度、ウインドウの横幅などは環境によって様々であり、それを著者が強制することは不可能です。
あるテキストブラウザではtdなどにnowrap属性を与えようが、<nobr>を使おうが容赦なく折り返しを行います。無理矢理に表の中に押し込めることによって、可読性を損なっていることを頭に入れておかねばなりません。
何かの手違いで小説の内容全てを引用文にしてしまう人がいる。いや、小説自体を引用だけで構成したという意味ではなく、おそらく本人の作品であるのに前文が引用であると明示されています。しかも大概の場合、出典が明記されていません。これは大変困ったことです。自分の作品は自分が書いたのであると主張すべきです。自分の作品について著作権を曖昧にしたくないならば。
活字媒体において、長い引用文はしばしば地の文よりも印字領域を狭めて印刷されています。この伝統に則り、多くの視覚系ブラウザはblockquote要素を左右にマージンを取る形で表示しているかも知れません。しかしながらblockquote要素は左右にマージンを取る要素ではありません。音声ブラウザは左右にマージンを取りません。多分。
ブラウザのデフォルトスタイル、あるいはユーザースタイルシートによっては”以下は引用です”と表示されるかも知れません。
テキストファイルを無理矢理縦書きに変換するソフトがありますが、推奨しません。 これらのソフトはテキストファイル中の文字の順番を適当に入れ替える訳ですが、そのようにして順番が入れ替えられたテキストファイルは、それを左から右に横書きに折り返さずに表示して初めて視覚的に縦書きであるかのように見えます。 preとttを使えば整形されたままの状態で表示されることが期待されますが、横スクロールバーがでないブラウザも存在します。また、音声読み上げの環境では完全に意味不明です。
縦書きで読みたい人にはie5.5やT-timeやページリーダーを薦めたらよろしい。これらのソフトを使えば読者の必要に応じて文書を縦書きで表示させることができます。
そもそも、テキストファイル自体は縦書きや横書きなど、書字方向に関する情報を持っていません。符号化された文字が順番に並んでいるに過ぎません。それをどう表示するかはエディタ、ビューア、ブラウザの仕様によります。
縦書きは強制してはいけません。テキストファイルは文字情報が順番に並んでいる物であり、正しい順番で並んでいるからこそ縦書きにも横書きにも表示できるのだと考えましょう。そうすれば一つの作品についてファイルを複数用意する必要などありません。
宗教上の理由や信条でどうしても縦書きに表示させたい物は小説自体を画像にしてしまうがよろしい。おそらくその画像は巨大で、転送や表示に時間がかかり、誰もダウンロードしようなどとは思いません。また、視覚障害者には絶対に認識し得ない文章となります。
多くの人に読んでもらいたい作品ならば軽量であることと汎用性があることは重要な要素でしょう。簡潔なhtml文書はこの２つの特徴を有しています。
PC Tipsの「「縱書きHTML文書」を作るべからず」も参照。
全ての装飾はスタイルシートで行いましょう。但し「正しいHTML」がかけているという前提で。w3cの提唱しているcssが一番普及しているし、勘弁であると思われ、他のスタイルシート記述言語はよく知らないので、とりあえずcssを使う方向で。詳しいことはよそで勉強してください。
当たり前ですが以下に述べる方法を使っても、css非対応のブラウザでは思った通りには表示されません。それでも元の文書が正しいhtmlで書かれているならばそれなりに表示されることでしょう。このような小細工以前に正しいhtmlが必要なのです。
MOSAICを先祖に持つ、インターネットエクスプローラーやネットスケープナビゲーターやらはデフォルトでウィンドウの端から端まで文字を表示します。これが読みにくいかどうかは個々のユーザーによるでしょうが、とりあえずもうちょっと内側に寄せたいなどと言うときは以下の様なスタイルシートを使用してください。
p{margin: 0.5em 1em;}
これによってウィンドウ端とテキスト等が表示される領域の間に一文字分隙間が空くかも知れません。emというのは文字数をcssにおいて表す単位です、小数も使うことができます。数字は好みで変えたら良いでしょう。
単に画面いっぱいに広がっているのが嫌だというのであれば、全画面表示しかできないブラウザでない限り、ウィンドウのサイズを変えれば済むことです。
例えば某富士見ファンタジア文庫で流行ったファンタジー小説で擬音を通常の倍の大きさの文字で表現する事がありました。「じゃあそれを真似して文字の大きさを変えてみよう。」などと言う前に我々はまず何故にその文字列を大きくせねばならないのかを考えるべきであります。なぜならば、某テキストブラウザはどう頑張っても文書中の特定の文字列のみサイズを変えるなどと言うことができないからです。また音声読み上げブラウザでは文字のサイズという概念が存在しません。
もちろんこれは見出しではないし本文の一部であるから段落の中に含まれているはずです。おそらくこれは視覚的なインパクトを与えるために大きくされたのでありましょう。とすれば強調の意味合いがあると考えましょう。
強調であるとすればem要素か、あるいはstrong要素と言うことは見当がつきます。ですからその文字列を<strong class="louder">ドゲシッ！！</strong>といった具合にマークアップすることにしましょう
あるいは、ちょこっとある部分の文字列の色を変えたい、フォントを変えたいなどという気持ちが湧いたとします。
じゃあ色を変えよう、フォントを変えようなどと言う前に、何故そこの文字列を変えたくなったのかを考えねばなりません。おそらく、その特定の文字列の表示を変えたい理由はその文字列を地の文と区別したいからでありましょう。「その文字列の表示が違うから意味合いが違う」ではなく、「その文字列の意味合いが違うから表示を変えたい。」と考えるべきであります。では何故区別したいか、その文字列はいったい何であるかを考えましょう。
純粋に目立たせたい、と言うのならば「強調」の意味であるでしょう。特殊な用語、や造語であるならdfn要素にすると良いでしょう。略語であることを示すのにabbrやacronymと言う要素があります。「どうやら自分の考える意味合いを示す要素は定義されてないようだ。」と言う場合は<span class="foobar">ほげほげ</span>としておくしかありません。
と、マークアップした上でスタイルシートを書けばよいでしょう。
サンプルスタイルシート。自由に使うがよい。
head内に<link rel="stylesheet" href="path/sample.css"とか。水無月ばけらの HTML リファレンス LINK要素辺りをみると分かるかも。