VA公用文表示：公用文の書式のままウェブページに表示（HTML／CSS）

サンプルのダウンロード

• VA_KobunDisplay_v100.zip — CSS（kobun.css）、AIへの指示文（ai-prompt.md）、ぶら下げ用スクリプト（kobun-hang.js）、説明書（README.md）、表示サンプル3点、ライセンス

このツールには実行ファイルがありません。zipを展開して出てくるのは、CSSファイルとテキストファイルだけです。インストールは不要です。

書式の根拠については、コラム「公用文の標準的な書式」をご覧ください。このCSSは、同記事で整理した書式に沿って作っています。

VA公用文表示 ― 公用文の書式のまま、ウェブページとして読める

こんな悩みはありませんか

準備書面や通知文を、そのままの形でウェブに載せたい場面があります。書式の見本を示したいとき、事務所のサイトに文例を置きたいとき、社内の規程を掲示したいとき——いずれも、書式まで含めて見せないと意味が伝わりません。

• 本文をウェブページに貼ると、字下げも項目番号の段差も消えて、ただの文章になってしまう
• PDFで貼ると、スマートフォンでは拡大しないと読めず、文字の検索やコピーもしにくい
• Wordの「Webページとして保存」は、余計なタグだらけのHTMLになり、他のページと体裁が合わない
• 書式の見本を示したいのに、見本自体が公用文の書式になっていない
• 画面用と印刷用を別々に作ると、直すたびに二重の手間がかかる

VA公用文表示は、文書のテキストからHTMLを作り、CSSを1枚当てるだけで、公用文の書式のまま画面に表示し、そのまま印刷までできる無料のツールです。

表示に徹する、という割り切り

このツールが行うのは、出来上がった文書を「見せる」ところだけです。文書を作る機能・編集する機能は持ちません。Word上で書式を設定して文書を作るほうは、アドインの「VA公用文」が担当します。Wordで作り、ウェブで見せる——という役割分担です。

表と画像も扱いません。置くことはできますが、その部分の体裁はサイトのテーマ側の指定に従います。公用文の版面の中に表組みを組み込むのは、字送りの格子との折り合いが難しく、無理に対応させると全体の規則が複雑になるためです。

もうひとつの割り切りが、HTMLへの変換をプログラムではなくAIにさせることです。文書のどこが「第１」でどこが「(1)」なのかを判定するのは、生の日本語を読む仕事で、決まった規則を書き下しにくい部分です。ここはAIが得意とするところなので、配布物には変換プログラムを入れず、代わりにAIへの指示文（ai-prompt.md）を入れてあります。お使いのAIに指示文と文書を貼れば、HTMLが返ってきます。

主な機能

CSSが自動で行うこと

• 版面の再現：裁判所提出書類は37字×26行（余白 上35／下27／左30／右20mm）、行政の一般的な公用文は40字×36行（余白25mm）。12ポイントの明朝体、両端揃え、行頭禁則、本文は全角1字下げ
• 項目番号の自動採番：第１ → １ → (1) → ア → (ｱ) → ａ → (a) の7階層を、入れ子の深さから数えて付けます。HTMLに番号は書きません
• 番号に応じた字下げ：階層が1つ深くなるごとに1字ずつ右にずらします
• 「第１」を使わない文書の判定：文書に「第１」の階層がなければ、「１」を行頭から始めます（自動判定）
• 見出しの書体と表題の配置：裁判所提出書類は見出しも明朝体で表題は中央揃え、行政の公用文は見出しをゴシック体にして表題は3字空けで書き出します
• 印刷時のページ設定：ブラウザの印刷で、A4・規定の余白のPDFになります

次の2つは画像ではありません。この記事に「カスタムHTML」ブロックを2つ置き、AIが作ったHTMLを貼り付けたものです。お使いのブラウザが、いま目の前で組んでいる版面です。

令和８年（ワ）第１２３４号　損害賠償請求事件

原告　甲野太郎

被告　乙山商事株式会社

準備書面（１）

令和８年９月１７日

東京地方裁判所民事第○部○係　御中

被告訴訟代理人弁護士　　丙川　次郎　　印

被告は、本準備書面において、原告の令和８年８月１日付け訴状記載の請求原因に対する認否及び被告の主張を、次のとおり明らかにする。なお、略語は、特に断らない限り、訴状の例による。

原告の令和８年８月１日付け訴状記載の請求原因に対し、次のとおり認否をする。認否の対象は、訴状の請求原因欄に記載された事実に限る。

請求原因に対する認否

請求原因第１項（当事者）について

認める。

請求原因第２項（本件契約の締結）について

同項(1)について

否認する。原告と被告との間で、原告主張の日に、原告主張の内容の売買契約が締結された事実はない。原告が本件契約の締結を裏付けるものとして提出する甲第１号証は、契約の申込みに先立つ見積書にすぎず、被告が承諾の意思表示をしたことを示すものではない。

同項(2)について

不知。

同項(3)のうち、被告が令和７年４月１日に原告に対して本件商品の納入を約束したとの点は否認し、その余は認める。

令和７年４月１日の打合せの経緯

被告は、令和７年４月１日、原告の求めに応じて、原告事務所において打合せを行ったが、その席上で被告担当者が述べたのは、原告の希望する納期が実現可能かどうかを社内で検討するという趣旨にとどまる。

打合せの出席者

被告側の出席者は、営業部長丁田三郎及び営業担当者戊村四郎の２名であり、いずれも被告を代理して契約を締結する権限を有していない。

打合せの内容が記載された議事録について

原告が提出する甲第２号証の議事録は、原告が打合せ後に一方的に作成したものであり、被告担当者はその内容を確認していない。

議事録の作成日

同議事録の作成日欄には令和７年４月１日と記載されているが、同議事録が被告に送付されたのは同年５月２０日である。

送付方法

電子メールにより送付された。

被告の対応

被告は、同議事録の内容に異議がある旨を、同月２３日、電子メールにより原告に通知した（乙第１号証）。

納期についての被告の認識

被告は、上記打合せの後、社内で検討した結果、原告の希望する納期での納入は困難であるとの結論に至り、同年４月１５日、その旨を原告に伝えた。

請求原因第３項（損害）について

争う。

被告の主張

本件契約の不成立

前記第１の２(1)のとおり、原告と被告との間に本件契約は成立していない。契約の成立には申込みと承諾の意思表示の合致を要するところ、被告が承諾の意思表示をした事実はなく、原告もこれを裏付ける的確な証拠を提出していない。

損害との因果関係の不存在

仮に本件契約が成立していたとしても、原告が主張する損害は、原告が第三者との間で締結した転売契約に基づくものであり、被告が予見し、又は予見し得たものではないから、被告の債務不履行との間に相当因果関係を欠く。

以上

裁判所提出書類（準備書面）の表示です。37字×26行。項目番号（第１、１、(1)、ア…）はHTMLには書かれておらず、CSSが階層の深さから数えて付けています。

○○第１２３号

令和８年９月１７日

各部局長　殿

総務部長

文書の作成に当たっての留意事項について（通知）

公用文の作成に当たっては、読み手に分かりやすく、正確に伝わるものとなるよう、下記の事項に留意されたい。なお、本通知は、令和８年１０月１日から適用する。

公用文の作成に当たっては、読み手に分かりやすく、正確に伝わるように十分留意する。特に、専門用語の使用は必要最小限にとどめる。

記

用紙及び文字

用紙は、日本産業規格Ａ４判を縦長に用い、横書きとする。文字は、本文を１２ポイントの明朝体とし、見出しにはゴシック体を用いることができる。

１行の文字数及び１ページの行数

１行の文字数は４０字、１ページの行数は３６行を標準とする。ただし、表、図その他これによることが適当でない部分については、この限りでない。

余白

余白は、上下左右とも２５ミリメートルとする。

とじ代を要する文書

とじ代を要する文書については、左余白を３０ミリメートルとすることができる。

例外

様式が定められている文書については、当該様式による。

様式の改正

様式を改正する場合は、あらかじめ総務部長に協議するものとする。

句読点

句点は「。」を、読点は「、」を用いる。

項目番号

項目番号は、１、(1)、ア、(ｱ)の順に用い、項目が変わるごとに１字ずつ右にずらして書く。「第１」は、特に必要がある場合に限り用いる。

適用期日

令和８年１０月１日以後に起案する文書から適用する。

以上

行政の一般的な公用文（通知）の表示です。40字×36行で、見出しはゴシック体、表題は3字空け。同じCSSのまま、クラス名を gyosei に変えただけです。番号の形式は既定の pattern1（カッコと、カッコ内の数字・カタカナを半角にする形）です。

この2つには、ぶら下げ用のスクリプト（kobun-hang.js）も一緒に貼ってあります。上の準備書面の「原告の令和８年８月１日付け訴状記載の請求原因に対し、次のとおり認否をする。」の行が、37字の版面に収まったうえで、行末の「。」だけが罫線の外に出ているはずです。スクリプトがないと、この「。」は直前の「る」ごと次の行へ送られ、その行は36字で終わります。

選べる設定

• 文書の種類：saiban（裁判所提出書類）か gyosei（行政の一般的な公用文）を、クラス名で切り替えます
• 項目番号の形式：カッコと中の文字を半角にするか全角にするかを、pattern1〜pattern4 の4通りから選べます（(1) (ｱ) (a)／(1) (ア) (a)／(１) (ア) (ａ)／（１）（ア）（ａ））
• 字数・行数・余白：--kobun-cols（1行の文字数）などのCSS変数で変更できます。1行35字・1ページ32行といった各機関の規程に合わせられます
• 見出しの書体：種類にかかわらずゴシック体／明朝体に統一することもできます
• 番号の手書き：自動採番を止めて、HTML側で番号を書くこともできます（枝番号など、規則どおりでない番号を使う文書のため）
• 句読点のぶら下げ：行末の句読点を行の外にぶら下げる処理は、CSSだけではSafariでしか効きません。同梱のスクリプト（kobun-hang.js）を一緒に読み込むと、Chrome・Edge・Firefoxでもぶら下がります

使い方 ― テキストを貼り、返ってきたHTMLを置く

1. 文書のテキストを用意する

Wordやメモ帳の文章をそのまま使えます。項目番号（第１、１、(1)、ア…）は付いたままで構いません。見出しを #〜###### で書いたマークダウンでも構いません。

2. AIにHTMLを作らせる

ai-prompt.md の指示文をコピーし、末尾に文書を貼って、ChatGPTやClaudeなどに送ります。AIが最初に4点（出力の形、文書の種類、番号の形式、ぶら下げの有無）を質問してくるので、答えます。あらかじめ文書と一緒に書いておけば、質問は省かれます。

3. HTMLを置く

単独のHTMLページにする場合は、返ってきたHTMLを .html として保存し、kobun.css と同じフォルダに置いてブラウザで開くだけです。

WordPressの記事に載せる場合は、記事に「カスタムHTML」ブロックを置き、返ってきたHTMLをそのまま貼り付けます。CSSは出力の中に含まれているので、サイト側の設定は要りません。

画面表示の規則はすべて kobun クラスの要素の内側に限定してあるため、同じページの他の部分の体裁は変わりません。この記事がその例で、いま読んでいる見出しや段落はテーマの書式のまま、先ほどの2つの文書だけが公用文の書式で表示されています。

なお、ブロックに <style> を書くには、WordPressの管理者権限（unfiltered_html）が必要です。

安心して使える設計

• 実行ファイルがない：配布物はCSSファイルとテキストファイルだけです。インストールもマクロの有効化も必要ありません
• 外部と通信しない：CSSもスクリプトも、外部のフォントやライブラリを読み込みません。表示に使うのは、閲覧している方のパソコンに入っているフォントだけです
• 他のページに影響しない：画面表示の規則はすべて kobun クラスの内側に限定してあります。サイトの他の記事や、同じ記事の他の部分の体裁は変わりません（ただし用紙と余白の指定だけは印刷時にページ全体に効くため、公用文以外の部分も一緒に印刷すると、その部分もA4・同じ余白で印刷されます）
• 元の文書を書き換えない：Wordファイルには一切触れません。出来上がるのは別のHTMLファイルです

ひとつだけ、他の公開ツールと事情が違う点があります。HTMLへの変換にはAIを使います。つまり、変換する文書の本文をAIに渡すことになります。CSSやスクリプト自体が文書を送信することはありませんが、この段階だけは、普段AIに文書を貼るときと同じ判断が必要です。もっとも、このツールの用途はウェブに掲載する文書の表示ですから、そもそも公開する予定の文書が対象になります。

動作環境・導入方法

ブラウザ

Chrome、Edge、Firefox、Safariの現行版で表示できます。「第１の階層がなければ１を行頭から始める」自動判定にはCSSの :has() を使っているため、Chrome 105、Safari 15.4、Firefox 121 より古いブラウザでは、この判定だけが働かず「１」が1字目から始まります（他の書式は表示されます）。

フォント

本文には「ＭＳ 明朝」を指定しています。ＭＳ 明朝はWindows以外のパソコンには入っていないため、Mac・スマートフォンでは代替の明朝体で表示されます。字送りは保たれますが、字面の印象は変わります。

導入

zipを展開し、kobun.css（ぶら下げを使う場合は kobun-hang.js も）を、HTMLファイルと同じフォルダに置きます。WordPressの場合はファイルを置く必要すらなく、カスタムHTMLブロックに貼るだけです。

印刷

ブラウザの印刷でA4・規定の余白のPDFになります。印刷ダイアログでは、送信先を「PDFに保存」、用紙をA4、余白を「既定」、倍率を100%、ヘッダーとフッターをオフにしてください。「Microsoft Print to PDF」などをお使いの場合は、用紙サイズをA4に明示的に設定しないと、A4の版面がレターやリーガルの用紙の中央に置かれ、余白が広く見えます。

その他の制約

半角文字が混ざった行では、字送りが完全には格子状になりません（両端揃えのため行末はそろいます）。表・画像の体裁は、前述のとおりテーマ側の指定に従います。

オープンソースで公開

CSS・スクリプト・AIへの指示文・表示サンプル一式を、MIT Licenseの下でオープンソース公開します。改変・再配布・商用利用を含め自由にご利用いただけます（著作権表示とライセンス条文の保持が条件です）。

CSSには、どの規則が書式のどの部分に対応しているかを日本語のコメントで書き込んであります。所属機関の公文規程に合わせて字数や余白を変える場合も、変更すべき箇所がすぐに分かるようにしてあります。