ねこものがたり

いちにちいっぽ

HTMLとCSSで名刺を作る

作成に到るまで

会社支給の名刺を持ったことがない私。

何度かの転職活動の時に少し作ったことはありましたが、キャリアコンサルタントの資格を取得してから個人名刺を持つようになりました。

その名刺、そろそろ新調しなければと思いだらだらと過ごしていたら残り3枚に!

前回は御茶ノ水にあるとてもいい感じの画材屋さんんで「とにかくシンプルに」と全て向こうにお任せして安く作成しました。

でもそれを配ってみて「これではダメだ」と。

もっと私っぽさが表れていて、もっと印象が良くて、もっと自分自身が「この名刺すき」と思えるものを配っていきたい!と。

そんな私はただいま FJORD BOOT CAMP(フィヨルドブートキャンプ)にてプログラミング修行の身。

「初心者には難しすぎる」と言うことで有名なCSSの課題も終わらせました。

そしてフィヨルドのデザイナーさんである町田さんが「大体のことはHTMLとCSSでできる」とこの前おっしゃっていた!

そしてちょっとググってみたら、それで名刺を作った人がいた! 参照: [Sy] HTMLとCSSを使って個人名刺を作るという方法もアリなんじゃないかと! | Syntax Error.

と言うわけで作ってみています。

名刺基本情報

大きさ

cssを書くにあたり、最初から名刺サイズにいい感じに収まるデザインにしたいと思ったので基本サイズを調べました。

名刺サイズは縦横何ピクセルにあたりますか? - 910mmx550mmのサイズを、Exce... - Yahoo!知恵袋

と言うわけで 全体のスタイルとしてそれを指定しました。

height: 209px;
width: 345px;

これでflexを使用した時にもはみ出すことはないと思います。(たぶん)

そういえばflexboxはもう古いと各所で聞くのでこれを機にgridもあとでやってみようかな。

印刷時の拡張子

画材屋さんや印刷業者に依頼する時にイラレがあればそれが一番だと思いますが、大体はPDFで用意できれば問題ないと思います。

というわけで完成したらPDFに書き出す予定でいます。が、その時にはどうやらCSSを印刷用に用意しないといけないらしいということで、それは後日詳しくみてみます(今はよくわからない)

【決定版】印刷用CSSはこれでいこう! | m-pixel labo blog

今の時点

前面 f:id:neko314:20180413184245p:plain

裏面 f:id:neko314:20180413183402p:plain

見栄えなどはこれから

まだ簡単にざっとしかやっていないので、明日また続きをやろうと思います。