『HTML on Word』の使用例として、先週11月2日に公開した「中堅・中小企業は2022年１月から施行される電子帳簿保存法第7条電子取引データ保存にどう対処するか（考察）」を紹介します。この原稿はWordで編集したもので、HTMLに変換した結果をほぼそのままWebページとしています。

１．Webページ全体と本文の先頭部分
まず全体の構成を説明します。Webページの上部はグローバルなナビゲーションメニュー、左側はサイドメニュー、また下にはフッターがあります（Webのフッターは次の図では見えていません）。これらはテンプレートとして用意されています。

１．Webページ先頭部分

テンプレートにWordから変換したHTMLを貼り付け

Word原稿の冒頭部分

２．Webページ本文の途中
次は表示を下に少しスクロールしたところです。見出し、箇条書き、リンクが設定されていることが確認できます。

Webページ表示を下にスクロール

３．Webページ本文の最後
次はWebページ表示の本文最後の部分です。

Webページ本文最後

４．補足説明
このWord文書をHTMLに変換する際に、一番、問題になる箇所はWordで段落番号のついた段落の扱いです。この例ではWordで段落番号を付けた段落を、⑩ではHTMLの番号付き箇条書きに変換しており、⑬では番号のついた段落に変換しています。Wordには番号付き箇条書きを直接指定する機能がないため、『HTML on Word』は、連続する二つ以上の段落に段落番号が付いていたら番号付き箇条書きとし、それ以外は番号のついた段落に変換するという方策をとっています。

その他には、アウトラインレベルと見出しスタイルの使い分けがポイントです。こちらは次の記事も参照していただくと理解し易いでしょう。

参考資料：Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

◆前回：（39）『HTML on Word』の使用例（3）サンプルCSSのレイアウト
◆次回：（41）『HTML on Word』の使用例（5）ハイパーリンクの編集と変換
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

『HTML on Word』は、Wordで書いた文書の見出し、本文、画像や表などの内容をWeb形式に変換します。

本日は、『HTML on Word』のレイアウトについて説明します。
まず、変換に際しては、見出し、本文、表などをHTMLのタグに変換しますが、そのときWordで指定したレイアウトをすべて無視します。レイアウトは別途CSSをリンクして指定します。

『HTML on Word』にはCSSのサンプルが同梱されています。サンプルCSSは、インストール時にプログラムをインストールしたフォルダの中にコピーされます。デフォルトでは次のフォルダーです。
C:\Program Files\Antenna House\xhw10\CSS

V1.0に同梱されているCSSは次図に示すように6種類があります。

HTML on Word（V1.0）に同梱されているCSS

『HTML on Word』をアドインから使用するとき、CSSを指定するにはアドインの「指定したCSSを用いる」メニューをクリックします。

アドインのメニューから変換設定と実行

CSSを選択するダイアログが表示されるので、上記のフォルダの中から望みのCSSファイルを選択します。

次に、オリジナルのWordの文書と、各CSSを指定したときのレイアウトのサンプルを示します。

１．オリジナルWord文書

オリジナルワード文書1ページ目

オリジナルワード文書2ページ目

２．次は、変換後のHTMLをブラウザ（chrome）で表示した状態です。
(1) sample.cssを指定したとき

sample.cssのレイアウト

(2) sample-basic.cssを指定したとき

sample-basicのレイアウト

(3) sample-news.cssを指定したとき

sample-newsのレイアウト

(4) sample-simple.cssを指定したとき

sample-simpleのレイアウト

(5) sample-thema-green.cssを指定したとき

sample-thema-greenのレイアウト

(6) sample-thema-warm.cssを指定したとき

sample-thema-warmのレイアウト

このようにCSSを変更することでレイアウトを好きなように変更できます。多くの場合、既にあるWebページ全体との調和を配慮して見栄えを変更したいと考えられます。このときは、いまのWebページのCSSを自分で用意して指定することになります。

※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。（リンクをクリックするとYouTubeを表示します。）

（１）【WordでHTMLが書けたらすごい！】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

（２）【WordでHTMLが書けたらすごい！】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

（３）【WordでHTMLが書けたらすごい！】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

（４）【WordでHTMLが書けたらすごい！】-vol.4 新しい解決策：『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

◆前回：（38）『HTML on Word』の使用例（２）Wordで書いたマニュアルをWebページにする
◆次回：（40）『HTML on Word』の使用例（4）Webページの実例。Wordの機能との対応付け
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

先週はWordで書いたお知らせをWebページにすることを紹介しました。

Wordで作成する文書は、お知らせ以外にも、手紙、見積書・請求書、調査レポート、アニュアルレポート、業務マニュアル、製品マニュアル、サービスマニュアルなど、実にいろいろな種類があります。

マニュアルのようなボリュームのある文書は、従来は紙に印刷されて配布されていましたが、最近はPDFとして作成して、デジタルで配信されることも多くなっています。さらに、今後は、見やすいWebページ（HTML）が求められるようになるでしょう。

そこで、今週は、Wordで書いたマニュアルをWebページ（HTML）にする例を紹介します。

次は、Wordで書いた『HTML on Word』のマニュアルに対して、目次を作成し、目次のあるHTMLを作成する例を動画にしてみました。

１．Wordの機能で目次を自動作成します。
(1) Wordでは、スタイルギャラリーの「見出し１」、「見出し２」といった見出しスタイルを使って見出しを設定すると、リボンの「参考資料」タブの「目次」メニューを使って目次を自動的に作成できます。
(2) このように作成した目次には、目次の項目から本文の見出しにリンクが設定されています。Wordの画面で目次の項目を選択して、Ctrlキー＋クリックすると、その項目の位置にジャンプします。

２．目次を作成したWord文書を、『HTML on Word』のアドインでHTMLに変換します。具体的には次のようにします。
(1) リボン「アンテナハウス」タブを表示すると、アドインのメニューになります。
(2) 「指定したCSSを用いる」をクリックしてCSSを選択します。CSSはHTMLにレイアウトを指定するためのものです。
(3) 「HTMLへ変換」をクリックします。すると変換後のHTMLを保存するフォルダを選択するダイアログが表示されます。適当なフォルダを選択して「OK」を押します。
(4) 変換で作成されたHTMLがブラウザで表示されます。
(5) HTMLの目次には、見出しへのリンクが設定されているので、ブラウザで目次の項目をクリックすると対応する見出しの位置にジャンプすることが分かります。

この操作を行った動画が次です。

このように『HTML on Word』を使えば、Wordで作成したマニュアルを簡単に目次のあるWebページ（HTML）に変換できます。

※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらからYouTubeをお進みください。

10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。（リンクをクリックするとYouTubeを表示します。）

（１）【WordでHTMLが書けたらすごい！】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

（２）【WordでHTMLが書けたらすごい！】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

（３）【WordでHTMLが書けたらすごい！】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

（４）【WordでHTMLが書けたらすごい！】-vol.4 新しい解決策：『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

◆前回：（37）Wordで書いたお知らせをWebページにする
◆次回：（39）『HTML on Word』の使用例（3）サンプルCSSのレイアウト
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

会社のお知らせやニュースリリースなどの広報文書を作成するためにMicrosoft Wordを使っている人も多いでしょう。

PCが登場した1980年代は、PC用の日本語ワードプロセッサがいろいろありました。その中でいまも生き残っているのは一太郎のみではないでしょうか。いまのオフィスで文書作成といえば、ほぼWord一択になっていると言っても過言ではありません。

長い間、日本語ワードプロセッサで作成した広報文書は、紙に印刷して手渡し、手紙などで物理的に配布されていました。Webが普及してからは、紙に代わって、PDFで配布されるケースが中心になっています。

文書の配布形式を紙からPDFに変更するのは簡単でした。なぜかというとPDFは紙をそのままデジタル化したものだからです。

（参考資料）PDFとはなんですか？PDFにするとどんなメリットがありますか？

しかし、現在は、Webを使って配信した広報文書はスマホを使って閲覧されることが多くなっています。

PDFはスマホでも表示できますが、A4サイズ（210mm×297mm）に、本文9ポイントで印刷した文字を、iPhone13の画面で表示するとどのくらいの大きさになるのでしょうか？

iPhone13の画面サイズは6.1インチとされていますが、これは対角線の長さなので、画面の横幅は計算上では6.5cm程度になります。実際に表示できる画面サイズはもっと小さいようです。仮に横幅6cmとすると、文字サイズは約2.6ポイントとなります。つまり、本文の文字の大きさが1ミリにも満たないサイズになってしまいます。

こうした計算をするまでもなく、A4サイズ用から作成したPDFをスマホで読みたい人はほとんどいないと言ってよいでしょう。

回りくどくなりましたが、Webで配信する広報文書はPDFではなく、Webページとして用意して欲しいものです。しかし、例えば、中央官庁から配信されているお知らせをざっとみても、現在、またPDFが大勢を占めているようです。

これを、簡単にスマホでも読みやすいWebページにするにはどうしたら良いでしょうか。まず、読みやすいWebページを作るには、文書をHTMLという形式をつかって表現しなければなりません。

誰でもすぐに思いつくのは、WordにはWebページ保存という機能があるので、それを使えばいいのではないだろうか、ということです。しかし、これは試してみるとほとんど使えないことがわかります。これについては、既に次のブログで報告しています。

月曜日連載！　Microsoft Wordスタイル探索 （30）WordのWebページ保存は使えるか？

そこで、アンテナハウスの『HTML on Word』（HOW）の登場です!

Wordで書いた文書をHOWを使ってHTMLに変換すれば、ボタン一つで、見やすいHTMLができます。

論より証拠、次のHOWのニュースリリースは、Wordで書いた文書をHOWでHTML化したものです。

HOWのニュースリリース

このニュースリリース・ページは、トップのメインメニューや、横のサイドメニュー、下のフッタを表現するテンプレートページに、Wordで書いたリリース文書を、HOWで変換・作成したHTMLの本体（body）を貼り付けて作成したものです。

Word文書とHTMLのサンプルは、次に公開しておりますのでご参照ください。

Antenna House Office Servers HTML on Word 使用例紹介：ニュースリリースをWordから作成する

前回、10月12日「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。（リンクをクリックするとYouTubeを表示します。）

（１）【WordでHTMLが書けたらすごい！】-vol.1 予備知識

「コンテンツ」、「HTML」、「タグ」、「レイアウト」、「CSS」といった基礎知識の説明です。

（２）【WordでHTMLが書けたらすごい！】-vol.2 タグを書かずにHTMLを作る、これまでの方法

「タグ」を書かずにHTMLをつくる、代表的なサービスや技術、問題点などを簡単に紹介します。

（３）【WordでHTMLが書けたらすごい！】-vol.3 WordからHTMLを作る、これまでの方法

Wordでも、HTMLは作れます。また、Word文書からHTMLを作る方法もいろいろ世間に提供されています。しかし、やはりあまり使われてはいないようです。なぜでしょうか。

（４）【WordでHTMLが書けたらすごい！】-vol.4 新しい解決策：『HTML on Word』

Word文書を「綺麗な」HTMLにすることを可能にした、新しい解決策『HTML on Word』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

◆前回：（36）『HTML on Word』の使用例（１）見出しと目次のあるWebページの作成
◆次回：（38）『HTML on Word』の使用例（２）Wordで書いたマニュアルをWebページにする
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

前回は、Microsoft Wordを使ってタグを書かずにリッチなHTMLを作成できる『HTML on Word V1.0』についてご案内しました。

今回は、『HTML on Word』を使ってできることをご紹介します。
ご承知のとおり、Microsoft Wordはオフィスで文書を作成する定番のワードプロセッサで、次のような強力な文書編集・校閲機能があります。

・検索・置換
・文書校閲機能－用語統一、文法チェック、コメント機能など
・見出しスタイル
・目次作成機能
・自動番号付け
・アウトライン番号、段落番号
・リンクと参照
・表、作画機能

次に、見出しスタイルによる①見出し作成⇒②アウトライン編集⇒③目次の自動作成⇒④目次のあるWebページの作成の例を示します。

この図は、Wordで編集中の『HTML on Word』のマニュアルの一部です。スタイルギャラリーの見出し１、見出し２、見出し３を使って階層化した見出しを付けています。

Wordで編集中のマニュアル、見出しの例

Wordのアウトライン編集を使えば、階層化した見出しをアウトラインで表示して編集できます。

階層化した見出しをアウトライン表示

このようにスタイルを使って付けた見出しからは、自動的に目次を作ることができます。

自動生成した目次

ここまでは、Microsoft Wordの見出しスタイルとその応用例です。このようにしてWordで作成した見出しと目次がある文書を『HTML on Word』で変換すれば、目次のあるWebページを簡単につくることができます。

HTML on Wordで作成した目次のあるWebページ

Wordを使えば、このように簡単に見出しを付けたり、目次のあるWebページを作ったりできるのですが、『HTML on Word』を使えば、さらにそれをそのままHTMLに変換できます。

◆前回：（35）Word でリッチなHTMLを作成しよう
◆次回：（37）Wordで書いたお知らせをWebページにする
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

弊社では、来る10月18日（月）Microsoft Wordを使ってタグを書かずにリッチなHTMLを作成できる『HTML on Word V1.0』を発売します。

『HTML on Word』は、①Wordで作成・保存した文書（docx）ファイルをHTMLに変換する「Word2HTML」変換プログラムと、②Wordのリボンに組み込むアドインから構成します。

①Word2HTML変換プログラムは、弊社のOffice Document Server Converter（OSDC）のWord文書解析機能を応用して開発したアプリケーションで、変換にはWordの機能を使わずに、独自処理を行います。

②アドインを使うとWordで編集中の画面上で、WordのリボンのメニューからWord2HTML変換プログラムを操作して、編集中の文書をHTMLに変換します。変換が終わるとブラウザなどで変換結果を表示できます。

これにより、変換結果を見ながら変換中の文書を期待通りの変換になるように調整できます。

次はアドインによる変換例です。
1．Word文書を編集

Word文書編集画面

2．アドインタブで変換設定と変換実行
・変換結果のHTMLにリンクするCSSファイルを指定
・変換先フォルダーを指定
・変換を実行

アドインのメニューから変換設定と実行

3．変換結果をブラウザでプレビュー
変換結果はWindowsでHTMLに紐付けたアプリケーションで開きます。ここではブラウザを紐付けているのでブラウザで表示します。

変換結果をブラウザで表示

10月1日付けの本製品のニュース・リリースは、Wordで編集し、本製品でHTMLに変換したものです（注を参照）。

ところで、「リッチなHTML」とはどういう意味だろう？　と疑問をお持ちかもしれません。リッチなHTMLとは、文書表現に加えて、表や図形を使った内容豊かなHTMLを表す造語です。

Webが登場して30年近くなり、Webが大変身近になっています。この立役者はタグを直接書かずにWebページを記述するブログの普及です。また、ここ10年ほどはマークダウンのような簡易記法が人気を集めています。しかし、ブログやマークダウンはHTMLタグの記述手段としては機能的に貧弱です。また、文書を作成・編集するための支援機能があまり充実していません。例えばブログやマークダウンで高度な表を作るのは困難です。こうしたことから、現在のWebページは断片的で内容が乏しい状態となっています。

こうした事情を鑑みて、現在のWebページの内容をもっと表現豊かなものにしたいという願いを込めて、リッチなHTMLという言葉を作りました。

（注）ニュース・リリース公開にあたって、Webページのメニュー表示、サイドメニューなど、弊社Webページ全体に合わせて表示するためのテンプレートにHTMLを差し込む調整を行っています。

◆前回：（34）HTMLとはなにか。だれが決めているのか。
◆次回：（36）『HTML on Word』の使用例（１）見出しと目次のあるWebページの作成
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

来る10月12日（火）16時からの「ちょっと一息・アンテナハウスウェビナー」は、

WordでHTMLを書けたらスゴイ!という題で、Microsoft Wordで書いた文書からWebページ（HTML）を作るというトピックで開催する予定です。

次の画像をクリックするとウェビナー案内ページが開きます。

関心をお持ちの方は、ぜひ、ご参加ください。

さて、このブログをお読みいただいている方でHTMLという言葉を知らない人は少ないと思います。しかし、HTMLという言葉を知っている人でも、HTMLとはどういうもので、どのように使うのか、そもそも誰が決めているのか？　について詳しく知っている人は少ないのではないでしょうか。そこで、まずHTMLとはなにか。誰が決めているのか。について極簡単に紹介してみます。

HTMLの概念はWebとともに誕生したものです。Webの基本概念を作り出したのはTim Berners-Leeです。彼の書いた“Weaving the Web”という本によると、1990年頃からWebを構成する3要素であるURL（資源の場所を特定する）、HTTP（通信規約）、HTML（ハイパーテキスト記述言語）を構想したようです。

Webが世間に登場したのは1990年代前半ですが、Webが一般に流行りだしたのは、1990年代後半です。ちなみに、アンテナハウスのWebサイトは1996年に開設しました。

そのころからW3C（Tim Berners-Leeが中心になって設立したWeb標準化コンソーシアム）でHTML拡張と標準化がすすめられました。

HTML3.2 （1997年1月W3C勧告、2018年3月に譲位）
HTML 4.01（1999年12月W3C勧告、2018年3月譲位）
XHTML1.0 （2000年1月W3C勧告、2018年3月譲位）
HTML5（2014年10月W3C勧告、2018年3月譲位）
HTML 5.1 （2016年11月W3C勧告、2017年10月第2版、2021年1月に譲位）
HTML5.2（2017年12月W3C勧告、2021年1月に譲位）

譲位という概念は難しいですが、W3Cの勧告が放棄される状態は次の3種類があると説明されています。

W3C勧告の放棄

ここではSupersededの状態を譲位と表現しました。譲位された仕様の参照先はすべて、HTML Living Standardとなっており、HTML Living StandardがWebページを記述するための、現在有効な唯一の仕様となります。

この10年ほどHTML5という言葉が、Webページの代名詞になっていました。W3Cの仕様ではHTML5という言葉が仕様の名前として使われています。

それに対して、HTML Living StandardのページではHTML5という言葉は、現代のWeb技術を表すバズワードであるとされています。
1.2 Is this HTML5?

HTML5はもはや特定のHTMLを示す用語ではなくなったことになります。

また、HTML Living StandardではXHTMLという用語はなくなってしまい、代わりにHTMLをXML文法で書く方法が規定されています。

1.8 HTML vs XML syntax

30年で、Webを支える技術の一つであるHTMLを制定する枠組みが、大きく変わったと言えます。

ところで「譲位」という用語は不適切という意見もいただきましたが、W3CはWebの帝王だったので。

◆前回：（33）Word文書からWebページ（HTML）変換について考える
◆次回：（35）Word でリッチなHTMLを作成しよう
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

現在のWebページの多くは、WordPress、はてなブログのようなブログ、Wikiペディアを代表とするWiki、最近では、noteやテッキーな人達にはGitHubが人気を集めています。こうしたWebページを見ると、一様に短文であり、またテキスト中心のシンプルな作りになっていて表現される内容の量や表現力という点で、PDFによるものと比べて、もの足りなく感じます。

PDFによる文書作成というと、まずMicrosoft Wordを思い浮かべるわけですが、Wordには、見出し作成、目次作成、段落への自動番号付け、文章の校閲機能、など強力な文章の編集機能があります。文章だけではなく、作図、表作成機能なども優れています。

Wordで図表などを盛り込んで作成した文書を、そのままWebページにできれば、Webページの表現内容がいまより豊かになるはずです。しかし、前回（（31）WordのWebページ保存は使えない。その理由は？）も説明した通り、Wordで編集中の文書を、Word自身の「名前を付けて保存」の「Webページとして保存」しても、そのままでは、Webページとして使えません。

Wordで作成した文書をWebページ（HTML）にしたいというニーズがあれば、それを満たすために、サービスやツールが提供されるのは必然です。次に、現在、どういうものがあるかを簡単にまとめてみます。

1．WordのWebページ保存で作成したHTMLをフィルターするツール
この代表例として、Webページ編集ソフトのDreamWeaverの「Word HTMLのクリーンアップ」機能があります。DreamWeaverは、デスクトップPC上で動作するアプリケーションです。「Word HTMLのクリーンアップ」ダイアログには次図のようなオプションがあります。

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ

DreamWeaverの「Word HTMLのクリーンアップ」ダイアログ（続き）

DreamWeaverの「Word HTMLのクリーンアップ」結果報告ダイアログ

2．Wordの不要なタグをフィルターするWebサービス
同じようなフィルタリング機能を提供するWebサービスもいろいろあります。

例えば、『Convert Word Documents to Clean HTML』サービスを見てみましょう。
https://word2cleanhtml.com/

Convert Word documents to Clean HTML のトップ画面

簡単なサンプルで試してみます。次はWordで箇条書きを指定してみました。箇条書きの項目の一部にルビを指定しています。

Word文書で箇条書きを指定した部分

『Convert Word Documents to Clean HTML』にペーストした状態

『Convert Word Documents to Clean HTML』にペーストした状態をブラウザで表示

次に、これを「Convert to Clean HTML」（ボタン）でクリーンなHTMLにします。同じ箇所は次のようになっています。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果

良さげです。しかし、この変換後のファイルをローカルに保存してブラウザ（Edge）で表示すると次のようになってしまいます。

『Convert Word Documents to Clean HTML』でクリーンなHTMLに変換した結果をブラウザで表示

箇条書きの項目先頭の記号が文字化けしてしまっています。

この変換例では、前回（（31）WordのWebページ保存は使えない。その理由は？）で整理した問題の中で、次の二つが該当します。

(2) 箇条書きを通常の段落タグにしているなどタグの表現が貧困
(3) 文字化け

『Convert Word Documents to Clean HTML』サービスはかなり良さそうですが、結構、大きな問題が残っています。

要するに、Wordで作成した文書からHTMLを作って、単にフィルタリングするだけでは不十分であり、もう少し賢い解決策が必要、と言えるでしょう。

◆前回：（31）WordのWebページ保存は使えない。その理由は？
◆次回：（33）Word文書からWebページ（HTML）変換について考える
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet

先週は（30）WordのWebページ保存は使えるか？というタイトルでWebページ保存があることを紹介しました。しかし、肝心の質問に答えるまでには至りませんでした（申し訳ありません）。今日は、いよいよ質問に答えてみたいと思います。

日ごろから使い慣れたMicrosoft Wordで書いた原稿を、そのままWebページにできたら、Webページ作成がより身近になることでしょう。さらにWordには、見出し作成、目次作成、段落への自動番号付け、文章の校閲機能、など強力な文章の編集機能があります。文章だけではなく、作図、表作成機能なども優れているので、Wordで図表などを盛り込んで作成した文書を、そのままWebページにできれば、Webページの表現内容もいまより豊かになるはずです。

こうしたメリットが期待できるにも関わらず、アマチュアならともかく、プロの制作者で実際にWordの原稿をそのままWebページにしている人はあまりいないはずです。なぜか？　その理由は単純にWordのWebページ保存は使いものにならないからです。

何が問題なのでしょうか？　以下は、やや技術的になりますが、実際の文書で調べた結果です。調査はWord 2019のWebページ保存（フィルター後）で行いました。

先週は、WordのWebページ保存には、①Webページ保存と、②Webページ保存（フィルター後）の2種類があること、Webページ保存では、ブラウザの表示には使わない、いろいろなファイルが保存されていることを示しました。ですので、WordでWebページを作るなら、Webページ保存（フィルター後）の方が適切なはずです。

Webページは、HTML（Hyper Text Markup Language）で書きます。Webページ保存（フィルター後）のHTMLファイルを、oXygen XML Editorで開いて内容を見てみます。先週、使ったファイルの本体（bodyタグ）先頭部分は次のようになっています。

WordでWebページ保存（フィルター後）の内容

気が付いた点を次に大雑把に整理してみます。

(1) 和欧混植の言語指定方法が不適切
和欧混植の文を、bodyにlang=JAを指定したうえで、段落のラテン文字に<span lang=EN-US>という属性をつけています。この結果、段落の文はすべて次のようにマークアップされています。

<span lang=EN-US>Word</span>の情報タイトルが<span lang=EN-US>HTMLの<span
lang=EN-US>title</span>に出力


しかし、日本語の文にはラテン文字を混在できるので、このような指定は不要です。こうした出力ではHTMLになった文章を編集するのが厄介になってしまいます。

(2) 箇条書きを通常の段落タグにしているなどタグの表現が貧困
Wordで箇条書きを指定した段落、番号付き段落などは、行頭に記号や数字のついた通常段落として表現されています。段落タグ以外で使われているのは、見出しランクタグ<h?>、表（<table>など）、イメージ（<img>）、文字飾り（<b>、<u>など）僅かで、タグの種類としては、このブログ（WordPress）よりも少なそうです。

(3) 文字化け
次の例は、別の箇条書きの部分ですが、フォントが段落の一部に直接指定されています。箇条書き記号にWingdingsというWordで昔から使われている特殊なフォントが指定されています。箇条書き記号はUnicodeでU+00B2（SUPERSCRIPT TWO: 上付きの2。これはおそらくWingdingsの内部番号をそのまま出している）となっていて、文字化けしています。Unicode標準にマップするなら、U+2727（WHITE FOUR POINTED STAR）とすべきではないかと思います。

<p class=a1><span style='font-family:Wingdings'>²<span style='font:7.0pt "Times New Roman"'> 
</span></span><span lang=JA style='font-family:HGP正楷書体'>新しい箇条書きスタイル</span></p>

(4) レイアウト指定が固定的になっており、後でCSSで変更できない
・通常の段落は<p class=MsoNormal>が指定されており、MsoNormalというクラス属性には、Wordで指定した段落スタイルをCSSにしたものが指定されているため、Webページに別のCSSをリンクしてレイアウトを変更しにくい。
・bodyにはstyle=’word-wrap:break-word;text-justify-trim:punctuation’のようにスタイルを直接指定しています。

これでは、原稿の作者が指定したレイアウトがWebページに影響を及ぼしてしまいます。現在のWebページは、文章などのコンテンツに対して、CSSでレイアウトを自由に指定・変更することが多いのですが、WordのWebページ保存は、コンテンツにレイアウトが密接に紐づいてしまっています。特にWordのレイアウトは紙にプリントすることを暗黙に想定されているのでWebページにそのまま使うのは不向きです。

(5) HTML文法上の問題
pタグにalign属性を付けるなど、既に廃止されたタグを使っているため、今回の文書では、oXygen XML EditorからHTML検証エラーが140個出されています。

以上は、一例に過ぎませんが、WordのWebページ保存（フィルター後）には、技術的にかなり問題があると言えます。なお、WordのWebページ保存はラウンドトリップ（HTML保存した結果を読むと元のWordのdocx版に戻ること）を想定しているためか、WordのWebページ保存（フィルター後）と比べて、さらに不要な情報が出力されています。

◆前回：（30）WordのWebページ保存は使えるか？
◆次回：（32）Word文書からWebページ（HTML）変換の既存実現手段は？
◆シリーズ総目次：Microsoft Wordのスタイル探索

お薦め記事
◆Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法（概要）

Tweet