※本ページにはプロモーション(広告)が含まれています
Macに標準搭載されている「テキストエディット」は、シンプルながら多機能なテキストエディタです。リッチテキスト形式(.rtf)で作成した文書をHTML形式にエクスポートすれば、そのままWebページとして公開できそうな印象を受けます。しかし実際にエクスポートしてみると、「フォントが変わってしまう」「改行が消える」「画像が表示されない」「文字化けする」といった表示崩れのトラブルに直面することがあります。本記事では、テキストエディットでRTFをHTMLにエクスポートしたときに表示が崩れる原因を8つのパターンに分けて徹底解説し、UTF-8の正しい指定方法、PagesやMicrosoft Wordといった代替ツールの活用法まで、実践的な解決策を完全網羅でお届けします。

🛒 関連商品をAmazonでチェック
この記事でわかること
- テキストエディットがRTFとHTMLを扱う内部構造の仕組み
- HTMLエクスポート時に表示崩れが発生する8つの原因パターン
- 文字エンコード(UTF-8)を正しく指定して文字化けを防ぐ手順
- HTMLサニタイズで失われるスタイル属性の見極め方
- フォント埋め込み非対応への対処と代替フォント指定法
- 画像をBase64変換またはファイル参照で正しく出力する方法
- AppleScriptを使ったエクスポート自動化と一括変換のテクニック
- Pages・Microsoft Word・他のサードパーティツールとの徹底比較
- FAQ形式で実務でよくある7つの疑問への回答
テキストエディットがRTFとHTMLを扱う仕組み
テキストエディットは、Apple純正のテキスト編集アプリで、macOSに標準でインストールされています。一見すると単純なメモ帳のように見えますが、内部的にはCocoaフレームワークのNSAttributedStringというリッチテキスト表現を中核とした、高機能なドキュメントエディタとして設計されています。RTF形式は、このNSAttributedStringのフォーマット情報を比較的忠実に保持できる形式として採用されており、HTMLエクスポートはこのRTFを変換することで実現されています。
RTF(Rich Text Format)はMicrosoftが1987年に策定したフォーマットで、テキストにフォント・色・サイズ・段落・画像などの装飾情報を埋め込めるテキストベースの形式です。一方HTMLはWebブラウザで表示することを前提とした、タグベースのマークアップ言語であり、両者の表現できる情報には大きな差があります。テキストエディットはNSAttributedStringを介してRTFとHTMLを相互変換しますが、この変換の過程で情報のロスやレイアウトの再解釈が発生することが、表示崩れの根本原因となっています。
テキストエディットがHTMLを書き出すとき、内部では `-[NSAttributedString dataFromRange:documentAttributes:error:]` というメソッドが使われ、ドキュメント属性として `NSHTMLTextDocumentType` を指定して書き出されます。この処理ではCSSが自動生成され、`` タグの中にフォント情報が埋め込まれます。しかしフォント自体は埋め込まれず、参照名のみが書き出されるため、HTMLを開く環境にそのフォントがないと表示が変わってしまいます。
また、テキストエディットのHTMLエクスポートでは、文字エンコーディングのデフォルトがUTF-8ではあるものの、書き出し方法によっては `meta charset` タグが正しく付与されないケースがあり、結果としてブラウザがエンコーディングを誤認識して文字化けを起こすこともあります。さらに画像については、内部的にはNSTextAttachmentとして保持されており、HTMLエクスポート時には別ファイル(`.fileloc` フォルダ)に画像を切り出すか、もしくはBase64でインライン化するかが選択できますが、デフォルト設定では別ファイル形式となるため、HTMLファイル単体を別環境に持っていくと画像参照が壊れてしまいます。
HTMLエクスポート時に表示が崩れる8つの原因パターン
原因1: 文字エンコーディング(UTF-8)の不一致
テキストエディットでHTMLエクスポートしたファイルをブラウザで開いたとき、日本語が「縺」「繧」のような文字列になってしまうのは、文字エンコーディングの不一致が原因です。テキストエディットの保存設定で「エンコーディング」をShift_JIS(日本語(Mac OS))のまま保存してしまうと、ブラウザが標準的に解釈するUTF-8と異なる解釈になり、文字化けを起こします。HTMLヘッダーに `` が正しく挿入されない設定で保存した場合も同じです。
原因2: フォント埋め込み非対応によるレンダリング差異
RTFファイル内では「ヒラギノ角ゴシック」「游ゴシック」「Helvetica Neue」などのフォント情報が保持されますが、HTMLにエクスポートしたときフォント自体は埋め込まれません。代わりに `font-family` のCSSプロパティとして参照名のみが書き出されます。そのHTMLを別のMacやWindows、Linuxのブラウザで開くと、そのフォントが入っていない環境では代替フォントに置き換わり、文字幅やデザインが変わってしまいます。
原因3: 改行・段落構造の崩壊
RTFでは「段落」と「改行」が区別されており、それぞれ `\par` と `\line` という別の制御文字で表現されています。テキストエディットがHTML出力する際、段落は `
` タグに、改行は `
` タグに変換されるのが期待される動作ですが、実際には改行コードがCRLF/LFで混在していたり、空行をどう扱うかが曖昧だったりするケースで、HTMLの改行が消えたり余計な余白が入ったりします。
原因4: HTMLサニタイズによるスタイル除去
テキストエディットのHTMLエクスポートでは、CSSがインラインスタイルとして出力されますが、一部の装飾情報は変換の過程で「サニタイズ」されます。例えばRTFで設定した行間(行送り)が `line-height` プロパティに正しく反映されない、文字間隔(カーニング)が消えてしまう、特殊な箇条書きスタイル(全角の四角や三角など)が `
- ` の標準スタイルに置き換わってしまう、といった崩れが発生します。
原因5: 画像のBase64変換失敗または別ファイル参照
RTF内に貼り付けた画像は、テキストエディットのHTMLエクスポートでは「`.fileloc` フォルダ」と一緒に書き出されるのがデフォルト動作です。HTMLファイルは画像を相対パスで参照しているため、HTMLファイルだけを他の場所(WebサーバーやメールへのZIP添付以外の手段)に持っていくと、画像が一切表示されなくなります。Base64エンコードでインライン化する選択肢もありますが、テキストエディットの標準GUIからは設定できません。
原因6: テーブル(表)の構造変換ミス
RTFでは表は `\trowd` `\cell` `\row` といった制御文字で表現されており、テキストエディットでもセルを編集できます。しかしHTMLにエクスポートするとき、`
| ` への変換は行われるものの、セルの幅指定や結合(rowspan/colspan)が正しく反映されないことがあり、表が崩れて表示されることがあります。特にセル内に改行を入れていた場合、その改行が ` ` ではなくスペースに変換されてしまうケースが多いです。 |
原因7: リンクとアンカーの破損
RTFで挿入したハイパーリンクは、HTML出力で `` に変換されますが、リンク先のURLに日本語が含まれている場合や、ローカルパス(file://…)を指している場合、URLエンコードが不完全になりリンクが切れてしまうケースがあります。また、文書内アンカー(同じ文書内のジャンプリンク)は、テキストエディット側で対応していないため、HTML出力時に消滅します。
原因8: スマートクオート・自動補正による意図しない置換
テキストエディットには「スマートクオート」「ダッシュ」「リンク自動補正」といった機能があり、半角クォート(`”`)を全角クォート(`「」`や`””`)に自動変換します。これらの特殊文字がHTML出力されたとき、HTMLエンティティ(`“` など)に置き換わるか、UTF-8の生文字のまま出力されるかが状況によって変わり、HTML側のJavaScriptやテンプレートエンジンでエラーを起こす原因になります。
UTF-8を正しく指定して文字化けを防ぐ手順
文字化けは、テキストエディットのHTMLエクスポートで最も発生しやすい問題ですが、設定を見直せばほぼ完全に防げます。以下のステップで設定を確認し、正しいUTF-8エンコーディングを指定しましょう。
ステップ1: テキストエディットの「環境設定」を開く
テキストエディットを起動し、メニューバーから「テキストエディット」→「設定…」(macOS Ventura以前は「環境設定…」)を選択します。「新規書類」と「開く/保存」の2つのタブがあり、HTMLエクスポートに関わる設定は両方のタブで行う必要があります。
ステップ2: 「開く/保存」タブでHTML出力設定を変更
「開く/保存」タブを開くと、下部に「HTML保存オプション」セクションがあります。ここで以下の設定を行います。
- ドキュメントタイプ: 「HTML 4.01 Strict」または「XHTML 1.0 Strict」を選択(互換性が高い)
- スタイル: 「CSS 1を埋め込む」を選択(古い「CSS 2」より互換性が高い)
- エンコーディング: 「Unicode(UTF-8)」を必ず選択
- イメージのコピーをエンコード: チェックを入れる(Base64インライン化に近い動作)
ステップ3: 既存ファイルのエンコーディング変換
すでに作成した.rtfファイルを開いて、エンコーディングがShift_JISなどになっている場合は、「ファイル」→「複製を保存…」または「別名で保存…」から、保存ダイアログ下部の「プレーンテキストのエンコーディング」を「Unicode(UTF-8)」に変更してから保存し直します。リッチテキスト保存時には直接エンコーディング選択肢が出ないため、いったんプレーンテキストに変換するか、上記の「環境設定」での設定変更が必要です。
ステップ4: HTMLファイル冒頭にmeta charsetを確認
エクスポートしたHTMLファイルをテキストエディタ(または同じテキストエディットでもプレーンテキストモードで開く)で開き、`
` タグ内に `` (またはHTML 4.01の場合 ``)が記述されているか確認します。記述がない場合は手動で追加します。ステップ5: ブラウザ側のエンコーディング設定確認
ブラウザで開いて文字化けする場合、ブラウザのメニューから「表示」→「テキストエンコーディング」を選び、UTF-8を強制指定して再読込してみます。これで読めるなら、HTMLファイル側のmeta charset指定漏れか、サーバー側のContent-Typeヘッダー設定が原因です。
HTMLエクスポート時の問題と対処法 比較表
| 問題現象 | 主な原因 | 推奨対処 | 所要時間 | 難易度 |
|---|---|---|---|---|
| 日本語が文字化け | エンコーディング不一致 | 環境設定でUTF-8固定 | 2分 | 初級 |
| フォントが変わる | フォント非埋め込み | Webセーフフォント指定 | 5分 | 初級 |
| 改行が消える | 段落/改行コード混在 | 段落区切りに統一 | 10分 | 中級 |
| 装飾が消える | サニタイズによる除去 | CSS手書き追加 | 20分 | 中級 |
| 画像が表示されない | 別ファイル参照 | Base64化または同梱 | 15分 | 中級 |
| 表(テーブル)が崩れる | セル幅/結合の変換ミス | HTML側で手動調整 | 30分 | 上級 |
| リンクが切れる | URLエンコード不完全 | リンクを再設定 | 10分 | 初級 |
| クォートが変 | スマートクオート自動変換 | 自動補正をオフ | 2分 | 初級 |
AppleScript連携で一括変換を自動化
大量の.rtfファイルをHTMLに変換する場合、テキストエディットのGUIを1つずつ操作するのは現実的ではありません。AppleScriptを使えば、フォルダ内のすべての.rtfファイルを自動でHTMLに変換できます。以下はScript Editorで実行できるシンプルなサンプルスクリプトです。
tell application "TextEdit"
set theFolder to choose folder with prompt "RTFが入ったフォルダを選択"
tell application "Finder"
set rtfFiles to every file of theFolder whose name extension is "rtf"
end tell
repeat with rtfFile in rtfFiles
set theDoc to open (rtfFile as alias)
set newName to (text 1 thru -5 of (name of rtfFile as text)) & ".html"
set htmlPath to (theFolder as text) & newName
save theDoc in file htmlPath as "HTML"
close theDoc saving no
end repeat
end tell
このスクリプトを Script Editor で実行すると、フォルダ選択ダイアログが表示され、選んだフォルダ内のすべての.rtfファイルを自動でHTMLに変換します。注意点として、AppleScriptからのHTML保存ではテキストエディットの環境設定で指定したエンコーディング設定が反映されるため、事前にUTF-8固定にしておくことが大前提です。
代替ツールの活用 (Pages / Microsoft Word / Pandoc)
Pagesでの代替アプローチ
Apple純正のPagesは、テキストエディットよりも高機能なドキュメント作成ツールで、Microsoft Word形式やHTML形式へのエクスポートも可能です。Pagesでは画像のレイアウト保持精度が高く、フォント・段落・スタイルの再現性もテキストエディットより優れています。ただしHTMLエクスポート時のCSSはやや冗長になりがちで、ファイルサイズが大きくなる傾向があります。
Microsoft Wordでの代替アプローチ
Microsoft Wordは法人ユーザーに多く、HTMLエクスポート機能も成熟しています。「Webページ(.htm)」と「Webページ(フィルタ後).htm」の2種類があり、後者はOffice固有のXMLタグを削除して標準的なHTMLに近づけたものです。Wordの場合、画像はBase64インライン化ではなく別ファイル参照になりますが、画像フォルダ自動生成の挙動が明確で扱いやすいです。
Pandocによるコマンドライン変換
本格的に大量変換や、HTMLの構造を厳密にコントロールしたい場合は、Pandocというオープンソースのドキュメント変換ツールがおすすめです。`brew install pandoc` でインストールでき、以下のようにコマンド1行で.rtfから.htmlへの変換が可能です。
pandoc input.rtf -o output.html --standalone --metadata title="タイトル"
Pandocは画像のBase64インライン化、CSS指定、テンプレート利用などの細かいオプションが豊富で、Web公開を前提とした清潔なHTMLを生成できます。

FAQ よくある質問7問
Q1: テキストエディットで保存した.htmlをブラウザで開くと、画像が表示されません。なぜですか?
A: テキストエディットは、HTMLエクスポート時に画像を別フォルダ(同じ名前の `.fileloc` フォルダ)に書き出します。HTMLファイルだけを移動すると、画像参照が壊れて表示されません。HTMLファイルとフォルダを必ずセットで移動するか、Pandocなどの代替ツールでBase64インライン化してください。
Q2: 環境設定でUTF-8に設定したのに、開くたびにShift_JISに戻ってしまいます。
A: 環境設定の「開く/保存」タブの「プレーンテキストファイルのエンコーディング」と「HTMLファイルのエンコーディング」は別の項目です。両方ともUTF-8(Unicode (UTF-8))に設定し直してください。また、開くファイル自体がShift_JISで保存されている場合、開いた瞬間に文字化けする可能性があります。
Q3: HTMLにエクスポートしたら、フォントが「Times New Roman」に変わってしまいます。
A: 元のRTFで使っていたフォントがWebセーフフォントではない場合、HTMLで参照しても閲覧側にそのフォントがなく、ブラウザ標準フォント(Times)にフォールバックします。Pagesに移行して「フォント」をArialやHelvetica、または `sans-serif` 系のWebフォントに変えてからエクスポートするか、エクスポート後のHTMLのCSSを手動で書き換える必要があります。
Q4: テキストエディットのHTMLエクスポートでCSSは外部ファイルにできますか?
A: テキストエディットのGUIからはCSSの外部ファイル化はできません。エクスポート時は常に `
minto.tech スマホ(Android/iPhone)・PC(Mac/Windows)の便利情報をお届け! 月間アクセス160万PV!スマートフォン、タブレット、パソコン、地デジに関する素朴な疑問や、困ったこと、ノウハウ、コツなどが満載のお助け記事サイトはこちら!