勉強会の時に、名札を作ることがあると思います。
参加者増えると、ひとつひとつ入力するのも大変ですよね。
というわけで、名札カードを量産できるテンプレートを作ってみました。
名刺サイズで作ったので、片面印刷だけなら、名刺テンプレートとして使えます。
↑こういうのが作れます
主な仕様
- 名刺サイズ（横91mm✕縦55mm）
- A4用紙に面付可能数が10面
- デフォルトテンプレートに記載の内容
- 名前
- ポジション
- メールアドレス
- 電話番号
- テンプレートの内容とレイアウトは編集可能（CSSの知識だけでOK）
使い方
こちらの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'
},
// 以下略
こちらを書き換えてください。
テンプレートデータの編集
テンプレートのマークアップは、
<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縦に収まったテンプレートが見えるかと思います。
その状態で印刷ボタンを押します。決して、拡大縮小のオプションは入れないでください（等倍で出力されません）
カッティング
- B4かA3程度の大きさのカッティングマットと、30cm以上の定規（できれば金尺）を用意します。
- 青のトンボ（周囲についている線）に定規をあわせ、カットします。
- 青が終わったら、次は赤の線に合わせてカットします。
- 出来上がり！
注意！ 赤から先に切ると台無しになってしまうので、くれぐれも間違えないようにしてください。
使用技術について
テンプレートエンジン
Pugで書いてるなら、Pugでループ回したらええやん、ってなりそうですが、将来的に静的な独立したジェネレーターとして作ることもあるかと思い、テンプレートエンジンを別に使いました。
それが、JSRenderです。
本当はhead要素内に書くのがお作法のようですが、codepenの使用上、body内にあったほうが都合が良いため、このようにしています。
今の所問題なく動いているので、多分大丈夫かと。
jQuery
楽をするためだけに使ってます。すいません。
Pug
トンボの線を表現するためだけに利用
Stylus
最近、CSSはだいたいこれで書いてます。
コロンもセミコロンも要らない、でもついててもOK、なんなら波括弧ついててもついてなくてもOKという懐の深いヤツです。
CSS3
結局の所、CSS3のおかげで色々出来た感じです。
- calc()
- display: flex
この辺のおかげで、諸々便利に作ることができました。
参考にした情報
今日も、Qiitaと、Qiitaに投稿されている皆さんのおかげで楽が出来ております。
大変感謝です。