Webサービスや社内ツールで請求書をPDFで取得したいときがありますよね！？PDFを生成する方法はいくつもありますが、１つの方法としてHTMLを利用するというものがあります。HTMLをPuppetter 等に渡す他、Docuest のようなWebサービスにHTMLを投げてPDFにすることもできます。
HTMLがレスポンシブ対応していると、A4サイズの他、A3サイズでもB5サイズでも整った状態でPDFにできるメリットがあります。そこで今回、レスポンシブ対応の請求書テンプレートをHTML＋CSSで作ってみました。シンプルで軽量、かつ見た目も整っているテンプレートを、誰でも使えるように公開しています。
軽量CSSフレームワーク「Pico CSS」
Pico CSSの公式サイトによると「Minimal CSS Framework for Semantic HTML（セマンティックHTML向け最小限のCSSフレームワーク）」とのことです。セマンティックHTMLとは適切なHTMLタグでマークアップされたHTMLという意味です。タグが正しければ、class を付けなくても綺麗にレイアウトされるようになっています。
今回のテンプレートでは、以下のような点を考慮しCSSフレームワークとしてPico CSSを採用しました。
- レスポンシブ対応
- 全体的にとても軽い
- クラス名をほとんど書かないのでHTMLのメンテナンス性が良い
複雑なUIが不要な「請求書」や「領収書」または「一覧表」のような書類系HTMLと相性が良さそうです。
請求書テンプレートの見た目
実際に作ったテンプレートの見た目はこちらです。
シンプルながら、必要な要素はひと通りそろっています。もちろん、Pico CSSを使っているのでスマホで見ても崩れません。今回、請求書だけでなく、領収書、経費清算書、出勤簿などのようなテンプレートも作成しました。
テンプレートは、弊社が運営しているサービス Docuest にて無料公開しています。テンプレートの商用利用もOKです。ぜひ、開発や業務効率化にご活用ください！
HTML→PDFコンバータも使えます
Docuest はHTMLをPDFに変換する無料コンバータも提供していますので、テンプレートのHTMLがどのような見た目のPDFになるのかすぐにご確認いただけます。
ぜひ、PDFコンバータもご利用ください。
今回、実際にHTMLテンプレートを作ってみてPico CSSの軽量さとシンプルさを体感しました。普段Bootstrapばかり使っているのですが、これからは適材適所でPico CSSも活用していきたいです。