月曜日連載！　Microsoft Wordスタイル探索の前々回（月（45）インデント機能の基本）と前回（（46）余白についてー補足）では、本文領域の幅が文字数×文字サイズの値に一致しない、つまり余りがでるときの扱いについて、「一行の文字数を指定時に右のインデント幅を自動調整する」が、ONのとき、その余りはインデント量の調整として余白に追加されることを説明しました。

今回は、この余りの調整についてもう少し探索してみます。

文字の大きさと余りの大きさ
まず、余りの大きさは、段落の文字の大きさによって変わります。例えば、用紙サイズA4のとき用紙の幅は210mmです。仮に左右の余白を各30㎜とすると、本文領域の幅は210-(30+30)=150㎜となります。
例として段落の文字サイズを9ポイントから24ポイントまで変更して、それぞれの設定での余りの幅を計算してみると、次の表のようになります。

段落の文字サイズ(pt)	文字サイズ（mm）	文字数	本文領域に入る文字数	余り(mm)
9	3.175	47.24409449	47	0.775
10.5	3.70416667	40.49493813	40	1.833333
12	4.23333333	35.43307087	35	1.833333
16	5.64444444	26.57480315	26	3.244444
20	7.05555556	21.25984252	21	1.833333
24	8.46666667	17.71653543	17	6.066667

9ポイントのときの余りが一番小さく、12ポイント、16ポイント、24ポイントと余りが大きくなります。

9ポイントではON/OFFで一行の文字数が変わる
「一行の文字数を指定時に右のインデント幅を自動調整する」がON/OFFでのレイアウト変化を見ると、9ポイントのときONにすると一行の文字数がOFFの時よりも小さくなっています。

ONにするとインデント幅がOFFのときよりも広くなり、行末の1文字分が入らなくなっているためです。

両端揃えのとき
両端揃えでは、OFFの時は行末が余白の位置になり、ONの時は余白の位置よりも内側になります。

なぜ、このようになるかを考えてみると、これを見るとインデント幅の調整量は、段落ごとの文字の大きさで計算した余りではなく、文書全体で同じ値が適用されるためのようです。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

●Vol.1：Word文書をWebページにした例の紹介
Word文書を実際にWebページ（HTML）に変換した実例を紹介します。
●Vol.2：Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
●Vol.3：CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
●Vol.4：Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。

---

月曜日連載！　Microsoft Wordスタイル探索
◆前回：（46）余白についてー補足
◆次回：（48）段落先頭行のインデント、タブの基本
◆シリーズ総目次

先週の、月曜日連載！　Microsoft Wordスタイル探索 （45）インデント機能の基本で、余白について説明しました。

その中で、

本文段落の幅は、通常、文字数×本文文字の大きさになります。すると、用紙の幅から左右余白の大きさを差し引いた値が、文字の大きさの倍数になっていないとき、本文段落の幅とは一致しないで余りがでます。この差（余り）は右余白に追加されます。

と説明しました。しかし、もう少し詳しく調べてみると、この動作は段落の設定によります。

「段落」ダイアログに「一行の文字数を指定時に右のインデント幅を自動調整する」というチェックボックスがあります。

前回の説明はこのチェックボックスがONになっているときの動作になります。ONのときは余りが右インデントの値に追加されます。次の図は段落の右インデントがゼロのときの動作です。チェックボックスがONのときは、右インデントがゼロでも余白と本文の終端に空きがあることが分かります。OFFにすると余白と本文の終端の空きがなくなります。

なお、チェックボックスOFFで余りがあるときの動作は段落の揃え指定によります。次の図は、段落の揃え設定を「両端揃え」（一番上）、「左揃え」（二番目）、「中央揃え」（三番目）、「下揃え」（一番下）にしたときの余りの位置です。

段落の揃えが両端揃えのとき、余りは文字間に分配されます。左揃えでは余りは右余白に追加（右インデントの増加）、中央揃えでは余りは左右余白に配分、右揃えではあまりが左余白に追加（左インデントの増加）として扱われています。

なお、「一行の文字数を指定時に右のインデント幅を自動調整する」チェックONの時は、段落の揃えの設定に関わらず、余りは右インデントの増加として扱われます。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

●Vol.1：Word文書をWebページにした例の紹介
Word文書を実際にWebページ（HTML）に変換した実例を紹介します。
●Vol.2：Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
●Vol.3：CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
●Vol.4：Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。

---

月曜日連載！　Microsoft Wordスタイル探索
◆前回：（45）インデント機能の基本
◆次回：（47）本文領域の幅が文字数×文字サイズの値に一致しないときの余りの調整を探索
◆シリーズ総目次

Wordのインデントは段落の右端あるいは左端の位置を変更します。また段落の先頭行のみの字下げ、あるいはその逆に先頭行のみを突き出し（２行目以降をぶら下げ）にする設定もできます。

Wordのインデントを増減するにはいろいろな指定の仕方があり、単位の設定なども関係していて複雑です。インデントを探索するにあたり、最初にインデントとは何かを簡単にまとめてみます。

余白
インデントは余白からの相対量になっているので、まず余白を説明します。余白は用紙の端から本文の文字入力領域までの間隔です。用紙の上下左右と行頭・行末の関連付けは横書きと縦書きで異なるので、以下は横書きを前提として説明します。
・上余白：用紙の上から本文の一番上の行までの空き
・下余白：本文の一番下の行と用紙の下端までの空き
・左余白：用紙の左端から本文の行頭位置までの空き
・右余白：用紙の右端から本文の行末位置までの空き
なお、Wordでは行や段落の前後には読みやすくするための空きが確保されるため、横書きでは用紙の上端と本文の一番上の行の上辺の間隔は余白と一致するとは限りません。つまり上余白を20mm確保したとしても、印刷したとき用紙の上端と文字の上端には20mmよりも大きな空きができることがあります。
また、本文段落の幅は、通常、文字数×本文文字の大きさになります。すると、用紙の幅から左右余白の大きさを差し引いた値が、文字の大きさの倍数になっていないとき、本文段落の幅とは一致しないで余りがでます。この差（余り）は右余白に追加されます。このため印刷すると見かけ上の右余白は指定した量よりも増えることになります。

上記の余りの扱いについては次回の補足も参照してください。月曜日連載！　Microsoft Wordスタイル探索 （46）余白についてー補足

インデント
インデントは段落単位で、余白を規準にして行頭と行末の位置を増やしたり減らしたりする機能です。インデントをプラスにすると余白が広がり、マイナスにすると余白が狭くなります。横書きでは左インデントで行頭の位置を指定します。次の段落（１）は左インデントをプラス1文字、（２）は左インデントをマイナス１文字に設定した例です。

次の段落（３）は右インデントをプラス1文字、（４）は右インデントをマイナス１文字に設定した例です。

インデントの設定
インデント機能はリボン「ホーム」の「段落」ダイアログから設定できます。

リボン「レイアウト」の段落グループでも左右のインデントを設定できます。

リボン「ホーム」には他に「インデントを増やす」、「インデントを減らす」コマンドがあります。

また、インデントマーカーをマウスでドラッグしてインデントを設定する方法もあります。

これだけでも結構多いと思いますが、どうやら他にもまだあるようです。指定方法が多様なのは便利なのか分かりにくいのか、少しばかり疑問です。次回はもう少し深く追求してみたいと思います。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」YouTubeのご案内。

●Vol.1：Word文書をWebページにした例の紹介
Word文書を実際にWebページ（HTML）に変換した実例を紹介します。
●Vol.2：Webページ構成要素別のWord編集例
Wordが持つ文書編集機能とWebページ作成時に必要となるHTMLタグがどのように対応しているかをご紹介します。
●Vol.3：CSSによる、Webページのレイアウト
見栄えの良いWebページを作成するうえで必須のCSSについて、サンプルファイルを交えながら設定例をご紹介します。
●Vol.4：Wordから上手にHTMLにする為の編集アドバイス
WordでWebページの原稿を作成するにあたり注意するべきポイントをご紹介します。

---

月曜日連載！　Microsoft Wordスタイル探索
◆前回：（44）Word文書をHTMLに変換するHTML on Word V1.1で表のヘッダー行、ヘッダー列の変換機能などを追加
◆次回：（46）余白についてー補足
◆シリーズ総目次

Word文書をHTMLに変換するツールHTML on WordがV1.1となりました。

英語版を用意
V1.1ではWindows（OS）の表示言語を英語に設定しているとき、インストーラの言語表示が英語になります。また英語版のオンラインマニュアルを用意しました。

表のヘッダー変換機能を追加
変換機能についてもいくつかの機能追加を行いましたが、目玉は表のヘッダーの変換機能です。

HTMLを編集する上で表の編集は厄介です。一方、Wordには簡単に画面で対話的に表を編集する機能があるので、Wordで表を編集してそのままHTMLに変換できればHTMLの表編集が簡単になります。

HTMLの表ではヘッダー行（thead）やヘッダーセル（th）を指定できます。Wordではそれに1対1に対応する機能はありません。

そこでWordで表を編集する際の操作を一工夫してヘッダー行、ヘッダー列を指定するとHTMLのヘッダー行（thead）やヘッダーセル（th）に変換できるようにしました。

表の先頭行を見出し行にする
表の見出しタグ（テーブルヘッダ：thead）を出力するには、表の先頭行に次のどちらかを設定します。
① 表の先頭行を選択して、Wordのリボン「表ツール：レイアウト」の「タイトル行の繰り返し」をオンにする。

② Wordのリボン「表ツール：テーブルデザイン」の「表スタイルのオプション」で「タイトル行」のみにチェックする。

表の先頭列を見出し列にする
表の先頭列を選択して、Wordのリボン「表ツール：テーブルデザイン」の「表スタイルのオプション」で「最初の列」のみにチェックすると先頭列のセルを見出しセルに設定します。

変換例
次はWordで先頭行を見出し行にした例（上）と先頭列を見出し列にした例（下）です。
CSSで見出しに対しては次のように指定しています。
・バックグラウンドカラー：Navy
・フォントの色：白

こうしてWordで作成した表をHTMLに変換するとき先頭行または先頭列をヘッダーにできるようになります。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。

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

---

月曜日連載！　Microsoft Wordスタイル探索
◆前回：（43）Wordのコピー＆ペーストによるハイパーリンク作成
◆次回：（45）インデント機能の基本
◆シリーズ総目次

本連載の第41回『HTML on Word』の使用例（5）ハイパーリンクの編集と変換で、Microsoft Wordのハイパーリンク作成機能の概要を紹介しました。

その後、これをもとに、WordのハイパーリンクとHTML変換のWeb記事を書こうと考えて調べていたところ、Wordには「コピー＆ペースト」でハイパーリンクを作成する機能があることが分かりました。次に本機能を簡単に紹介します。

リンク貼り付け
リンクのターゲットにしたい文字列などを選択、コピーし、次にそれを貼り付けるとき「形式を選択して貼り付け」のダイアログで「リンク貼り付け」をチェックします。

リンク貼り付けでは貼り付ける形式を選択できますが、Word Hyperlinkを選択すると貼り付けた箇所からコピー元の位置をターゲットとするリンクを設定できます。

リンク貼り付けを実行すると、ターゲット位置の前に「_Hlk」から始まる数字を含むブックマークが自動的に設定されます。

なお、リンク貼り付けで、Word Hyperlink以外の形式を選択すると、ハイパーリンク形式ではなくてフィールド機能を使うため、ハイパーリンクにはなりません。なお、このWord Hyperlinkは比較的新しい機能とみられます。docxのファイル形式が最新（2019年11月時点）でないと使えません。

次は、文書の冒頭の文字列をコピーしてリンク貼り付けをした例です。

関連記事：
ハイパーリンクとは何？ Microsoft Wordのハイパーリンク編集機能の概要とWebページのハイパーリンクに変換する方法

---

【広告】
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』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です。

---

月曜日連載！　Microsoft Wordスタイル探索
◆前回：（42）Wordの箇条書き再訪
◆次回：（44）Word文書をHTMLに変換するHTML on Word V1.1で表のヘッダー行、ヘッダー列の変換機能などを追加
◆シリーズ総目次

日本語の文書で箇条書きの体裁は頻繁に登場します。月曜日連載！　Microsoft Wordスタイル探索 シリーズでは以前にWordの箇条書きについて探索しました[1]。

一般に箇条書きの体裁を整理すると7種類に分かれます[2]。

そして、（16）箇条書きのタイプとそれに対応するWordの機能・表現方法で次の図を示して、

『Wordでは「左の「箇条書き」は図の分類では、「３」順序なしの一階層のタイプに対応します。中央の「段落番号」は「１」の順序付き一階層のタイプに対応します。また、右の「アウトライン」は、「２」「４」「５」の多階層の箇条書きに対応します。」』と書きました。

このあたりをもう少し調べてみます。

特に段落番号は注意が必要です。

例えば、Wordで連続する項目に、段落番号を適用して、次のような番号付き箇条書きの体裁を設定します。

これは、段落番号を使って項目に番号を付け、レベルを下げる部分を選択してインデントを増やすことで簡単にできます。体裁上は立派な2階層の番号付き箇条書きとなります。

さて、この2番目の箇条書き項目を標準段落に変更します。すると、次のように標準段落を飛ばして次の段落の番号が「２」になります。

このように二つのブロックに分かれたとき、少なくとも一つ目の項目は箇条書きとはしないで、先頭に番号「１」が付いている段落とするべきでしょう。

基本的にWordの「段落番号」は段落の先頭に連続した番号を自動的に降る機能なので、二つの段落が隣り合わせでないときにも設定できます。

こうして見ますと、「段落番号」は「番号付き箇条書き」編集機能とは言えないような気がします。

Wordはおそらく構造としての箇条書きという概念を持っていないのではないかと思われます。結構難しい問題です。

参考資料
[1]Microsoft Wordのスタイル探索の箇条書き関連記事の項を参照
[2]箇条書きの使い方と箇条書きの7タイプ

---

【広告】
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』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です。

---

◆前回：（41）『HTML on Word』の使用例（5）ハイパーリンクの編集と変換
◆次回：（43）Wordのコピー＆ペーストによるハイパーリンク作成
◆シリーズ総目次

Webページ（HTML）の編集ではハイパーリンクの編集は手間がかかります。手間がかかる理由の一つは、HTMLのハイパーリンクの構造にあります。
ハイパーリンクは、<a>要素で次のように記述します。

<a href="リンクのターゲット">ハイパーテキストアンカー</a>

ハイパーリンクの編集では、タグの入力に加えて、①リンクのターゲットの指定と②ハイパーテキストアンカーの入力が必要なのです。

Microsoft Wordを使うと、WebページをHTMLのエディタなどで直接編集するよりも簡単な操作でハイパーリンクを編集できます。Wordで編集した文書を『HTML on Word』でHTMLに変換することでハイパーリンク作成がより簡単になります。

Wordのハイパーリンク編集機能には、対話的にハイパーリンクを編集する機能と、自動的にハイパーリンクを作成する機能があります。

１．対話的にハイパーリンクを編集する機能

この機能は、リボン「挿入」の「リンク」グループにあります。

• 「リンク」はハイパーリンクを挿入するダイアログを開いて、リンク先と表示文字列を入力します。HTMLに変換するとリンク先はリンクのターゲットになり、表示文字列はハイパーテキストアンカーになります。リンク先は外部のURLやファイル、文書内部、新規文書、メールアドレスを指定できます。
• 「ブックマーク」は文書内部のリンク先を編集する機能です。HTMLに変換するとブックマークは<span id=”id値></span>に変換され、ブックマークの文字列がid値となります。ハイパーリンクではid値がリンクのターゲットとして使われます。
• 「相互参照」は、文書内部へのリンクを設定します。リンク先は参照する項目で選択します。参照する項目は、アウトライン番号や段落番号を付けた項目、見出し、ブックマーク、脚注、図、表など多岐にわたります。また、表示文字列は参照する項目毎にカテゴリー化されていて、そのカテゴリーから選択します。「リンク」とは違ってカテゴリー化されているので文書全体で統一しやすくなります。

なお、「相互参照」は、リボン「参考資料」の「図表」グループからも使えます。

２．自動的にハイパーリンクを作成する機能

Wordで自動的にハイパーリンクを作成する機能としては、リボン「参考資料」の目次の自動作成と図表目次の組み込みがあります。

目次の自動作成では、段落のアウトラインレベルの設定された項目から目次を作成します。このときは、本文中の見出しが表示用テキストとなり、図表目次では図表のキャプションが目次項目になります。そして見出しや図表のキャプションの位置に自動生成のブックマークが_Tocから開始する数字で設定されます。目次の各項目から見出しや図表のキャプションの位置にハイパーリンクが設定されます。

『HTML on Word』では自動生成目次や図表目次をHTMLのハイパーリンクに変換します。

なお、Wordには類似の機能として索引作成機能があります。しかし、Wordの索引の仕組みは独自の形式となっており、HTMLのハイパーリンク方式ではないので、現時点では『HTML on Word』で索引をHTMLのハイパーリンクに変換することはできません。

３．ブックマークの編集

Wordはダイアログでブックマークを入力する機能と、自動で作成する機能があります。自動作成は目次作成や相互参照を設定したリンク先にブックマークを自動的に作成する機能です。

目次作成で自動的に作られたブックマークは _Tocで始まる数字、相互参照で自動的に作られたブックマークは_Refで始まる数字です。ブックマークダイアログで、「自動的に挿入されたブックマークを表示する」のチェックボックスをONにする（最初からONになっているときは、一度、OFFにしてからONにする）とこれらを確認できます。

自動的に作成されたブックマークはWordの内部ではあまり管理されていないようです。編集を繰り返すと膨大な数の使われていない自動生成ブックマークが文書ファイル内に残ります。これをそのままHTMLに変換すると、膨大な数の不要な<span id=”id値></span>ができるため、『HTML on Word』は、出力したHTMLファイルをスキャンして不要な（文書内のハイパーリンクで使われていない）id値をもつ<span id=”id値></span>を削除します。なお、文書の外部からid値に対してハイパーリンクを設定している場合のために、コマンドラインのオプション（-nonrefiid）で削除しない動作を指定できます。

４．ハイパーリンク変換例

簡単なハイパーリンク変換例を紹介します。

次はWordの編集画面で外部URLへのリンクを設定している例です。

HTMLに変換すると次のようになります。

<p>3) <a href="https://elaws.e-gov.go.jp/document?lawid=410M50000040043_20220101_503M60000040025">平成十年大蔵省令第四十三号…</a>…</p>

これをブラウザで表示するとデフォルト表示では次のようになります。

次はWordの編集画面で相互参照を設定した例です。

HTMLに変換すると次のようになります。

<p>2021年3月に改正された電子帳簿保存法<a href="#_Ref86743273"><sup>1)</sup></a>の第7条に規定する…</p>

これをブラウザで表示するとデフォルト表示では次のようになります。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。

※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらから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』を、簡単なデモを交えて紹介します。うまく使うには「印刷用」というレイアウトからの脱却が必要です

---

◆前回：（40）『HTML on Word』の使用例（4）Webページの実例。Wordの機能との対応付け
◆次回：（42）Wordの箇条書き再訪
◆シリーズ総目次

『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）ハイパーリンクの編集と変換
◆シリーズ総目次

『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』をアドインから使用するとき、CSSを指定するにはアドインの「指定したCSSを用いる」メニューをクリックします。

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

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

１．オリジナルWord文書

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

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

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

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

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

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

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

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。

※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらから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のアウトラインと見出しスタイルを活用する方法（概要）

先週は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）に変換できます。

---

【広告】
11月16日（火曜日）16時からの「ちょっと一息・アンテナハウスウェビナー」の録画がYouTubeで公開されております。

※画像をクリックするとウェビナーのアーカイブページに移動しますので、そちらから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のアウトラインと見出しスタイルを活用する方法（概要）