作成者別アーカイブ: AHEntry

月曜日連載！　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）インデント機能の基本
◆シリーズ総目次

LINEで送る
このエントリーをはてなブックマークに追加

e-na伊那谷　旅便り 第81回 （続々）人形浄瑠璃に興味はありますか？

「e-na伊那谷　旅便り」にて、過去に2回ほど人形浄瑠璃についてご紹介しました。

第41回 人形浄瑠璃に興味はありますか？
　https://blog.antenna.co.jp/ILSoft2/archives/12130
第61回 （続）人形浄瑠璃に興味はありますか？
https://blog.antenna.co.jp/ILSoft2/archives/12921

新型コロナウィルスの影響で昨年はほとんどの公演が中止となってしまいましたが、今年は公演を行うことができましたのでいくつかご紹介します。

  • 第16回伊那谷伝統文化公演　※前回の記事で紹介した公演です。
  • 信州の伝統芸能フェスティバル in 白馬（Bプログラム）
    　　公演外題：寿式三番叟
    　　古くは風除け祈願として舞ったものを、現在では芝居公演などの幕開き後に舞台清めとしてお囃子を入れて行っています。
    　　※長野県による文化芸術情報発信サイト「カルチャー・ドット・ナガノ」の特集レポート（https://www.culture.nagano.jp/special/6276/）
    　　※youtubeでの動画配信（https://youtu.be/IhHWF9hETVQ?t=1937）

また、毎年12月第1土曜日に古田人形芝居伝承の地である箕輪町の文化センターにて定期公演が行われています。

昨年は公演時間を短縮し「技能伝承発表会」として小中学生のみの公演を行いましたが、今年は新規感染者数の激減に伴い例年通り保存会の公演も行われるとの事です。
もちろん感染症対策を行いつつの公演になりますが、こういった事からも日常が戻りつつあることを実感できますね。

R3年古田人形芝居定期公演チラシ

R3年古田人形芝居定期公演チラシ

自主事業「令和3年度古田人形芝居定期公演」の開催について

これまで人形浄瑠璃についてご紹介してきましたが、少しでも興味を持っていただけたらうれしく思います。

LINEで送る
このエントリーをはてなブックマークに追加

月曜日連載！　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を表示します。）

（１）【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で表のヘッダー行、ヘッダー列の変換機能などを追加
◆シリーズ総目次

LINEで送る
このエントリーをはてなブックマークに追加

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

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

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

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

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

電子帳簿保存法（電帳法四条）：紙に代えてデジタルデータで保存できる

電子帳簿保存法（電帳法四条）：紙に代えてデジタルデータで保存できる

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

電子帳簿保存法第七条（電帳法七条）：電子取引データのデジタル保存義務

電子帳簿保存法第七条（電帳法七条）：電子取引データのデジタル保存義務

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

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

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

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

ウェビナーのご案内

ウェビナーのご案内

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

LINEで送る
このエントリーをはてなブックマークに追加

XSL-FO 試行錯誤 カレンダーを自動生成したい（構想編）

師走まで間もなくとなり、日中の気温もかなり下がってきました。来年のカレンダーを用意する時期ですね。
ちょっと「XSL-FOでオリジナルのカレンダーを作りたい」なんてこともあるのではないでしょうか。

高々12月分であるのでDTPソフトウェアやXSL-FOの直書きで頑張っても何とかなるかもしれませんが、来年もある程度使い回せるようにしたり、2021年のように直前の変更があるかもしれないことを考えると自動化したいところです。

実現したいカレンダーは次のようなものを想定します。手書きであるため半端なところまでしか日付がありません。

実現したいカレンダーのラフ

今回は構想編ということで、方針や使っていくFO、XSLTのアタリを付けていきましょう。

ページレイアウト

カレンダーを作るにあたって、先ず決めなければいけないことは「どの程度グラフィカルにするか」、具体的にはページレイアウトをどこまで制限するか、ということです。
個別箇所の自由度を上げるとその分だけ自動化できる箇所は少なくなります。

とはいっても、「高々12月分」と書いたように12パターン程度であれば12通りのページレイアウトを用意しても良いでしょう。今回はページレイアウトを1つに定めることにします。

  • ページレイアウトは1つ
  • 毎月1ページで構成

（スケジュール帳を組むのであれば「1月分の中にページ分割はあるか」も考慮しなければなりません。AH XSL Formatterであれば見開き要素が使えるため比較的簡単に対応できます。その場合は、見開きの左右に分割される位置と格子の位置を上手く配置する工夫が必要になりますね。）

ページサイズはA3縦（縦420mm、横297mm）にしましょう。

毎ページ登場する内容

月ごとにページを分けるのであれば、各ページに共通して登場するのは
年でしょうか。来年であれば「2022年」ですね。これはstatic-contentに置くことにします。
また、年度（4月始まり）で設定したい場合、途中で年の表示は変わりますね。このことに備えて、マーカーで取り出した値を使うことにします。

後述するように画像を上半分にページ幅一杯に表示する際、画像の上にstatic-contentを被せて表示することが可能です。AH XSL Formatterではregion表示の優先順位も自由が利きます。

マス目表示を実現するFO

ここは奇をてらわずtableを使っていきます。

カレンダーでは、曜日をカラムのタイトルとして、1週目、2週目、…をrowのまとまりとして、それぞれの日付がセルとして表されます。
常にマス全体を長方形にすることとして、rowの数は5週分にします。

例示した画像のように日付の始まりと曜日の始まりが一致するなら並べるだけなので楽ですが、そうではないためXSLTで自動化することになります。当月の他、その先月または来月の数日間の情報が必要になることも、お手元のカレンダーから想像が付くのではないでしょうか。

元となるカレンダー用のXMLがある場合は、そこにテンプレートを適用するだけで済むでしょう。

日付の位置を調整して自動生成するXSLT

XSLT 2.0からは日付のための関数や型を利用できます。ある日付の曜日を取りたいときはたとえばformat-date('[w1]')とすればxs:integer型ではありますが曜日が取得できます。このことと日付用のduration、そしてmodを組み合わせればカレンダーのマス目が実現できそうです。

休日・祝日（今回は対応しない）

休日、祝日の背景色を変更することについて考えます。日曜を示すカラムが先に決まるため「毎週日曜の背景色を変更する」であればカラムに対して設定したりすれば良いでしょう。問題は祝日です。XSLTの標準ライブラリは日本の祝日対応まではしてくれていません。確実なソースとなると、内閣府のページにあるCSVでしょうか。

「国民の祝日」について – 内閣府

XSLT 2.0以降でCSVをパース可能なようにプログラムを書くこともできますが（<xsl:analyze-string>などを使います）、とりあえず今回は対応しないことにします。

そのほか二十四節気なども同様に、「どこかから日付と紐付いた外部ソースを得る」「XSLTで取り込んで展開する」といった手順になるでしょう。

各月のイラスト、写真の設定方法

話をFOメインに戻します。

ページレイアウトは1つだけにすることを決めました。
AH XSL Formatterではページマスターに背景画像を設定することも可能ですが、
1つのページレイアウトを使い回すのであれば、フローコンテンツとして指定していく形になるでしょう（実はマーカーに画像を指定することも可能ですが、テンプレートの記述量は大して変わりません）。

画像のクリッピングや位置調整については背景画像の方がプロパティ指定の余地が広いため、ブロックコンテナーの背景画像として配置することにします。

画像をページギリギリまで表示したい場合、フローコンテンツを塗り足し領域まで表示させる必要があります。この辺りのTipsは『AH XSL Formatter 拡張仕様使いこなしガイド』に載せていたりします。

次回予告

次回はカレンダーを実現するための関数、テンプレートについて考えていく予定です。

参考資料

LINEで送る
このエントリーをはてなブックマークに追加

AH Formatter 21周年（英語メッセージ）

Today marks the 21st anniversary of the initial release of AH Formatter and we want to thank our customers and trusted partners for helping us enhance the performance and functionality of AH Formatter by providing valued support and feedback after all these years.

Back in 2000, users wanted a way to build pages and publications based on international standards, something that had not existed previously. With XSL-FO, we created a solution that met those requirements and removed much of the complexity associated with implementation. In the last 21 years, we have added extensive features to meet the demands of almost every type of document that our customers require. Some of those features include CSS formatting, MathML for complex math equations, flexible page floats, support for over 70 languages, and more!

Our goal has been and always will be to solve the world’s most demanding and complex publishing challenges (paged media output) through technical innovation based on standards, product excellence, and an organization committed to the success of our customers.

Thank you for choosing AH Formatter as your primary PDF publishing software!

– Antenna House

AH Formatter英語版リリースのお知らせ

AH Formatter英語版リリースのお知らせ

【ご参考】YouTube AH Formatter 20年の歩み

LINEで送る
このエントリーをはてなブックマークに追加

月曜日連載！　Microsoft Wordスタイル探索 （42）Wordの箇条書き再訪

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

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

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

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

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

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

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

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

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

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

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

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

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

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のコピー＆ペーストによるハイパーリンク作成
◆シリーズ総目次

LINEで送る
このエントリーをはてなブックマークに追加

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

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

LINEで送る
このエントリーをはてなブックマークに追加

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

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へのリンクを設定している例です。

外部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を表示します。）

（１）【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の箇条書き再訪
◆シリーズ総目次

LINEで送る
このエントリーをはてなブックマークに追加

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によって得られる恩恵はより大きくなるのではないでしょうか。

参考資料

LINEで送る
このエントリーをはてなブックマークに追加

Pages: Prev 1 2 3 4 5 6 7 8 9 10 ... 210 211 212 Next