はじめに

Excelだと差分管理がしにくい。
CSVだと書式の設定ができない。
それなら、AsciiDocで実装して、HTMLファイルを生成しよう。

現状把握

こんなExcelがあったとします。

セルの中で改行している。
セルの中で異なるフォントサイズが混在している。
一部罫線を引かないセルがある。

やったこと

1. .xlsxを.csvにする

ExcelをCSV形式で保存します。
保存したCSVファイルがこちら。

items.csv

改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更
※ 旧：○○○→新：△△△"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2
3.2
4",×××を変更

2. CSVファイルをAsciiDocでincludeする

includeについてはこちらを参照↓

table.adoc

[%header,format=csv]
|===
include::resources/csv/items.csv[]
|===

このAsciiDocからHTMLファイルを生成すると、こう。

セルの中で改行していない。
フォントサイズがすべて同じ。
すべてのセルに罫線が引かれている。

この辺を直していきます。
なお、スタイルシートはAsciiDocのデフォルトのものを流用しています。

3. 書式を設定する

改行する

改行についてはこちらを参照↓

items.csv

改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
- 2019.01.01,全体,"×××に対応
+ 2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
- 2022.01.01,2.1,"×××を変更
+ 2022.01.01,2.1,"×××を変更 +
※ 旧：○○○→新：△△△"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
- 2024.01.01,"2.2
- 3.2
+ 2024.01.01,"2.2 +
+ 3.2 +
4",×××を変更

このAsciiDocからHTMLファイルを生成すると、こう。

フォントサイズを変える

フォントサイズの変え方（クラスの設定の仕方）についてはこちらを参照↓

items.csv

改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更 +
- ※ 旧：○○○→新：△△△"
+ [.small]#※ 旧：○○○→新：△△△#"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2 +
3.2 +
4",×××を変更

このAsciiDocからHTMLファイルを生成すると、こう。

不要な箇所の罫線を消す

ここは……力技で……。

table.adoc

+ ++++
+ <style>
+ .reduced-border-tbl td {
+     border-bottom-width: 0 !important;
+ }
+ 
+ .reduced-border {
+     border-top-width: 0 !important;
+ }
+ </style>
+ 
+ <script>
+ window.addEventListener('load', () => {
+     document.querySelectorAll('.reduced-border-tbl td').forEach(cell =>
+         !cell.textContent.trim() && cell.classList.add('reduced-border')
+     );
+ });
+ </script>
+ ++++
+ 
- [%header,format=csv]
+ [%header.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===

このAsciiDocからHTMLファイルを生成すると、こう。

気になったので……

セルの幅

セルの幅を文字列の長さに合わる方法はこちらを参照↓

table.adoc

（略）

- [%header.reduced-border-tbl,format=csv]
+ [%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===

このAsciiDocからHTMLファイルを生成すると、こう。

フォント

Webフォントの設定の仕方についてはこちらを参照↓

table.adoc

（略）

+ @import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');
+ 
+ .reduced-border-tbl {
+     font-family: "BIZ UDGothic", sans-serif;
+ }

（略）

[%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===

このAsciiDocからHTMLファイルを生成すると、こう。

できあがったもの

こちらがExcel↓

こちらがCSVファイルをAsciiDocでincludeして生成したHTMLファイル↓

items.csv

改訂年月日,項番,改訂内容
2017.01.01,－,新規作成
2019.01.01,全体,"×××に対応 +
×××に対応"
,6.1,×××を追加
2022.01.01,2.1,"×××を変更 +
[.small]#※ 旧：○○○→新：△△△#"
,6,×××を変更
2023.01.01,3.6,×××を追加
,1.1,×××を変更
2024.01.01,"2.2 +
3.2 +
4",×××を変更

table.adoc

++++
<style>
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');

.reduced-border-tbl {
    font-family: "BIZ UDGothic", sans-serif;
}

.reduced-border-tbl td {
    border-bottom-width: 0 !important;
}

.reduced-border {
    border-top-width: 0 !important;
}
</style>

<script>
window.addEventListener('load', () => {
    document.querySelectorAll('.reduced-border-tbl td').forEach(cell =>
        !cell.textContent.trim() && cell.classList.add('reduced-border')
    );
});
</script>
++++

[%header%autowidth.reduced-border-tbl,format=csv]
|===
include::resources/csv/items.csv[]
|===

（CSSは外部ファイルに書く方がよりスッキリするかも）

おわりに

文字列情報はCSVで、書式情報はAsciiDoc（CSS）で、それぞれ管理していけるといいんじゃないでしょうか。