Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@takashimeloninぅゅ...ぷんぽぷんぽ

CSSで年賀状を作ろう！

Last updated at Posted at 2018-12-20

はじめに

この記事は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つも作成したのが悪かったと反省しております。

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

完成

年賀状が完成しました。

スクリーンショット 2018-12-21 3.12.01.png

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

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?