HTML
Word
帳票

ワードがなければHTMLで書けばいいじゃない

概要

ワードで帳票作りたい、でもワードって高いよね。
15000円くらいする。そんなときはHTMLで書いてみるのも1つの手ではないかなと思い、
帳票(今回、見積書)をHTML&CSSで作成する方法を記載する。

完成形

こんな感じの見積書(帳票)作ってみました。

See the Pen 見積書 by haikyoiko (@haikyoiko) on CodePen.

以下のテンプレートを使用

paper-css
https://github.com/cognitom/paper-css

使うのは以下のCSS。日本人が作成した帳票用のCSS。作成者がQiitaにも登録されている。

▼著者の記事:そろそろ真面目に、HTMLで帳票を描く話をしようか
https://qiita.com/cognitom/items/d39d5f19054c8c8fd592

HTMLで書いてみた

bodyのクラスに用紙のサイズを指定(A3、A4、A5など)
sectionタグごとにページができる。

見積書.html
<html lang="jp">
<head>
  <meta charset="utf-8">
  <title>見積書</title>
  <!-- Normalize or reset CSS with your favorite library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

  <!-- Load paper.css for happy printing -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

  <link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

  <!-- Set page size here: A5, A4 or A3 -->
  <!-- Set also "landscape" if you need -->
  <style>@page { size: A4 }</style>

  <!-- Custom styles for this document -->
  <link href='https://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
  <style>
    body   { font-family: Noto Sans Japanese }
    h1     { font-family: Noto Sans Japanese, cursive; font-size: 40pt; line-height: 18mm}
    h2, h3 { font-family: Noto Sans Japanese, cursive; font-size: 24pt; line-height: 7mm }
    h4     { font-size: 32pt; line-height: 14mm }
    h2 + p { font-size: 18pt; line-height: 7mm }
    h3 + p { font-size: 14pt; line-height: 7mm }
    li     { font-size: 11pt; line-height: 5mm }
    h1      { margin: 0 }
    h1 + ul { margin: 2mm 0 5mm }
    h2, h3  { margin: 0 3mm 3mm 0; float: left }
    h2 + p,
    h3 + p  { margin: 0 0 3mm 50mm }
    h4      { margin: 2mm 0 0 50mm; border-bottom: 2px solid black }
    h4 + ul { margin: 5mm 0 0 50mm }
    article { border: 4px double black; padding: 5mm 10mm; border-radius: 3mm }
  </style>
</head>

<body class="A4">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-20mm">
    <h1>見積書</h1>
    <ul>
      <li>住所:東京都千代田区千代田1-1-1</li>
      <li>TEL: 03-0000-0000</li>
      <li>http://www.xxxx.net</li>
    </ul>
    <article>
      <h2>差出人:</h2>
      <p>株式会社 ばつばつばつ</p>
      <h3>宛名:</h3>
      <p>株式会社 まるまるまる</p>
      <h4>&yen; 9,999-</h4>
    </article>
  </section>
</body>
</html>

困ったらのテンプレート

以下のページにサンプルがある

https://github.com/cognitom/paper-css/tree/master/examples