前置き：個人サイトはいいぞ

こんにちは。
（テンプレートの力で）、HTML＋cssの個人サイトをやっています。

SNSの発達や、pixivなどの投稿プラットフォームの発展とともに、個人サイト以外の情報発信の手段も豊富な現代ですが、個人サイトも、じぶんのおうちがあるようでちょっと楽しいです。

個人サイトをもつにしても、WordPressなどのCMSなんか、便利なサービスがいくらでもありますので、今日日「HTMLでタグを打ってやろうかな」って方はあんまりいないかと思います。
それでもやっぱり自分の場所があるのはいいもんですし、HTMLも楽しいですし、なにより人のテンプレートのアップデートをあてて、みたいなことがほぼない環境も気楽でいいもんです。

API制限もないしね。はーっはっは。

HTMLの文法規則は移り変わっているというのに、気を抜くと<font size="7">このように大声を出しそうに</font>なります。

fontタグはHTML5で廃止されましたので、イマドキは<span style="font-size:large;">こんなふうに</span>大声を出してください。

とまあ、そんな前置きは置いておいて……。

「<br><br>のように、改行タグを連続で使うと処されると聞いたので気を付けます！」

処されません。

推奨されてはいませんが、別にブラウザがぶっ壊れたりはしません。

改行は段落を構成するにあらず。段落を表すタグは<p>である。
「改行タグ<br>は連続で使わないように」というのは本当です。

mozillaのHTMLタグリファレンスによると、

メモ: 段落の間を開けるために <br> を使わないでください。
それぞれを <p> 要素で囲み、 CSS の margin プロパティで間隔を制御してください。

とあります。

文章をブロック分けするためだけに、
<br>で文章の塊を作っていくのは、美しいやり方ではなさそうです。

つまり、えーっと……。

こうではなくて……。

　このアカデミーにおいて、クロウラーの研究をしていると言うときまって奇特な目で見られる。中には、「いったい何をやらかしたんですか？」と心底気の毒そうに聞くやつすらいるのだ。<br>
　そういう連中に出食わした日には、憤りを通り越して悲しくなってくる。正直なところを言うと、今、やらかしてやろうか、と思うことすらある。<br>
<br>

こうっ！

　<p>このアカデミーにおいて、クロウラーの研究をしていると言うときまって奇特な目で見られる。中には、「いったい何をやらかしたんですか？」と心底気の毒そうに聞くやつすらいるのだ。</p>
　<p>そういう連中に出食わした日には、憤りを通り越して悲しくなってくる。正直なところを言うと、今、やらかしてやろうか、と思うことすらある。</p>

こちらの記事がとてもわかりやすかったです。

ですから、ちゃんとお行儀よく<p>タグをふりましょうね。

それでは、みなさんも気を付けてくださいねっと。
では。

小説のマークアップは死ぬほどめんどくさい……。

そうはいってもですね……小説を個人サイトにアップロードするときに、いちいち<p>をつけるのって、すごいめんどくさいです。

HTMLでサイトを作るとすると、メモ帳なり、テキストエディタなり、なんなりで小説を執筆したら、その後、自力でタグを付与することになるかと思います。

大半の（数少ない）HTML個人サイト運営者は、自分ちの既存の小説の展示ページを1個適当にコピーして、タイトルや本文などを書き換え、<br>タグを挿入して、目次に載せて、とやっている……のではないだろうか……。

一つ一つ手打ちでやってるとつらいので、かつてはサクッとWebツールを使わせていただいていました。

最近はそれすらもめんどくさくて、テンプレートを作ってそこに流し込むプログラムを組みました。

で、本題なんですが、自分のサイトにポイしたいだけなのに、段落ごとの塊を認識して<p>を振るのはめんどくさすぎやしませんか？

改行タグならプレーンテキストの「改行（\n）」の手前に<br>を挿入したら済みます。

たとえば1行空きがあった場合は「そこまでが1段落」、という規則を作って処理できなくもなくて、できなくはない。できなくはないけどぉ、あんまり、やりたくはない……。

(1行あけたいときと、3行あけたいときと、水加減みたいなのが、あるじゃない～！？)

こういうQiitaの記事とか、ブログの記事とかは意識せずにもエディタがあればやってくれてますので、そんなに段落を意識することはないと思います。

でも、でも、小説のテキストというのは、だいたいはプレーンテキストだし、なるべくなら使いまわしたいものです。pixivなり、ぷらいべったーなり、タイトルのマークアップくらいはしぶしぶやってもいいけど、せいぜいがテキストを入れて、ぽちっとしたら終わりになってほしいものじゃないですか！？

コピペして<br>タグを挿入して、それを貼り付けるだけでもさぼりがちなのに、文章の塊を見つけて、適切にマークアップしろってのはぁ……っ、……職人の仕事ではありませんか？

HTMLで個人サイトを作るのが職人芸と言われればそう。

でもお、そんな、段落いっこいっこに段落タグをふって、細かく作業してたら中身いじりたくなって最新版がどれかわかんなくなるし……。それを一生懸命にやるときは、同人誌を出すときとか、そういうときがいいナァ……。

もともとpタグは小説向きじゃないんじゃないか？

問題１：<p>は字下げが難しい

<p>タグでは、字下げが難しいです。

もちろんできなくはないのですが……。

p {
    text-indent: 1em;
}

作文の時間を思い出していただければと思います。普通の字の文は字下げをしますが、カギカッコなどから始まる場合は必要ありません。

字下げはするかしないかは、内容によって決まります。

それじゃあ、Webで字下げを実現したい場合、どうしているかというと、cssでする/しないの段落タグのクラスを用意して、そっちを使うとか、適切なJavascriptで字下げのいる文字か判別して、クラスを割り当てて、……なんてことはあんまりしてないと思います。

私は、というかWebで字下げを使う字書きユーザーの大半は
「　（全角スペース）」を使って字下げしているかなと思います。

小説投稿サイトである小説家になろうについても、カクヨムについても、「自動で全角スペースを入れる機能」がついてます。

小説家になろうの場合

全ての文の先頭に、全角スペースを１つ挿入する機能です。
該当のボタンを選択すると、「段落の先頭を一字下げる」の確認画面が表示されます。

カクヨムの場合

「段落先頭を字下げ」ボタンをクリックすると、各段落の先頭に一括で全角スペースが挿入されます。ただし、先頭が開き括弧の場合は挿入されません。例えば「 や（ や【 などの場合です。

実質的には「全角スペースで字下げしてね」ということですね。

文字組みがよほど好きな人だったらpタグで真剣にやるのかな……。

（余談）まあ字下げしたいとも限らないんだけど……。

字下げもまーーーあ、やるかどうか、好みですよね。

段落行頭を開けるのは、作文、っていうか書籍の体裁向けです。

同人誌作るときに、段落行頭を開ける方法は、全角スペースを入れるやつと、DTPソフトウェアでやってもらう方法があるそうです。

基本的に段落行頭（始め括弧類が来た時は後述）は一字下げとする。原稿の段階で全角スペースを挿入して一字下げとする方法と、組版の段階でDTPソフトウェアの設定によって自動的に一字下げする方法の二つある。

私が行頭をあけているのは、そっちのがきちんとしてみえるかなって打算と、うっかり本でも作りたくなった時にそのほうがラクだからです。

聞いた話、InDesignだとむしろ空白記号は取り除いてソフトの側でやってもらうようです。Wordでも一太郎でもそうなのかもしれませんが、私は、いつも空白記号でやってます……。

私は小説だったらする派なんですが、最近はWebだったらなくっても違和感ないな……と思います。

スマホでもちょっと書くようになってから、空白記号で字下げするのが異様にめんどくさいことに気が付きました。

問題２：段落を分けたからといって必ずしも1行の空きが欲しいわけではない

段落と段落の間は<br>ではなくマージンでどんくらいほしいか指定しましょうね、っと。
正しいですよ。正しいと思います。
ただ、ただ、テキトーな書き手としては「段落だから、必ずしも1行、空行を開けたい」とも限らないんです。

新しい段落（１行あきまではしてほしくない)

ぶっちゃけ段落だけど、「改行」だけが欲しくて「１行はあけてほしくないとき」があります。
（作文でいうところの、新しい段落ではあるが、１行の空きはいらない）。

　滝をさかのぼる美しい腹には、たっぷりとした脂をたくわえて……。
　私は、せめて、その愛しいサーモンの身を切り落とす包丁が鋭利で青く、うっとりするほど細く、サーモンの身に滑り込むために、芸術的な刃を持っていることを祈っている。

ちょっとみっちりめに書きたいから１行あけないけど、これは「改行」じゃなくて「新しい段落」という気持ちです。書いてる本人のきもちとしては、意味的に、<br>ではない。

新しい段落（場面転換のために、３行あけたい）

あるいは、時間経過、明確な場面転換を表すために、3行空きが欲しい時もあります。

//TODO:いろいろな思い出の記述
　それが、彼を見た最後だった。



「そんな……どうして……」
//TODO:いろんな事件の記述

このとき、改行文字をアテにするなら、まんま改行タグをつけるだけか、

<br>
<br>
<br>

と書けばすんで、大変話が早いんですが、これこそが「改行タグをマージンの調整に使うな」というお叱り案件だと思います。

きちんと段落にするなら「3行空き用のマージンを用意して、指定」しなくてはなりません。
3行とか決まってたらいいんですけど、2行だったり5行だったりするかもしれません。
いちいちそれ用のマージンクラスを用意して指定するのがベストです。
でも、めんどくさいなあ……。

空の

<p></p>

は使っちゃだめですよね。
改行や空白行を作成するために段落タグを使ってはいけないのです。
（ちゃんとマージンで指定しろ、という……）

……。

いやあ、章の切り替わりとかは見出しをマークアップするくらいはしてもいいんだけど、なんていうか、こんくらいなら、いいんじゃない、<br>で？

みんなはどうやってんの？

自分でやってくHTML＋個人サイトタグ打ちとはまた違いますが、小説投稿サイトってどうなってんだろう？
ちょっと本文ページをのぞいてみました。

小説家になろう

<p id="L2">　駆けつけた私は、部屋の惨状を見て思わず言葉を失う。</p>
<p id="L3">「ひどいな」</p>
<p id="L4">　警部が呟いた。</p>
<p id="L5">　私よりも死体を見慣れているはずの警部も、これほどのものは見たことがないようだった。</p>

1行ごとにidとPタグ。

空行は、

<p id="L38"><br /></p>

こう。

カクヨム

<p id="p1">吸血鬼と役所手続き・前編</p>
<p id="p2" class="blank"><br /></p>
<p id="p3">「お気の毒ですが、あなたは吸血鬼です」</p>
<p id="p4" class="blank"><br /></p>
<p id="p5">　医師に診断（※１）を下されたあなたは、茫然と診断書を眺めることだろう。診断書を何度も何度も読み返して、自分が死んでいることを理解する。</p>![Something went wrong]()

<p id="p6">　死因の欄には、『吸血鬼』。</p>
<p id="p7">　吸血鬼に殺されたわけではない。じぶんが吸血鬼になったのである。</p>

カクヨムも似たような感じですね。ただし、

<p id="p4" class="blank"><br /></p>

空行はblankクラスがふってあります。

pixiv

pixivはなんか、見て見たら、一番ちゃんと真面目に段落タグをふっているように見えました。
デバッグツールで見て見ると、こう、ちゃんと空行ごと、ブロックごとに段落タグをつくっていて、さらに１行ごとには<span>で囲んでいる。
うう～ん、手が込んでます。

そういう感じなのって全然知らなかったな……。

青空文庫

 ニャルラトホテプ……這い寄る混沌……残ったのはもうわたしだけ……この何もない空を聞き手にして、お話ししようと思います。<br />
<br />
 そもそものことは、はっきりとは思い出せません。でも何ヶ月か前です。みんなひどくぴりぴりしていました。世の中がひっくり返ろうとしているところへきて、なぜだか強く身に危険を感じて不安になる――あたりが、どこもかもが危なかったのです。夜をただわけもなく怖がる、そんな極端なときにしか感じないたぐいの〈危険〉です。思い出せば、道を歩くみなさん真っ青な浮かない顔で、何かの前触れだとか、これから先のこととかささやくのですが、どなたもわざわざ繰り返したり、聞いたことにうなずいたりはなさいませんでした。国中はこれからとんでもない罰を受けるかのようで。星空の奥の深い闇から吹き流れる冷ややかな風に、人は暗くうら寂しいところで震えていました。四つの季節がめぐるなか、悪魔のような異変が起こる――時は秋で、暑さがいつまでも引かず、誰もが胸に抱くのです。この世界、いえもしかするとこの宇宙は、もう暴走するだけではないのか。わたしたちの知る神さまも、神さまの天候を操る力も、あるいはあずかり知らぬ力も、もはや及ばないのでは……。<br />

（青空文庫の本から適当に選んだものですが、）「ニャルラトホテプ」はXHTML版で、<br />改行でした。

おそらく本来であれば「上の塊」「下の塊」と段落を分けてpタグで指定するのが正道と呼べそうな述懐と2段落目ですが、<br />でやっていますね。
段落タグは全体についていて、厳密に段落に分かれていません。

Privatter

ちょっとここは個人サービスだから毛色が違うけど、いつもお世話になっているPrivatterちゃんについてもみてきました。小説用ってわけじゃないんで、またつくりは違うと思いますが……。

<p class="honbun">奇行をはたらく名探偵は、良い。<br />
例えば古くからはシャーロック・ホームズであったり、直近だと『パラノマサイト FILE 23 本所七不思議』が面白かったので探偵・癸生川凌介事件譚シリーズをやっていた。この探偵（癸生川と書いてきぶかわと読む）は奇声を上げながら初対面の人に向かってキリモミ回転したりしていて、大変良い。なお、パラノマサイトのほうの探偵は格好がやや珍妙なくらいで良いヤツである（くじに一喜一憂したりする）。<br />
奇行をはたらいているからといって名探偵とは限らない。<br />
<br />

こんな感じで、全体をまず段落タグでかこって、honbunクラスとしていて、各ブロックというのは意識していないようですね。

この中だと、青空文庫とか、Privatterとかが、いちばん普段やっているのと近いかな。

真面目に頑張るとするならば……

ただ単純にHTMLに流し込むとき、毎回<br>タグを乱舞させていたわけですが、この度悔い改めてちゃんとすることも検討しました。
やろうと思えばやれるけど、あえてやんないだけなんだからねっ！　ねっ！

ブログのエディタとか、そういうのではたぶん「1行空いてたら、段落」と判定してるんだと思いますし、規則性はあるといえばあるので、なんとか置き換えることもできそうでした。

たださあ～、

段落1の記述。

＊＊＊

段落2の記述。

っていうところもあるわけで、たぶん、そうしたら、正解は

<p>段落1の記述。</p>
// pへの設定でもたらされる適切なマージン
<hr>または<div></div>など、適切な区切り // ここでクラス定義でおしゃれな区切りをCSSでつける
// pへの設定でもたらされる適切なマージン
<p>段落2の記述。</p>

となるんだと思うんですよ。ちゃんと書いたらね。

そういうところの「＊＊＊」までいちいち<hr>とかにしたくないんだよなあ。区切り文字も気分によって「◆◇◆」とかに変えてるし、小説に限っては、HTMLにするときだけ、中身をいじったり、意味を考えてタグを付与するのがやなんだよなあ……個人的に……。

もしくは、区切り文字をここは単純に、1個の段落とみなして……。

<p>段落1の記述。</p>
// pへの設定でもたらされる適切なマージン
<p>***</p>
// pへの設定でもたらされる適切なマージン
<p>段落2の記述。</p>

かな。
こうしたらある程度規則的に処理できそうではあるけれども、ちょっとめんどくさいよね。

個人の小説サイトはそこまでしなくていいんじゃない？

正直な話、ちょっと行儀が悪くても、個人サイトの小説の本文くらいだったら、ブロック分けせずに、<br>でやるのもアリだと思いました。
一番取り回しやすくて、事故がないかな～……と思っています。

あるいは、もうちょっと頑張るなら段落タグでもいいけど、段落タグでマージンまでは指定しなくてもよいだろう。
なろうとかカクヨムみたいに、

<p><br /></p>

程度でよかろうと思います。

何度もする作業において、マークアップを真剣にやるのはコストが大きい……。
せいぜいルビ振ったり、章ごとのマークを入れたり、改行タグを入れ込むだけで済ませたい。
段落1個1個とか、あんまり相手にしたくない。

ブログとか使うと、そういうところをエディタが負担してくれているんでしょうね。

ちゃんと、ブロックごとに段落タグを振ったり、3行改行が連続していたらマージンを整えたりとか（pixivや、ブログのエディターみたいに）自動化できなくもないところなんですが、いちいち「ここは3行空きの属性をつけて～」と表現の意味を考えるのがちょっと手間で、ちゃんとHTMLに変換できるように規則に縛られるのがたいへんにめんどくさい。

というか、小説の場合においては「段落と段落のあいだ」は、CSSで調整するような、「適度な間隔を開けたいがために１行入れてる」ではなく、ほんとにそのままの意味で「１行分開けてほしい」の記号であるとも思うんですよね。
原稿用紙に１行開けるように、１行、ただ、改行がほしい。それは行間っていうよりは「１行」であるといえるのかもしれない。

そもそも、「表示の仕方だけを指示する」という考えであったとしても、字下げする場合、すでにだいたい「全角スペースで字下げしちゃってる」からなあ。これだって本来はpタグ（っていうかcss）が頑張るべきなんだろうし、それで、「字下げある、なし」のpタグを振るべきなんだろうし、それって、すっごくやりたくない……。

どうしても頑張るとするなら、人の手でやるのはつらいので、空気を読んで段落タグをちゃんと振ってくれるプログラムを作ってやってもらう、とか、そういう手段かなと思います。

塊ごとに自動的に<p></p>をふってくれるやつはあったんですが、「3行空きだからそのまま3行空けてくれる」みたいなやつとかはちょっと高度で見当たりませんでした。
こういうところを段落タグに置き換えると、中身のない<p></p>として処理されたり、どっか消し飛んだりします。
だから、ちゃんと3行空きの属性を持ったマージンを指定したクラスを用意……よう……
用意するのがめんどくさすぎる。
ここは妥協して……。いいんじゃないかな、改行タグでも……。

というわけで、当面は改行タグでいこうかな、と思っています。

ただ、カッコイイわけではなさそうなので、いい感じのやり方があったら知りたいです。
教えてください……。

追記：white-spaceプロパティ

white-spaceというプロパティで、要素内のホワイトスペースの扱いを指定できると教えてもらって、調べてきました。

<p style="white-space: pre-wrap;">
 文章
<p>

とすると、この中身に忠実に表示してくれるそうです。

wrapをつけると、折り返しでちゃんと折り返してくれると……。

おお～、できてる！！

これだったら、プレーンテキストを突っ込んでおいたらみためまんまでやってくれそうです。
あまり見かけないのはブラウザの互換とかがあるのかしら、
と思ったのですが、ちゃんと主要なブラウザはカバーしているようです。

html上に忠実にプレーンテキストを入れなきゃいけなくて、余計なタブとかでインデントつけるとそれも反映されちゃうのでびったびたにしないとなりません。

自動フォーマッターとかが動いてタブが入るとちょっと困ることになります。
ただ、今回やりたかったのはまさに「プレーンテキストを再利用したいんだ！」が出発点だったので、
すごく便利ですね。

とはいえあまり聞かないってことはなにか、その、落とし穴があるんでしょう……？
なんか、こう、あるんでしょ？
と思って調べてったんですが主に「細かいレイアウトが制御できないですよー」という感じでした。
それは＜br＞タグも同じですね。

これは……省エネしたいときはすごく楽だなあ……。

ただ、あまり見かけないんだよなあ……。
王道ではないのかなあ……。

ノベル系のサイトとか、どっかで使われてないのかな、と思って例を探していたら、
デジタル庁の求人ページがプレーンテキストっぽいという話を聞きました。

たしかに、なんか、中身はプレーンテキストっぽいし、そうしてそうな気配がありそうです。