メモ

こちら の記事を参考に、「テキスト」にメモ帳ベタ打ちの文章をそのまんま流し込めるようにした。今のところ「SS置き場」のみ新スタイルを適用していますが、改行が反映されない場合は強制リロード（Win:Ctrl + Shift + R）やキャッシュの削除をお試しください。

ちょっと調べたら出るし本当に大したことじゃないんだけど、未来の自分が忘れてそうなのと、見てる人がいつかテキスト主体の個人サイトを作りたくなった時に引っかかるかもしれないので書いておきます。

結論：white-space(:pre-wrap)だよ。

解説
HTMLわかる人はご存じだと思いますが、HTMLでは文章の一つの段落は<p></p>というタグで囲うルールがあります。そして基本的にEnterを用いた改行は反映してくれません。じゃあどうやって改行するかというと、<br>というタグを改行したい場所に入れてやる必要があります。つまり

あいう
え
お

とブラウザ上で表示したければ「<p>あいう<br>え<br>お</p>」とか、もしくは「あいう」「え」「お」をそれぞれ<p>で括って書いてやる必要があるんですね。

小説なんかはメモ帳をはじめとする執筆ソフトやアプリで書くわけですが、サイトに載せたいなーと思ったらいちいちそれを原文とにらめっこしながら<p>で囲ったり<br>で改行する必要があるのです。冒頭で引用した記事にも書かれている通りこれが超面倒くさいこの記事を見つけた時はわかりすぎて首がもげるかと思った。

しかも<br>を連続で使うなとか、そもそもあまり改行すること自体が非推奨とかそういう「美しい・正しい記法」がちゃんと存在する。これが小説やブログの「本文」というものとめちゃくちゃ相性が悪くて、まあ詳細が気になる人には冒頭の記事を読んでいただいて。この前提だけ分かってれば読める記事なので。

ブログとか小説を置くのに特化したサービスは無数にあるんだからそれを使えば解決するんですが、じゃあ何のためのHPだよって感じで。そもそも外部サービスにあまり依存したくない気持ちを原動力に作ったHPですし。
でまあ、自分は今のところまれに短文しか書かないから手打ちで何とかなってるけど、まれにしか書かないからこそ億劫、それにいつか何かの気まぐれで長編なんて書こうものなら地獄が確定している。どうにかせねば。めんどくさいというのを先月末にうだうだ言っていたわけですね。


肝心の解決法も記事読んでもらった方がよっぽど詳しくて分かりやすいのですがいつか消える可能性を考えて一応書いておくか……

🌟任意のpにwhite-space: pre-wrapのスタイルを指定することで、スペース（半角/全角）や改行を反映したうえで自動折り返しもしてくれるようになります。

自分の場合は「main-text」というクラスに指定してみた。
<p class="main-text">ここにテキストを流し込めば改行も空白もそのまんま反映されるぞ！</p>という感じ。Tabによるインデントも反映されるのでそこだけ注意。スペースの統合とか折り返しの有無も他の値で指定できるので調べればいいと思う。


以上です。これでかなり文章載せやすくなったのでまた何か書きたいな。

畳む

#サイト #テキスト