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

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

上図①の赤枠で囲った部分がWordで編集した原稿になります。次にHTMLソースを示しましたが、テンプレートの中で本文の部分にWordから変換したHTML（赤枠で囲った部分）を貼り付けていることを確認できます。

上図②～⑤をWord編集した原稿と対応させると次のようになります。

次にHTMLの②から⑤の部分に対応するWordの該当部分で使用している機能を説明します。以下ではWordの機能を「」で囲んで示します。
②は文書の表題にあたり、段落に「アウトラインレベル１」を設定しています。
③の段落は日付なのでWordで「右寄せ」を設定しています。
④は冒頭の枠囲みです。「HTML on Word V1.0」では枠囲みを無視するので、一行一列の「表」で枠囲みを表現しました。
⑤は「自動生成の目次」です。Wordではアウトラインレベルを設定した段落（見出しスタイルにもアウトラインレベルが設定されている）から自動的に目次を生成できます。目次を生成した後、表題の項目は、Wordで削除しました。

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

上図⑥、⑧、⑪はWordのスタイルギャラリーで「見出し１」、「見出し２」、「見出し３」のスタイルを適用しています。見出しにはWordで「アウトライン番号」を設定しました。アウトライン番号は、レベル１がⅠ、Ⅱ、Ⅲ、…、レベル２がA、B、C、…、レベル３が、1、2、3、…と定義しています。
⑦はWordでリボン「挿入」の「リンク」グループ「相互参照」で参考資料3)へのリンクを設定しています。
⑨はWordの「箇条書き」を設定しました。
⑩はWordで「段落番号」を設定した段落から変換した番号付き箇条書きです。番号付き箇条書きは2階層になっています。なお、HTMLの番号はCSSを使って、1階層は漢字、2階層はカタカナに設定しました。

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

⑫は段落に「アウトラインレベル１」を設定しました。
⑬はWordで「段落番号」を設定した段落です。
⑭はWordでリボン「挿入」の「リンク」グループの「リンク」を使って設定しました。
⑮はWordで「段落番号」を設定した段落で、⑦のリンクの宛先になっています。

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

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

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

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