日別アーカイブ: 2021年11月1日

月曜日連載! 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とは