月曜日連載! 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のコピー&ペーストによるハイパーリンク作成
シリーズ総目次


e-na伊那谷 旅便り 第80回 真っ赤だな!もみじ湖(第二弾)

カーナビの目的地を箕輪ダム(もみじ湖)に設定して出発します。
自宅から箕輪ダムまで約30キロ、カーナビでは38分で到着予定です。
出発は11月8日朝5時18分です。


何故こんな早いというと、もみじ湖は「じゃらん」で「全国のおすすめ紅葉スポットランキング2021」で第一位になり渋滞するからです。
https://www.jalan.net/theme/koyo/nagano/16_koyo23.html

SNSには「渋滞でもみじ湖はあきらめた。」「たどり着けなかった。」という声がいっぱい。
真っ暗な山道をくねくね走り午前6時前にもみじ湖につきましたが、まだ真っ暗です。少し明るくなってきたので写真を撮り始めました。赤がきれいです。ダム湖の周りに1万本のもみじが移植されています。まだ6時なのに駐車場には既に十数台の車が止まっていました。

写真をたくさん取っていたら、日が昇るまでにスマホのバッテリーがなくなりました。
次の写真は「もみじのトンネル」です。本当は朝日に輝くもみじを取りたかったのに残念。

長野伊那谷観光局のホームページもご覧ください。

長野伊那谷観光局
https://www.inadanikankou.jp/spot/page/id=481

今年間に合わないあなたは混雑覚悟で来年見に来てください。


月曜日連載! 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の箇条書き再訪
シリーズ総目次


SCSSで(S)CSS組版の見通しを良くする

Antenna House CSS FormatterはHTMLあるいはXMLとCSSからPDFを生成できます。

ところで、CSSを直接書くのは結構大変です。
スタイル設定を書いていると、数百行程度はすぐに超えてしまうかもしれません。
そうして膨れ上がったスタイル設定はメインテナンス性の観点からもあまり望ましくはありませんね。
そこで他の記述形式からCSSを生成する方法が普及してきました。
CSSを生成する言語あるいは処理系を指してメタCSSという呼称が用いられることもあります。メタCSSとしてはLESSやSCSSがあります。

本記事ではSCSSを記法として採用し、処理系としてsassを使用しました。SASSとSCSSの違いなどについては割愛します。SCSSは記法として素のCSS記法も可能なため、既に記述されているCSSからの移行が比較的容易いというメリットもあります。

今回はサンプルとして、弊社で公開している『CSSページ組版入門』のサンプルファイルを利用しました。
Antenna House CSS FormatterのバージョンはV7.2改訂1版を想定しています。

処理の流れとしては次のようになります。

1. SCSSファイルの記述
2. SCSSをCSSにコンパイル
3. HTML、XML+CSSをAH CSS Formatterで組版

sassの導入

sassは現在Dart言語で開発されていますが、インストールはDart環境よりもWeb系でより普及しているnpmやyarn経由の方が簡単かもしれません。

$ yarn add sass 

今回SCSSに変更していくbooklet-page-ja.cssをリネームし、booklet-page-ja.scssとします。SCSSに変更後、sassによって改めてbooklet-page-ja.cssを生成します。

$ yarn run sass booklet-page-ja.scss booklet-page-ja.css

ネスト記法

booklet-page-ja.css(変換前)

...
/* 目次 */
.TOC > ul {
  font-size: 15.5q;
  font-family: source-serif-pro, source-han-serif, serif;
}
.TOC li.TocLevel1 {
  font-size: 15.5q;
}
.TOC li.TocLevel2 {
  font-size: 14q;
}
.TOC li.TocLevel3 {
  font-size: 12.5q;
}

CSSでは基本的にセレクタは個別に書いていく必要がありますが、SCSSではセレクタの親子関係を入れ子で記述できます。また、「>」や同じ要素で別のクラス指定のものも入れ子にし、Parent Selector 「&」を使うことで目的の出力が得られます。
@pageはトップレベルのセレクタのため、「& :left」のような利用方法はエラーとなります。

booklet-page-ja.scss

...
/* 目次 */
.TOC {
   
 & > ul {
  font-size: 15.5q;
  font-family: source-serif-pro, source-han-serif, serif;
 }
 li {
  &.TocLevel1 {
    font-size: 15.5q;
  }
  &.TocLevel2 {
    font-size: 14q;
  }
  &.TocLevel3 {
    font-size: 12.5q;
  }
}
...

フォーマットした上での行数は増えることもありますが、同じ要素やクラスを親とするスタイル指定がすっきりまとまりました。

SCSSでの「&」は「&-top」のようにも使えるのですが、CSSのNesting Module(Draft)では処理が変わってしまうため、使用を控えています。

@mixin

SCSSでは@mixin <name> (<arg>) { ...}で指定した内容を@include <name>(<arg>)で取り出して使用できます。

フッタのページ番号とヘッダのテキストでfont-familyとfont-sizeが揃っていたため、@mixinを使用してみましょう。

booklet-page-ja.css

 ... {
  @top-left {    /* 柱(ページヘッダ)*/
    font-size: 11.5q;
    font-family: source-serif-pro, source-han-serif, serif;
  }
  @top-right { content: none }

  @bottom-left { /* ノンブル(ページ番号)*/
    font-size: 11.5q;
    font-family: source-serif-pro, source-han-serif, serif;
    content: element(Title);
  }
...
}
booklet-page-ja.scss

@mixin running-font {
      font-size: 11.5pt;
      font-family: source-serif-pro, source-han-serif, serif;
}
...
... {
    @top-left {    /* 柱(ページヘッダ)*/
      @include running-font();
    }
    @top-right { content: none }
  
    @bottom-left { /* ノンブル(ページ番号)*/
      @include running-font();
      content: element(Title);
    }
}

今回は使用していませんが、SCSSではCSSに変換時に置換される変数が使用できます。CSSにも変数機能がありますが、組版に使う処理系がCSSの変数に対応していないときなどはこちらが有用です。

AH CSS Formatter V7.2はCSS変数に対応しています。
AH Formatter V7.2 | CSS仕様の実装状況

@mixinなどと併用するときは粒度の管理が大切です。

ファイルをまとめる

素のCSSでは分割したファイルは都度HTMLのlink要素で読み込んでいたかもしれません。CSSの@import機能もありました。
「分割して細かくしていくうちに数十ファイルのCSSでどこに何が書かれているか分からなくなり、そのまますべて読み込むことにした」という話も耳にします。Webサイト読み込みにおけるパフォーマンス以外に、メインテナンス性にもかかわる話です。

SCSSでは複数の入力SCSSファイルから、1つまたは複数のCSSファイルを出力することもできます。
「SCSSファイルと同数のCSSファイルをチェックすることになり作業が倍に」といった事態にしないため、
出力するCSSファイルはまとめることにします。

複数の入力ファイルから出力を得る場合、sassへ指定する引数の書き方が少し変わります。
次のSCSSファイルのあるディレクトリをscss、出力するCSSファイルを含むディレクトリをcssとします。

$ yarn run sass scss:css 

scssディレクトリ内部のSCSSファイルがCSSへと変換されます。scss/a.scss、scss/b.scssファイルが存在する場合はcss/a.css、css/b.cssファイルが生成されます。

さてこのとき、ファイル名の先頭を「_」とすることで、そのファイルは出力するCSSファイルから除かれます。この除外されてしまうファイルの意義はどこにあるかというと、出力対象の別ファイルから内部的に読み込ませるためにあります。

出力するCSSファイルから除外するファイルを_color.scssとします。

booklet-page-ja.scss

@use "_color"
...

@useで読み込まれた_color.scssの内容は変換出力されたbooklet-page-ja.cssに反映されます。このとき名前空間などの概念が登場しますが、詳細はSCSS(SASS)のWebサイトなどをご覧ください。

ざっくりとした紹介となりましたが、メタCSSによってCSS組版の設定記述の見通しを良くする方法について説明しました。WebサイトでのSCSS-CSS利用との差異はほとんどありませんが、Webサイトよりも細かに異なるレイアウト指定を行うであろうCSSページ組版で、メタCSSによって得られる恩恵はより大きくなるのではないでしょうか。

参考資料



月曜日連載! 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)ハイパーリンクの編集と変換
シリーズ総目次


e-na伊那谷 旅便り 第79回 もみじ湖 もみじのトンネル

上伊那郡箕輪町のもみじ湖[箕輪ダム湖]の周辺には約1万本のもみじが植えられています。
紅葉の見ごろは10月下旬から11月上旬です。
最奥のもみじのトンネルと呼ばれる場所は、夜間ライトアップ(2021/10/23~11/23, 17:00~21:00)が行われます。
ライトアップ期間中は、多くの車が訪れるため非常に渋滞します。

沢川沿いの道を登っていく訳ですが、道幅が狭くすれ違いとなる区間も多く(山側に側溝も)あり、特に夜間の運転には注意が必要です。
豪雨の影響で、崩れている箇所や、通行止めになっている箇所もありました。

様子を見に行ってきました。ライトアップ期間前で昼間のため、数台の車を見かける程度でした。
紅葉の状態はと言えば、素晴らしく緑です。お日様に照らされて、これも美しいのですが、紅葉してませんでした。


紅葉している所を見つけたので、そこを中心に撮影してみました。

撮影している場所は、もみじのトンネルの中腹です。もみじのトンネルは320メートルほどあり登坂になっています。

もみじのトンネルを登りきると、末広広場があります。この日は、車も人もいませんでしたので、久しぶりに大きく深呼吸してきました。


早くコロナ禍が収束して、ありふれた日常が戻ってくることを望みます。


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


XSL-FO試行錯誤 原稿XMLで括弧類をマークアップで表現するメリット

何らかの変換によってXMLを得る場合や、スキーマにとくに定められていない場合、括弧類は通常の文字として記述されることが多いでしょう。

括弧を通常のテキストで記述する
である(ただし、Bの場合を除く)。

マークアップとして、括弧を表すタグを用意し、使用したとき、どのようなメリットがあるかについて考えてみました。

である<kakko>ただし、Bの場合を除く</kakko>。

<kakko>は多くの場合良いタグ名ではないでしょうが、目をつむることにします。

テキストとしての括弧ではなくタグを使ったとき、<kakko>をXSLTで処理するのは簡単です。

<xsl:template match="kakko"><xsl:text>「</xsl:text><xsl:apply-templates />」</xsl:text>
</xsl:template>

(テキストとしての括弧を検出したい場合、XSLT 2.0以降では正規表現で対応可能です。)

タグkakkoをどんなテキストで表すかの決定を、XSLTで変換するまで遅延できます。
また、XSL-FOで組版するとき、行頭、行末禁則の適用外のテキストでも疑似的に禁則があるように振る舞わせることができます。「\if」「\fi」を括弧の代替にしてみましょう。

<fo:inline keep-together.within-line="always"
keep-with-next.within-line="always"
>\if</fo:inline><fo:inline>ただし、Bの場合を除く</fo:inline><fo:inline 
keep-together.within-line="always"
keep-with-previous.within-line="always"
>/fi</fo:inline>
keep-*による分割防止

それぞれ直前、直後の文字で分割できそうな場合でも、くっついて処理されていますね。
@keep-*については次のページをご覧ください。
第6章 プロパティ値の書き方 『XSL-FOの基礎 第2版 – XMLを組版するためのレイアウト仕様』

デメリットとしては、禁則制御そのものではないため別の分割規則との都合で目的と異なる挙動とるかもしれないこと、原稿から抽出したテキストを機械翻訳に渡すときにうまく調整する作業が発生するかもしれないことなどが挙げられます。


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


e-na伊那谷 旅便り 第78回 食欲の秋

今週に入り急に気温が下がり、寒暖の差が激しい時期になって来ました。
伊那谷で採れた、栄養豊富で旬の味覚「きのこ」
を食べて体調管理したいところです。

まずは、高級食材の松茸。
今年は豊作の様で嬉しいお裾分けをしていただいました。
早速炊き込みご飯にすることに。

松茸の芳醇な香りが最高です。

そして、スーパーでは買えない
天然地物のきのこを買いに
伊那市にある産直市場グリーンファームへ。

いろんな種類のきのこが並び、県内外から訪れた方々の視線を集めています。

その中で、ハナイグチ
(別名が地域によって異なるようですが、地元ではジコボウと呼び人気の品種で す。)
を買い、きのこ汁を作りました。

※ハナイグチは、寒い地域のカラマツ属の樹下に生え
かさは肉厚でなめこの様に光沢のある赤褐色、裏面は鮮やかな黄色でスポンジの 様にふかふかしているのが特徴

虫がついているので、まず軽く汚れを取ったあと塩水につけ処理をします。

ハナイグチ以外の具材は、玉ねぎ・長ネギ・豚肉を入れました。

きのこの時期も終わってしまいますが、旬の味覚をおいしく堪能できました。

産直市場グリーンファーム URL:
https://green-farm.asia/

Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 225 226 227 Next