あけおめ企画 – 画像を一切使用せず CSS で鏡餅年賀状を描いてみた

phi phi on css

元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた | TM Life』の個別解説です.

今回解説するのは CSS Version についてです.

Sample

今回解説するサンプルです. 鏡餅の絵とかもすべて CSS で描いています.

Code

サンプルのコードです.

HTML

  <body>
    <h1>CSS で鏡餅ハガキ</h1>
    <div class="kagamimochi-hagaki">
      <div class="kagamimochi">
        <div class="stand-00">
          <div class="hole"></div>
        </div>
        <div class="stand-01">
          <div class="sankaku-00"></div>
          <div class="sankaku-01"></div>
          <div class="sankaku-02"></div>
        </div>
        <div class="big-omochi"></div>
        <div class="middle-omochi"></div>
        <div class="mikan"></div>
        <div class="happa"></div>
      </div>
      <div class="msg">
        <div class="akeome">あけまして<br /> おめでとう<br />  ございます</div>
        <div class="aisatsu">本年も宜しくお願いします</div>
        <div class="hizuke">平成 二四年 </div>
        <div class="gantan">元旦</div>
      </div>
    </div>
  </body>

CSS

body {  
  font-family: "Meiryo", Arial, Helvetica, sans-serif;
}

.kagamimochi-hagaki {
  position: absolute;
  width: 500px;
  height: 740px;
  margin: auto;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  box-shadow: 2px 2px 8px 0px black;

  background-color: white;
}

.kagamimochi-hagaki * {
  position: absolute;
  margin: 0px auto;
  left: 0px;
  right: 0px;
}

.kagamimochi {
  top: 240px;
  width: 500px;
  height: 500px;
}

.stand-00 {
  bottom: 80px;
  width: 200px;
  height: 160px;
  background-color: hsl(40, 60%, 60%);
  box-shadow: inset -2px -2px 8px 0px black;
}
.stand-00 .hole {
  margin: auto;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  background-color: black;
  box-shadow: inset 0px 0px 10px 4px #aaa;
  border-radius: 50px;
}
.stand-01 {
  bottom: 240px;
  width: 300px;
  height: 50px;
  background-color: hsl(40, 60%, 60%);
  box-shadow: inset -2px -2px 8px 0px black;
  z-index: 30;
}
.sankaku-00 {
  width: 0;
  height: 0;
  top: 1px;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-top: 120px solid white;
}
.sankaku-01 {
  width: 0;
  height: 0;
  top: 1px;
  border-left: 110px solid transparent;
  border-right: 110px solid transparent;
  border-top: 110px solid red;
}
.sankaku-02 {
  width: 0;
  height: 0;
  top: 1px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid white;
}
.big-omochi {
  left: 0px;
  right: 0px;
  bottom: 280px;
  width: 250px;
  height: 80px;
  background-color: #ffc;
  box-shadow: inset -2px -2px 8px 0px black;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  /*
  border-radius: 125px/50px;
  */
  z-index: 10;
}
.middle-omochi {
  bottom: 345px;
  width: 160px;
  height: 80px;
  box-shadow: inset -2px -2px 8px 0px black;
  border-radius: 80px/50px;
  z-index: 20;

  background-color: #ffc;
}
.mikan {
  bottom: 410px;
  width: 60px;
  height: 50px;
  box-shadow: inset -4px -4px 16px 0px black;
  border-radius: 30px;
  border-radius: 60px/50px;
  z-index: 30;

  background-color: orange;
}
.happa {
  left: 15px;
  right: 0px;
  bottom: 450px;
  width: 25px;
  height: 15px;
  box-shadow: inset -4px -4px 16px 0px black;
  border-top-left-radius: 60%;
  border-bottom-right-radius: 60%;
  z-index: 30;

  background-color: green;
}

.msg {
  height: 740px;
  width: 500px;
  /*
  font-family: "標楷體", "Meiryo", Arial, Helvetica, sans-serif;
  */
  font-family: "@MS 明朝", "@ヒラギノ明朝";
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
}
.akeome {
  top: 20px;
  right: 30px;
  font-size: 40px;
  font-weight: bold;
}
.aisatsu {
  top: 50px;
  right: 390px;
  font-size: 20px;
}
.hizuke {
  top: 190px;
  right: 440px;
  font-size: 20px;
}
.gantan {
  padding: 5px;
  width: 30px;
  top: 320px;
  right: 400px;
  background-color: red;
  border-radius: 10px;

  color: white;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}

Tips

CSS で要素を自由配置する

position プロパティに absolute をし, top, left, bottom, right にピクセルをセットすることで自由な位置に要素を配置することができます.

鏡餅に使用している要素は全て position に absolute を設定し, top, left, bottom, right で位置を調節しています.

.kagamimochi-hagaki * {
  position: absolute;
  margin: 0px auto;
  left: 0px;
  right: 0px;
}

CSS で円(台), 楕円(おもち)を描画

daen

box 要素はデフォルトで四角形ですが border-radius を使うことで簡単に変形にすることができます.

円を描画

border-radius の値に幅, 高さの半分の値もしくは 50% を設定することでキレイな円を描画することができます.

div.circle {  
  margin: 1em;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
}

楕円を描画

上記の円の例の高さ, もしくは幅の部分の大きさを変更することで楕円を描画することができます.

div.oval {  
  margin: 1em;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
}

円柱的な図形を描画

border-radius には分数も設定することができます. これを使えば今回のサンプルのお餅のように左右は円弧になっていて上下はちょっと平べったい図形を描画することができます.

div.column {  
  margin: 1em;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%/25%;
}

CSS で三角形(紙)を描画

sankaku

border を応用することで三角形を描画することができます. 流れは

  • 幅, 高さを設定
  • border に値を設定
  • 全てのボーダーのカラーに transparent を設定し, 一辺だけ色設定する で三角形を表示することができます.
div.triangle {  
  margin: 1em;
  width: 100px;
  border: 50px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 50px solid red;
}

CSS で葉っぱを描画

happa

border-radius は左上, 右上, 左下, 右下それぞれを一括で設定しますが, border-radius は個別に設定することもできます. 葉っぱは 左上, 右下のみ border-radius で丸めることで葉っぱっぽく描画しています.

div.leaf {  
  margin: 1em;
  width: 100px;
  height: 100px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: green;
}

CSS でテキストを縦書きにする

tategaki

css の writing-mode プロパティに値を設定することで縦書きにすることができます. webkit 系では vertical-rl を指定することで, IE では tb-rl を設定することで縦書きになります.

一点だけ注意として, vertical-rl は縦書きに対応していないフォントの場合縦書きの横書きになってしまいますのでご注意を. 現状 [email protected] ゴシック” と [email protected] 明朝” が縦書きに対応しているみたいです.

.text {
  margin: 1em;
  width: 50px;
  height: 125px;
  font-size: 24px;
  font-family: "@MS 明朝", "@ヒラギノ明朝";
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}