ガイド · DOCX → HTML

Word が HTML になるとき何が残るか

「書式をそのままに」には二つの意味があり、どちらのつもりかで結果に満足できるかが決まります。

構造 —— 見出し、リスト、表、強調 —— は通ります。見た目 —— フォント、色、余白、改ページ —— は通りません。これは機能の欠落ではなく、意図した選択です。

変換ツールを開く

構造は残り、見た目は残らない

.docx は段落ごとに、互いに無関係な二つのことを保存しています。それが何であるか、と、それがどう見えるか。「見出し 2」は前者です。Calibri 16pt 太字・段後 6pt は後者です。

変換ツールは前者を読み、後者を捨てます。見出し 2 は <h2> になります —— フォントサイズの付いた <p> ではありません。あなたのサイトに置けば、そこで自分の見出しスタイルを受け取ります。ほぼ確実にそれが欲しかったものです。

もう一方の道は Word 自身の「Web ページとして保存」がやることです。ページをそのまま再現する mso- スタイルが数千行、あとから編集もスタイル変更もできません。

見出しは太字にするのではなくスタイルを当てる

変換前に Word でやっておく価値があるのはこれだけで、出力が良くなるか平板になるかの分かれ目です。

見出しに見えるだけの文字 —— 大きくして太字にしてサイズを手で変えたもの —— は普通の段落として保存されます。それは <p> になります。実際にそうだからです。フォントサイズから意図を復元できるものはありません。

  1. 01Word で見出しにカーソルを置き、スタイルギャラリーを見ます。「標準」と出ていれば、それが原因です。
  2. 02代わりに見出し 1、2、3 を当てます。見た目は変わります。気に入らなければ見出しスタイル自体を変更してください。
  3. 03リストも同じです。「1.」とタブを打つのではなく、リストのボタンを使います。手で打った番号はそのままの文字になり、<ol> にはなりません。
  4. 04変換したら、出力に <h2> と <ul> があるか見てください。<p> が壁のように並んでいたら、その文書はもともと構造を持っていなかったということです。

通るもの

見出しのレベルは Word のスタイルから <h1> から <h6> へ。太字・斜体・取り消し線は <strong>・<em>・<s> へ。上付きと下付き。リンクは、Google と Office の追跡パラメータを外して。

リストは本物の <ul> と <ol> になり、入れ子は五段まで。表は <table> になり、結合セルも含みます。横方向の結合は colspan、縦方向は rowspan になります。

「引用」スタイルの段落は blockquote へ。スタイルがコードまたは書式なしの段落は <pre><code> へ。図表番号は <p class="caption"> へ。

捨てられるもの、その理由

フォント、サイズ、色、蛍光ペン、配置、字下げ、行間、改ページ、ヘッダーとフッター、余白。どれも一枚の紙に属する体裁で、HTML は紙ではありません。

捨てられるもののうち二つは見落としやすいので個別に。下線付きの文字は下線を失います —— Web では下線はリンクの意味なので、Word の下線は誤解を招く何かに割り当てるより、何にも割り当てないほうを選んでいます。それと、空の間隔用の段落は消えます。あれは内容ではなくレイアウトだからです。

変更履歴とコメントは捨てられます。手に入るのは最終の文字で、編集の履歴ではありません。テキストボックス・SmartArt・グラフは残りません —— 中の文字だけは、あれば残ります。

画像:三つの選択

古い .doc は例外です。どれを選んでも、あの形式から画像を取り出すことはできません。それ以外 —— 文字、見出し、表、太字 —— は通ります。

  1. 01base64 で埋め込むと、単体で完結した .html が一つできます。メールで送ることもダブルクリックで開くこともできます。元の画像より三分の一ほど大きくなります。
  2. 02別ファイルにすると zip になります。HTML と images/ フォルダで、どの <img> も正しいパスを指した状態です。実際のサイトに載せるならこれを。
  3. 03破棄すると <img> タグは残り src が空になるので、画像が壊れた枠が並びます。消すか、上の二つのどちらかを使ってください。

先に見出しスタイルを設定して、それから変換してください。ファイルはブラウザのなかで読まれ、アップロードされることはないので、社外に出せないものでも試せます。

DOCX → HTML