読者です 読者をやめる 読者になる 読者になる

How IT Works

プログラマーやっています。技術よりも人間学的なところが好きです。

来年の年賀状を作りました(2017年)

前書き

 そろそろ年が明けるということで、来年(2017年)の年賀状を作成してみました。

 年賀状というよりはクリスマスのメッセージカードみたいになっていますが、まぁまぁきれいにできたと思います。

f:id:dexia2:20161214211659p:plain:w300

 ただ作っても作業になってしまうので、HTMLとCSSを使ってデザインしました。

 ソースは以下で。

github.com

 できるだけ、シンプルにということで純粋なCSSとHTMLで組みました。アクセシビリティとか、アウトラインとかCSSの詳細度 といった細かいところはもう少し直すかもしれません。

 CSSとHTMLはほぼ初心者なのでソースで気になることがあれば、ご指摘ください。

技術的なところ

 雪は基本的にすべてHTMLとCSSで表現しています。

 少し省略していますが、以下のような感じです。

--HTML

  <section class="sky">
    <div class="snows">
        <div class="snow snow1"><div class="crystal"></div></div>
    </div>
  </section>

--CSS

.sky .snow {
  position: absolute;
}

.sky .snow .crystal {
  padding:50%;
  border-width: 1px;
  border-radius: 50%;
  border-color: #41719C;
  border-style: ridge;
  background-color: #FFF;
}

.sky .snow.snow1 {
  width: 4.25%;
  top: 5%;
  left: 5%;
}

 雪は基本的にシンプルに枠線で表現しています。ここで意識して書いたこととしては、

  • 円をCSSだけで表現する。(border-radius: 50%)
  • 雪をレスポンシブ対応にする。(padding:50%;やwidth: 4.25%;などできるだけ%で指定)
  • 雪の座標の指定の仕方。

 などでしょうか。文字をいれた雪も基本的にはおなじ方法です。
 文字の部分だけ下に表示しておきます。

--HTML

  <section class="sky">
    <div class="snows">
      <div class="snow message-snow message-snow1">
        <div class="crystal"></div>
        <div class="snow-message"></div>
      </div>
  </section>

--CSS

.sky .snow.message-snow .snow-message {
  position: absolute;
  left: 32%;
  top: 28%;
  font-size: 3vw;
}

引用のところ

 以下のサイト様を参考にデザインしました。positionを少しいじったくらいでほぼそのままです。

o-ands.net

レスポンシブ対応

 雪のところでも書きましたが、今回はレスポンシブ対応を意識して書きました。

 Media Queriesなどは使わず、ひたすら%で指定していきます。次のようなプロパティです。

 margin、padding、widthなどはよく使いますが、font-sizeにvwを指定したり、topやleftに%を指定したことはなかったので勉強になりました。

印刷

 あまり技術的な話ではないのですが、画像はFirefoxスクリーンショット機能で撮影しました。

 f:id:dexia2:20161214214935j:plain:w300

 F12を押して開発者機能を表示した後、レスポンシブデザインモードのアイコンをクリックします。
 そうすると、小さなデバイス用の表示になるので、はがきサイズくらいに合わせてカメラのアイコンを押すとイメージファイルが取得できました。

 それをPDFに変換してUSBに移し、セブンイレブンで印刷しました。(印刷と年賀状の購入は別でした)

感想

 普段は業務システム担当なので、初めてデザイン的なCSSを使えて楽しかったです。

 やはり、遊びながら学ぶということが大事だと思いますね。

 実際に人に送るときは下のサイトを参考に動的にCSSで雪を振らせて、全員に微妙に違う年賀状を送れると素敵ですね。

qiita.com

 メッセージカードは大好きなので、また何かできたらいいなと思います。