カテゴリー別アーカイブ: コラム

書籍のHTML版の構造を考える(OOXML入門第2版)

12/07に「『Office Open XML Formats入門 第2版』制作報告」のウェビナーを行いました。ウェビナーで言及したように、『Office Open XML Formats入門 第2版』はHTML版も制作中です。

編集用XMLであるSimpleDoc(の改造版)はほぼHTMLの文法なので基本的にはそのままです。
とはいえ、そのままで出せるかというとそうでもなく、「表示媒体の違い」へ意識を向ける必要があります。本記事ではその辺りについて「こんなことを考えながら作っています」という話です。

形式

まず、HTMLとしてはHTML5、もといLiving Standardに合わせています。他社コンテンツを制作するような場合に比べれば更新の自由が利きますし、セマンティックな語彙が多い方が嬉しいですね。変換自体にはXSLT 3.0を利用しています。

スタイル設定

SCSSで大本を記述した後、CSSに変換したものをlinkの読み込み対象にしています。あるページ特有のスタイルというものは無かったため「_color.scss」「_header.scss」、「_footer.scss」これらを読み込む「common.scss」のようになっています。

ページ分割とナビゲーション

まずページ分割単位の決定。「最終的に1ページのHTMLファイルに収める」というのはそれなりの文量のある書籍では現実的ではありません(動的に内容を取得するのであればそういった方法もあるでしょう)。今回は「章単位でフォルダーを分け、節単位でファイルを分ける」ということにしました。
余談として、DITAではDITA-OT標準のHTML出力を行うとトピックごとにページが分けられます。書籍の形態を重視する場合はこのトピック単位というのは個人的にはやや扱いづらいものであったりします。

ナビゲーションの追加について。特に静的なページとして用意する場合、次の箇所へ遷移する方法の確保は重要です。HTML版用に新たに考えるべき項目としては「常に目次をページ内に配置する」「前後の箇所へのリンクを配置する」「検索用のページを用意する」といったことが挙げられます。

「常に目次をページ内に配置する」については「目次へのリンクを各ページに配置する」で濁してあります。ページごとに記述量が増えて若干デバッグがしづらくなるためです。全ページに目次を配置した場合も、ファイルサイズとしては誤差でしょう。「iframeタグで目次ページを表示させる」ことも可能ですが、今回はリンクを選択しました。

コンテンツの配置レイアウト

body/headerに章題と章トップページ・目次ページ・前後ページへのリンク、body/footerに前後ページへのリンク、body/main内にそのページのコンテンツを配置しました。
書籍と構成は変わるものの「常に(画面上という意味でなく)表示されて欲しい情報」とコンテンツとして欲しい情報といった整理を行うことに変わりはありません。

書籍版と見せ方を変えるもの

Webブラウザーでは紙の本ではできない操作が可能です。今回、次のような変更をしています。

  • コードブロックにoverflow:scrollを設定。
  • h3のsection内容をdetailsタグでアコーディオン表示設定。
  • 画像にwidth:100%を指定。

記事内容の主題といっても良い箇所だと思うんですが、3行で終わってしまいました。

相互参照、リンク

これは「できるならやった方が良い」という話です。HTML版用に新たに用意するにはコストが高く、やるのであればHTML版に関係なく取り組む価値があります。
書籍内の単語や索引、図参照などをハイパーリンクとして設定することについて、元原稿であまり積極的に設定していなかったためにほぼ見送りました。PDF用にリンク用の機構をしっかり準備、活用していれば流用できただけに惜しいです。

メタデータ

「メタデータ、head内をどこまで用意するか」といった話があります。「この場所(弊社Webサイト)にこのコンテンツがあることを知っている」方に対して公開する向きが強いため、ひとまず先送りにできるだろうということがあげられます。
JSON-LDによるメタ情報の追加やサーチエンジン巡回用のRobots.txt、といったものですね。

最低限の項目としてtitle、言語、エンコーディング、viewportの初期値といったものは設定しました。これらは文字化けやモバイル端末での表示性確保として最低限設定すべき箇所でしょう。

OGPについてはある程度用意した方がSNS上でのリンク表示が見栄えするのである程度は確保したいので悩ましいところです。

作業が完了していないこともあり今回はこの辺りで。HTML版(、そして販売準備中のプリントオンデマンド版も)の完成まで少しだけお待ちください。

参考資料


月曜日連載! Microsoft Wordスタイル探索 (44)Word文書をHTMLに変換するHTML on Word V1.1で表のヘッダー行、ヘッダー列の変換機能などを追加

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)インデント機能の基本
シリーズ総目次


月曜日連載! Microsoft Wordスタイル探索 (43)Wordのコピー&ペーストによるハイパーリンク作成

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

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

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

リンク貼り付けを選択

リンク貼り付けを選択

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

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

自動的に作成したブックマーク

自動的に作成したブックマーク

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

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

Word Hyperlinkでリンク貼り付けを設定したテキスト

Word Hyperlinkでリンク貼り付けを設定したテキスト

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


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

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

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


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


2022年1月1日より施行される電子取引データ保存義務をご存じですか?

法人税法とその施行規則では、取引書類を書面で保存することを義務付けています。

取引書類は書面(紙)で保存する義務がある

取引書類は書面(紙)で保存する義務がある

電子帳簿保存法第四条の規定により、所定の要件を満たせば、紙に代えてデジタルデータで保存ができます。これは希望する場合のみのオプションです。

電子帳簿保存法(電帳法四条):紙に代えてデジタルデータで保存できる

電子帳簿保存法(電帳法四条):紙に代えてデジタルデータで保存できる

電子帳簿保存法第七条ですべての電子取引データをデジタル保存する義務が課されています。本条は2022年1月から施行されます。

電子帳簿保存法第七条(電帳法七条):電子取引データのデジタル保存義務

電子帳簿保存法第七条(電帳法七条):電子取引データのデジタル保存義務

来年から、書面による取引と電子取引という取引形態によって、異なる保存規制がかかるため、大変やっかいなことになります。

書面保存とデータ保存の二重規制への対処

書面保存とデータ保存の二重規制への対処

私たちはどうしたら良いでしょうか? 一緒に考えてみましょう。

ウェビナーのご案内

ウェビナーのご案内

ウェビナー申込URL
https://majisemi-business.doorkeeper.jp/events/129651


月曜日連載! Microsoft Wordスタイル探索 (42)Wordの箇条書き再訪

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

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

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

段落グループの3つのボタン

段落グループの3つのボタン

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

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

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

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

Wordで番号付き箇条書きの体裁を作る

Wordで番号付き箇条書きの体裁を作る

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

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

2番目の項目を標準段落に戻す

2番目の項目を標準段落に戻す

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

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

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

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

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


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

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

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


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


月曜日連載! Microsoft Wordスタイル探索 (41)『HTML on Word』の使用例(5)ハイパーリンクの編集と変換

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

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

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

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

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

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

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

リボン「挿入」の「リンク」グループ

リボン「挿入」の「リンク」グループ

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

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

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

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

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

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

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

3.ブックマークの編集

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

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

ブックマークダイアログ

ブックマークダイアログ

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

4.ハイパーリンク変換例

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

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

外部URLへのリンクを設定

外部URLへのリンクを設定

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


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

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

browserで表示したところ

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

Wordで相互参照を設定

Wordで相互参照を設定

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


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

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

ブラウザで内部リンクを表示

ブラウザで内部リンクを表示


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


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

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

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

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


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


月曜日連載! Microsoft Wordスタイル探索 (40)『HTML on Word』の使用例(4)Webページの実例。Wordの機能との対応付け

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

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

1.Webページ先頭部分

1.Webページ先頭部分


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

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


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

Word原稿の冒頭部分


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

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

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

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


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

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

Webページ本文最後

Webページ本文最後


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

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

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

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

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


月曜日連載! Microsoft Wordスタイル探索 (39)『HTML on Word』の使用例(3)サンプルCSSのレイアウト

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(V1.0)に同梱されているCSS

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

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

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

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

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

1.オリジナルWord文書

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

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

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

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

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

sample.cssのレイアウト

sample.cssのレイアウト

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

sample-basicのレイアウト

sample-basicのレイアウト

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

sample-newsのレイアウト

sample-newsのレイアウト

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

sample-simpleのレイアウト

sample-simpleのレイアウト

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

sample-thema-greenのレイアウト

sample-thema-greenのレイアウト

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

sample-thema-warmのレイアウト

sample-thema-warmのレイアウト

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


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


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

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

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

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

--------------------
◆前回:(38)『HTML on Word』の使用例(2)Wordで書いたマニュアルをWebページにする
◆次回:(40)『HTML on Word』の使用例(4)Webページの実例。Wordの機能との対応付け
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (38)『HTML on Word』の使用例(2)Wordで書いたマニュアルをWebページにする

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

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

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

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

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

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

2.目次を作成した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を表示します。)

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【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のアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


月曜日連載! Microsoft Wordスタイル探索 (37)Wordで書いたお知らせをWebページにする

会社のお知らせやニュースリリースなどの広報文書を作成するために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から作成する


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


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

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

(1)【WordでHTMLが書けたらすごい!】-vol.1 予備知識

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

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

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

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

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

(4)【WordでHTMLが書けたらすごい!】-vol.4 新しい解決策:『HTML on Word』

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

--------------------
◆前回:月曜日連載! Microsoft Wordスタイル探索 (36)『HTML on Word』の使用例(1)見出しと目次のあるWebページの作成
◆次回:月曜日連載! Microsoft Wordスタイル探索 (38)『HTML on Word』の使用例(2)Wordで書いたマニュアルをWebページにする
シリーズ総目次
〇関連ページ
Microsoft Wordを使って報告書などの長文を作成する人向けの新知識満載です。 Microsoft Wordのアウトラインと見出しスタイルを活用する方法(概要)

Antenna House Office Serversとは

Antenna House Office Serversとは


Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 115 116 117 Next