テキストからHTMLへのコンバーター

プレーンテキストに変換が必要な理由

テキストエディタに入力すると、目に見える改行や空白行は、ファイル内では実在する文字です。ところがブラウザはそれらを無視します。HTML は、改行を含むあらゆる連続した空白を1つのスペースにまとめてしまうのです。きれいに整形した下書きをそのままウェブページに貼り付けると、区切りのない1つの段落として表示されてしまいます。間隔を取り戻すには、そうした目に見えない区切りを実際のマークアップに置き換えなければならず、まさにそれをこのコンバーターが行います。

ツールはあなたのテキストを読み取り、段落の境界を見つけ、各ブロックを意味のあるタグで囲むので、ブラウザはあなたが意図したとおりに内容を配置します。その結果は、きれいで構造化された HTML で、タグを1つも手入力することなく、CMS やメールのテンプレート、ブログ記事にそのまま流し込めます。

段落と改行はどのように検出されるか

中心となる規則は、単純で予測しやすいものです。空白行が、ある段落の終わりと次の段落の始まりを示します。空白行に挟まれたテキストの各ブロックは、それぞれの p タグで囲まれます。p タグは段落を表す正しい意味的な要素であり、ブラウザの既定のスタイルを通じて適切な間隔を与えてくれます。

段落内の単一の改行は、別の問題です。既定ではそれらは畳み込まれて消えますが、「改行を保持」を有効にすると、1つ1つの改行が br タグになるので、住所や短い詩などが、1つの段落の中でその正確な行構造を保てます。この区別は重要です。p タグはマージン（余白）を伴う独立したブロックを作りますが、br タグはその余分な間隔なしに、ブロック内での改行を強制します。

実例

空白行で区切られた2つの短い段落を思い浮かべてください。最初の段落は、入力した2行に分かれているとします。段落への変換をオンにし、「改行を保持」をオフにすると、2つの p 要素が得られ、最初のものはひと続きの流れる文として読まれます。「改行を保持」をオンにすると、最初の p には Enter を押した位置に br タグが含まれるようになり、入力した2行は積み重なったまま保たれます。同じ入力でありながら、1つのチェックボックスによって、まったく異なる、しかしどちらも完全に正しい2つの結果が選べるのです。

理解しておくべきエスケープの注意点

このコンバーターは文章のために作られているので、入力をコードとして無害化するのではなく、囲むべき内容として扱います。つまり、HTML で特別な意味をもつ文字は自動的にはエスケープされません。テキストに山かっこ（不等号記号）やアンパサンドがそのまま含まれている場合、それらは書かれたとおりにマークアップへと通り抜けます。

実際には、ふつうの文章ではこれで問題ありませんが、テキストに記号が含まれるときは慎重になってください。コードについて書いていて、段落に小なり記号に続いてタグ名が並ぶようなものが含まれていると、ブラウザはそれをマークアップとして解釈しようとするかもしれません。そのおそれがあるときは、危険な文字を自分で先にエスケープし、アンパサンドを & に、小なり記号を < に、大なり記号を > に置き換えて、それらが解析されずに文字どおりに表示されるようにしてください。

クラスと完全なドキュメント

2つのオプションが、出力をその行き先に合わせて調整します。「段落にクラスを追加」を使うと、生成されるすべての p タグに CSS クラスを刻印できるので、貼り付けたその瞬間に、内容のブロック全体があなたの既存のスタイルを引き継ぎ、手作業の編集は不要です。これは、変換したテキストをサイトのタイポグラフィに合わせる、最も速い方法です。

「完全な HTML ドキュメントで囲む」は、スニペットを、段落の周りに html・head・body タグを備えた、完全で独立したファイルへと格上げします。すでにその構造を備えた既存のページやエディタに貼り付けるときはオフのままにし、ブラウザで直接保存して開いたり、HTML ドキュメントとして添付したりできる、自己完結したファイルがほしいときはオンにします。

実際のワークフローでの位置づけ

最も一般的な用途は、文章をプレーンなエディタやメモアプリから公開システムへ移すことです。プレーンテキストで気楽に下書きし、それをコンバーターに通して、有効なマークアップを CMS に貼り付ければ、段落の区切りはそのまま保たれます。手作業で組み立てる HTML メールにも同じく役立ちます。多くのメールクライアントは CSS を取り除いてしまうため、空白に頼るのではなく、明示的な p タグと br タグが必要だからです。

開発者は、テンプレートやフィクスチャ（テストデータ）を素早く用意するためにこれを使い、ひとまとまりの文章を、コンポーネントやモックページのためのすぐ使えるマークアップに変えます。プラットフォーム間でコンテンツを移行する人なら誰でも、取り込みの前に、雑然と貼り付けられたテキストを、一貫した意味的な段落へと整えるために使えます。

避けるべきよくある間違い

典型的な間違いは、新しい段落のつもりのところで単一の改行を使い、それから2つのブロックがつながってしまったのはなぜかと首をかしげることです。本当の段落と段落の間には、空白行を入れてください。逆の間違いは、流れる文章に対して「改行を保持」をオンのままにしておくことで、これはテキストのあちこちに br タグをまき散らし、画面サイズが異なるときの自然な折り返しを妨げます。そして先に述べたとおり、ツールが特別な文字を無害化してくれると思い込まないでください。文字どおりに表示したい HTML 記号がコンテンツに含まれている場合は、変換の前にそれらをエスケープしてください。