CSSで年賀状を作ろう！

はじめに

この記事はOIC ITCreate Club Advent Calendar 2018 21日目の記事です。

皆さんは、もう年賀状を書き終えたでしょうか？
まだ書き終えていない方や、面白そうと思った方は、是非CSSで年賀状を作成してみて下さい。

セットアップ

まずは、HTMLファイルとCSSファイルを作成します。

$ touch index.html
$ touch style.css

レイアウトを考える

どのような年賀状にするのかを考えましょう。
私の場合は、 「年賀状」 と検索して、出てきた画像の中から気に入ったものを参考にしました。

素材を集める

素材を集めるのは甘えです。自分で作成しましょう。

年賀状のサイズを知る

印刷する場合の解像度は 300~350ppi が目安とされています。ですが、解像度が 300ppi の場合 1181px x 1748px と、作成しにくいです。なので今回は、 100ppi の 394px x 583px で作成します。

年賀状のサイズが決まったので、分かりやすく線を引きます。

<div class="card"></div>

body {
  margin: 0;
  padding: 0;
}

/* 年賀状 */
.card {
  width: 394px;
  height: 583px;
  border: 1px solid black;
}

縦書き横書きは自分の好きな方を選びましょう。

背景に色をつける

年賀状の背景は白色でも構いませんが、おめでたい感じを出したいのでつけます。

/* 年賀状 */
.card {
  width: 394px;
  height: 583px;
  border: 1px solid black;
  background: linear-gradient(45deg, #fdee83, #fefcea); /*追加*/
}

linear-gradient を使うと背景をグラデーションにすることができます。

文字を入れる

「謹賀新年」 、 「明けましておめでとうございます」 等なんでも良いですが、今回は「謹賀新年」を使用します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
</div>

/* 年賀状 */
.card {
  width: 394px;
  height: 583px;
  border: 1px solid black;
  background: linear-gradient(45deg, #fdee83, #fefcea);
  position: relative; /*追加*/
}

/* タイトル */
.card-title {
  margin: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 60px;
  letter-spacing: 20px;
  font-family: "HGP行書体", serif;
  writing-mode: vertical-rl;
}

<h1> は margin がついているので、まず使用しやすいように margin: 0; にします。
文字の位置を変更するために、 position を使います。 top 等を使い、好きな位置に調節して下さい。
フォントやフォントサイズ、行間は自分の好きな感じで調節して下さい。
writing-mode を使用し、縦書きにします。

亥の印を作成

年賀状でよく見る干支の文字が書かれた判子を作成します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
</div>

/* 印 */
.card-seal {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 250px;
  right: 130px;
  text-align: center;
  font-size: 30px;
  font-family: "HGP行書体", serif;
  color: red;
  border: 3px solid red;
  border-radius: 10px
}

正方形の判子にするために width と height を同じ値で指定し、 text-align: center; で文字を中央に寄せます。
border-radius で角を丸くすると可愛らしくなります。

イノシシの作成

来年の干支のイノシシを作成します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
  <div class="card-boar">
    <div class="card-boar-horn horn-left"></div>
    <div class="card-boar-horn horn-right"></div>
    <div class="card-boar-face"></div>
    <div class="card-boar-mark mark-left"></div>
    <div class="card-boar-mark mark-center"></div>
    <div class="card-boar-mark mark-right"></div>
    <div class="card-boar-eye eye-left"></div>
    <div class="card-boar-eye eye-right"></div>
    <div class="card-boar-nose"></div>
    <div class="card-boar-hole hole-left"></div>
    <div class="card-boar-hole hole-right"></div>
    <div class="card-boar-fang fang-left"></div>
    <div class="card-boar-fang fang-right"></div>
    <div class="card-boar-mouth"></div>
  </div>
</div>

/* イノシシ */
.card-boar {
  position: relative;
  top: 50px;
  left: 50px;
}

/* 顔 */
.card-boar-face {
  position: absolute;
  width: 120px;
  height: 100px;
  background: #CD8D53;
  border-radius: 50%;
  border: 3px solid #222;
}

/* 角 */
.card-boar-horn {
  position: absolute;
  width: 30px;
  height: 80px;
  background: #CD8D53;
  border-radius: 50%;
  border: 3px solid #222;
}
/* 左角 */
.horn-left {
  top: -10px;
  left: 10px;
  transform: rotate(-30deg);
}
/* 右角 */
.horn-right {
  top: -10px;
  left: 80px;
  transform: rotate(30deg);
}

/* 模様 */
.card-boar-mark {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #845435;
  border: 3px solid #222;
}
/* 左模様 */
.mark-left {
  top: 5px;
  left: 35px;
  border-radius: 25% 0 50% 50%;
}
/* 中央模様 */
.mark-center {
  top: 1px;
  left: 57.5px;
  border-radius: 5% 5% 50% 50%;
}
/* 右模様 */
.mark-right {
  top: 5px;
  left: 80px;
  border-radius: 0 25% 50% 50%;
}

/* 目 */
.card-boar-eye {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #222;
  border-radius: 50%;
}
/* 左目 */
.eye-left {
  top: 40px;
  left: 25px;
}
/* 右目 */
.eye-right {
  top: 40px;
  left: 90px;
}

/* 鼻 */
.card-boar-nose {
  position: absolute;
  top: 40px;
  left: 37.5px;
  width: 50px;
  height: 30px;
  background: #F7DFB3;
  border-radius: 50%;
}

/* 鼻の穴 */
.card-boar-hole {
  position: absolute;
  width: 5px;
  height: 15px;
  background: #222;
  border-radius: 50%;
}
/* 左鼻の穴 */
.hole-left {
  top: 47.5px;
  left: 50px;
}
/* 右鼻の穴 */
.hole-right {
  top: 47.5px;
  left: 70px;
}

/* 牙 */
.card-boar-fang {
  position: absolute;
  width: 10px;
  height: 15px;
  background: #fff;
  border: 3px solid #222;
  border-radius: 50% 50% 25% 25%;
}
/* 左牙 */
.fang-left {
  top: 60px;
  left: 25px;
  transform: rotate(-40deg);
}
/* 右牙 */
.fang-right {
  top: 60px;
  left: 85px;
  transform: rotate(40deg);
}

/* 口 */
.card-boar-mouth {
  position: absolute;
  top: 70px;
  left: 47px;
  width: 26px;
  height: 13px;
  background: transparent;
  border: 3px solid transparent;
  border-bottom: 3px solid #222;
  border-radius: 0 0 26px 26px;
}

イノシシを作成するには、 border-radius をいかに上手く使用できるかがポイントです。
また、角度を調節するために transform: rotate() を使用するのもポイントになっています。

子供の作成

先ほど作成したイノシシを元に、子供のイノシシを作成します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
  <div class="card-boar">...</div> <!-- 省略 -->
  <div class="card-boar-child">
    <div class="card-boar-horn horn-left"></div>
    <div class="card-boar-horn horn-right"></div>
    <div class="card-boar-face"></div>
    <div class="card-boar-mark mark-left"></div>
    <div class="card-boar-mark mark-center"></div>
    <div class="card-boar-mark mark-right"></div>
    <div class="card-boar-eye eye-left"></div>
    <div class="card-boar-eye eye-right"></div>
    <div class="card-boar-nose"></div>
    <div class="card-boar-hole hole-left"></div>
    <div class="card-boar-hole hole-right"></div>
    <div class="card-boar-fang fang-left"></div>
    <div class="card-boar-fang fang-right"></div>
    <div class="card-boar-mouth"></div>
  </div>
</div>

/* 親イノシシ */
.card-boar {
  position: relative;
  top: 50px;
  left: 50px;
  transform: rotate(-10deg); /* 追加 */
}
/* 子イノシシ */
.card-boar-child {
  position: relative;
  top: 180px;
  left: 120px;
  transform: rotate(10deg) scale(.7);
}

イノシシの顔のパーツを再利用し、子供は scale() で小さくすると作成することができます。
また、イノシシを少し傾けると、可愛らしくなります。

花の作成

年賀状でよく見る花を作成します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
  <div class="card-boar">...</div> <!-- 省略 -->
  <div class="card-boar-child">...</div> <!-- 省略 -->
  <div class="card-flower">
    <div class="card-flower-petal petal-1"></div>
    <div class="card-flower-petal petal-2"></div>
    <div class="card-flower-petal petal-3"></div>
    <div class="card-flower-petal petal-4"></div>
    <div class="card-flower-petal petal-5"></div>
    <div class="card-flower-pollen pollen-1"></div>
    <div class="card-flower-pollen pollen-2"></div>
    <div class="card-flower-pollen pollen-3"></div>
    <div class="card-flower-pollen pollen-4"></div>
    <div class="card-flower-pollen pollen-5"></div>
  </div>
</div>

/* 花びら */
.card-flower-petal {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(#DF4554, #E16561);
}
.petal-1 {
  top: 0;
  left: 0;
}
.petal-2 {
  top: 10px;
  left: 15px;
}
.petal-3 {
  top: 25px;
  left: 10px;
}
.petal-4 {
  top: 25px;
  left: -10px;
}
.petal-5 {
  top: 10px;
  left: -15px;
}

/* 花粉 */
.card-flower-pollen {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fdee83;
}
.pollen-1 {
  top: 18px;
  left: 12px;
}
.pollen-2 {
  top: 22px;
  left: 18px;
}
.pollen-3 {
  top: 29px;
  left: 16px;
}
.pollen-4 {
  top: 29px;
  left: 8px;
}
.pollen-5 {
  top: 22px;
  left: 6px;
}

花は意外と簡単に作れます。
花びらの色をグラデーションにすると綺麗に見えます。

花を増やす

子供のイノシシを作成した時のようにすれば、簡単に花を増やすことができます。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
  <div class="card-boar">...</div> <!-- 省略 -->
  <div class="card-boar-child">...</div> <!-- 省略 -->
  <div class="card-flower-1"> <!-- クラス名変更 -->
    <div class="card-flower-petal petal-1"></div>
    <div class="card-flower-petal petal-2"></div>
    <div class="card-flower-petal petal-3"></div>
    <div class="card-flower-petal petal-4"></div>
    <div class="card-flower-petal petal-5"></div>
    <div class="card-flower-pollen pollen-1"></div>
    <div class="card-flower-pollen pollen-2"></div>
    <div class="card-flower-pollen pollen-3"></div>
    <div class="card-flower-pollen pollen-4"></div>
    <div class="card-flower-pollen pollen-5"></div>
  </div>
  <div class="card-flower-2">
    <div class="card-flower-petal petal-1"></div>
    <div class="card-flower-petal petal-2"></div>
    <div class="card-flower-petal petal-3"></div>
    <div class="card-flower-petal petal-4"></div>
    <div class="card-flower-petal petal-5"></div>
    <div class="card-flower-pollen pollen-1"></div>
    <div class="card-flower-pollen pollen-2"></div>
    <div class="card-flower-pollen pollen-3"></div>
    <div class="card-flower-pollen pollen-4"></div>
    <div class="card-flower-pollen pollen-5"></div>
  </div>
  <div class="card-flower-3">
    <div class="card-flower-petal petal-1"></div>
    <div class="card-flower-petal petal-2"></div>
    <div class="card-flower-petal petal-3"></div>
    <div class="card-flower-petal petal-4"></div>
    <div class="card-flower-petal petal-5"></div>
    <div class="card-flower-pollen pollen-1"></div>
    <div class="card-flower-pollen pollen-2"></div>
    <div class="card-flower-pollen pollen-3"></div>
    <div class="card-flower-pollen pollen-4"></div>
    <div class="card-flower-pollen pollen-5"></div>
  </div>
</div>

/* 花 */
.card-flower-1 {
  position: relative;
  top: 200px;
  left: 70px;
  transform: rotate(-10deg); /* 追加 */
}
.card-flower-2 {
  position: relative;
  top: 50px;
  left: 160px;
  transform: rotate(10deg) scale(.7);
}
.card-flower-3 {
  position: relative;
  top: 330px;
  left: 200px;
  transform: rotate(10deg) scale(1.2);
}

花もイノシシの時のように、傾けると可愛らしくなります。

丘の作成

イノシシと花だけでは、寂しいので、丘を作成します。計3つ丘を作成します。

<div class="card">
  <h1 class="card-title">謹賀新年</h1>
  <div class="card-seal">亥</div>
  <div class="card-boar">...</div> <!-- 省略 -->
  <div class="card-boar-child">...</div> <!-- 省略 -->
  <div class="card-flower-1">...</div> <!-- 省略 -->
  <div class="card-flower-2">...</div> <!-- 省略 -->
  <div class="card-flower-3">...</div> <!-- 省略 -->
  <div class="card-hill hill-1">
    <div class="card-hill-star star-1"></div>
    <div class="card-hill-star star-2"></div>
    <div class="card-hill-star star-3"></div>
  </div>
  <div class="card-hill hill-2">
    <div class="card-hill-circle-1">
      <div class="hill-circle circle-1"></div>
      <div class="hill-circle circle-2"></div>
      <div class="hill-circle circle-3"></div>
      <div class="hill-circle circle-4"></div>
      <div class="hill-circle circle-5"></div>
    </div>
    <div class="card-hill-circle-2">
      <div class="hill-circle circle-1"></div>
      <div class="hill-circle circle-2"></div>
      <div class="hill-circle circle-3"></div>
      <div class="hill-circle circle-4"></div>
      <div class="hill-circle circle-5"></div>
    </div>
    <div class="card-hill-circle-3">
      <div class="hill-circle circle-1"></div>
      <div class="hill-circle circle-2"></div>
      <div class="hill-circle circle-3"></div>
      <div class="hill-circle circle-4"></div>
      <div class="hill-circle circle-5"></div>
    </div>
    <div class="card-hill-circle-4">
      <div class="hill-circle circle-1"></div>
      <div class="hill-circle circle-2"></div>
      <div class="hill-circle circle-3"></div>
      <div class="hill-circle circle-4"></div>
      <div class="hill-circle circle-5"></div>
    </div>
    <div class="card-hill-circle-5">
      <div class="hill-circle circle-1"></div>
      <div class="hill-circle circle-2"></div>
      <div class="hill-circle circle-3"></div>
      <div class="hill-circle circle-4"></div>
      <div class="hill-circle circle-5"></div>
    </div>
  </div>
  <div class="card-hill hill-3">
    <div class="card-hill-border-1">
      <div class="border-1"></div>
      <div class="border-2"></div>
    </div>
    <div class="card-hill-border-2">
      <div class="border-1"></div>
      <div class="border-2"></div>
    </div>
    <div class="card-hill-border-3">
      <div class="border-1"></div>
      <div class="border-2"></div>
    </div>
  </div>
</div>

/* 丘 */
.card-hill{
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
}
/* 左丘 */
.hill-1 {
  width: 250px;
  height: 250px;
  background: #fff;
  box-sizing: border-box;
  border-top: 10px solid #D9AF64;
  border-right: 10px solid #D9AF64;
  border-radius: 0 250px 0 0;
}
/* 右丘 */
.hill-2 {
  right: 0;
  width: 250px;
  height: 250px;
  background: #ffc966;
  border-top: 10px solid #D9AF64;
  border-left: 10px solid #D9AF64;
  border-radius: 250px 0 0 0;
}
/* 中央丘 */
.hill-3 {
  width: 394px;
  height: 197px;
  background: #D7000F;
  border-top: 10px solid #D9AF64;
  border-left: 10px solid #D9AF64;
  border-right: 10px solid #D9AF64;
  border-radius: 394px 394px 0 0;
}
/* 模様~星~ */
.card-hill-star {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #D9AF64;
}
.card-hill-star::before, .card-hill-star::after {
  position: absolute;
  content: '';
  top: 0;
  left: -20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #D9AF64;
}
.card-hill-star::before {
  transform: rotate(71deg);
}
.card-hill-star::after {
    transform: rotate(-71deg);
}
.star-1 {
  top: 20px;
  left: 5px;
}
.star-2 {
  top: 75px;
  left: 15px;
}
.star-3 {
  top: 10px;
  left: 60px;
}
/* 模様~円~ */
.card-hill-circle-1 {
  position: relative;
}
.card-hill-circle-2 {
  position: relative;
  top: 26px;
}
.card-hill-circle-3 {
  position: relative;
  top: 62px;
}
.card-hill-circle-4 {
  position: relative;
  top: 88px;
}
.card-hill-circle-5 {
  position: relative;
  top: 114px;
}
.hill-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 2px solid #D9AF64;
  border-radius: 50%;
}
.circle-1 {
  top: 45px;
  left: 117px;
}
.circle-2 {
  top: 35px;
  left: 138px;
}
.circle-3 {
  top: 25px;
  left: 165px;
}
.circle-4 {
  top: 15px;
  left: 186px;
}
.circle-5 {
  top: 5px;
  left: 213px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  transform: rotate(45deg);
}
/* 模様~線~ */
.card-hill-border-1 {
  position: relative;
  left: -30px;
  top: 200px;
}
.card-hill-border-2 {
  position: relative;
  left: 80px;
  top: 180px;
  transform: rotate(10deg);
}
.card-hill-border-3 {
  position: relative;
  left: 10px;
  top: 110px;
  transform: rotate(-15deg);
}
.border-1 {
  position: absolute;
  bottom: 0;
  left: 150px;
  width: 100px;
  height: 70px;
  border-radius: 50%;
  background: transparent;
  border-top: 5px solid #D9AF64;
  transform: rotate(5deg);
}
.border-2 {
  position: absolute;
  bottom: 10px;
  left: 80px;
  width: 100px;
  height: 70px;
  border-radius: 50%;
  background: transparent;
  border-top: 5px solid #D9AF64;
  transform: rotate(20deg);
}

長くなってしまい、申し訳ございません。
欲張って3つも作成したのが悪かったと反省しております。

ここでのポイントは、丘の順番です。一番前に真ん中の丘を表示させたいので、一番最後に記述しています。
模様に関しては、自分の好きな模様で大丈夫です。

完成

年賀状が完成しました。

CodePenで公開しているので、コードが見たい方などはご覧になって下さい。

おわりに

とても長い記事になってしまいましたが、最後まで読んでいただき、ありがとうございます。
イノシシをCSSで書くのは初めてだったので、楽しみながら作成できました。
CSSのコードは冗長になりがちなので、改めて、Sassの偉大さを痛感しました。

反省としては、カラーコードが大文字小文字混在しており、ちゃんとした方には見苦しいコードになってしまったことです。

結論

年賀状は、専用のアプリで作成するのが一番だ！

参考サイト

年賀状のサイズ：http://www.size-info.com/postcard/nenga.html
フォント選び：https://blog.members.co.jp/article/23725
丘の模様（星）：https://qiita.com/nekoneko-wanwan/items/8f8968dfeb459d81cdf1