HTML
JavaScript
CSS3
stylus
jsrender

HTML/CSS3/JSだけで(名刺|名札カード)を量産するテンプレートを作った

勉強会の時に、名札を作ることがあると思います。
参加者増えると、ひとつひとつ入力するのも大変ですよね。
というわけで、名札カードを量産できるテンプレートを作ってみました。
名刺サイズで作ったので、片面印刷だけなら、名刺テンプレートとして使えます。

IMG_5061.jpg

↑こういうのが作れます


主な仕様

  • 名刺サイズ(横91mm✕縦55mm)
  • A4用紙に面付可能数が10面
  • デフォルトテンプレートに記載の内容
    • 名前
    • ポジション
    • メールアドレス
    • 電話番号
  • テンプレートの内容とレイアウトは編集可能(CSSの知識だけでOK)

使い方

こちらのcodepenをフォークして使ってください。

データの編集箇所は、JSの

codepen.js
var data = [
  { 
    name: "Taro YAMADA",
    position: 'CEO/President',
    email: 't.yamada@example.com',
    phone: '06-1234-5678'
  },
  { 
    name: "Yukio MURATA",
    position: 'COO/Vice President',
    email: 'y.murata@example.com',
    phone: '06-1234-5678'
  },
  { 
    name: "Keiko YASUKAWA",
    position: 'CFO',
    email: 'k.yasukawaexample.com',
    phone: '06-1234-5678'
  },
// 以下略

こちらを書き換えてください。

テンプレートデータの編集

テンプレートのマークアップは、

codepen.html
  <div class="col">
  <div class="name">
  <h2 class="name">{{:name}}</h2>
  <p class="position">{{:position}}</p>
  </div>
  <div class="info">
  <ul class="info-list">
  <li class="list-item mail">{{:email}}</li>
  <li class="list-item tel">{{:phone}}</li>
  </ul>
  </div>
  </div>

を編集してください。Pug記法で書いてますが、ここの部分だけは、誰でも編集しやすいよう、HTMLで表現しています。

印刷とカッティングについて

印刷

CodepenをDebugモードで開きます。ヘッダー右上のChange View
ボタンを押すと、その中にあります。
Debugモードは、CodepenのUIが一切入らないモードです。その状態のウインドウをCommand + Pなどで、印刷画面を開きます。
プレビューでは、きっちりA4縦に収まったテンプレートが見えるかと思います。
その状態で印刷ボタンを押します。決して、拡大縮小のオプションは入れないでください(等倍で出力されません)

スクリーンショット 2018-08-06 23.41.47.png

カッティング

  1. B4かA3程度の大きさのカッティングマットと、30cm以上の定規(できれば金尺)を用意します。
  2. 青のトンボ(周囲についている線)に定規をあわせ、カットします。
  3. 青が終わったら、次は赤の線に合わせてカットします。
  4. 出来上がり!

注意! 赤から先に切ると台無しになってしまうので、くれぐれも間違えないようにしてください。

使用技術について

テンプレートエンジン

Pugで書いてるなら、Pugでループ回したらええやん、ってなりそうですが、将来的に静的な独立したジェネレーターとして作ることもあるかと思い、テンプレートエンジンを別に使いました。

それが、JSRenderです。

本当はhead要素内に書くのがお作法のようですが、codepenの使用上、body内にあったほうが都合が良いため、このようにしています。
今の所問題なく動いているので、多分大丈夫かと。

jQuery

楽をするためだけに使ってます。すいません。

Pug

トンボの線を表現するためだけに利用

Stylus

最近、CSSはだいたいこれで書いてます。
コロンもセミコロンも要らない、でもついててもOK、なんなら波括弧ついててもついてなくてもOKという懐の深いヤツです。

CSS3

結局の所、CSS3のおかげで色々出来た感じです。

  • calc()
  • display: flex

この辺のおかげで、諸々便利に作ることができました。

参考にした情報

今日も、Qiitaと、Qiitaに投稿されている皆さんのおかげで楽が出来ております。

大変感謝です。