来年の年賀状を作りました（２０１７年）

前書き

　そろそろ年が明けるということで、来年（２０１７年）の年賀状を作成してみました。

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

　ただ作っても作業になってしまうので、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のスクリーンショット機能で撮影しました。

　

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

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

感想

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

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

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

qiita.com

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