ねこものがたり

いちにちいっぽ

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

見栄えなどはこれから

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

rubyのめも

・数字はintegerクラスだけではない

・自己代入が使いこなせない

・変数と定数の使いわけ

頭文字表記 使い方
(ローカル)変数 小文字またはアンダーバー ブロック内、メソッド内などローカルなスコープで有効
インスタンス変数 @ そのオブジェクトが存在する間有効
クラス変数 @@ 同じクラスのすべてのインスタンスで共有
グローバル変数 $ プログラムのどこからでも参照できる
定数 大文字 一度代入すると、再度値を変更することはできない
  • 条件分岐

falseとnilは偽 falseとnil以外は全て真

「trueじゃなかったらfalse、falseでもなかったらnil」と思っていたけど違ったらしい(軽くショックを受けてしまった・・・)

  • unless 条件式が偽だった場合に「then」から「end」までの処理を実行する

  • 関係演算子

f:id:neko314:20180406125540p:plain

f:id:neko314:20180406125747p:plain

  • 「case」文は特定のオブジェクトが持つ値がどの値に一致するのかを調べる

  • 条件演算子

  • 式修飾子

  • while

  • until
  • for ~ in …
  • step
  • loop
  • break
  • next

  • 配列はインデックスと要素

  • :[]
  • ハッシュはキーと値: {}

*fetchでハッシュの値を拾う事ができる

  • デフォルト値はどんな時になんのために設定するのかよくわからん

  • store

  • hash.to_a
  • 引数を配列として受け取る??

  • アクセスメソッド f:id:neko314:20180406191150p:plain

  • indexで文字列の検索

  • uniq
  • compact
  • モジュール  調べたけど今はよくわからん(復習するときここが良さそう クラス・モジュールの概念 Ruby - Qiita

参考サイト

Ruby入門 - 変数・定数

Ruby入門

配列とハッシュとシンボルは紛らわしいので整理!! - Qiita

Ruby の Hash#fetch が便利 - Qiita