画像は一切つかわずにcss3で鏡餅を描く①

まず鏡餅はどんな構成になっているかを思い出してみます

• 橙（だいだい）＆その葉っぱ一度実った果実が落ちない（4・5年落ちないらしいです）ことから長寿・何代も前のものが実ったままの姿から家系代々の繁栄を願う縁起物といわれてます。
  ※みかんではございません
• 餅2段穀物の神様、年神（歳神）への供え物　※小＆大の2つです
• 四方紅（しほうべに）四方を紅で縁取ったもの。四方を紅で縁取ることで、天地四方の神を拝し災いを払い、一年の繁栄を祈願するもの。　※餅の下にある赤い縁のある紙
• 御幣（ごへい）※紙垂（しで）※特殊な断ち方をして折った紙。四方に大きく広げて繁盛するようにという願いが込められている　※紅と白が交互になっているひらひらした紙
• 三宝（さんぽう）三方向に穴の空いた台。尊い相手にものを差し出す時に載せて出すのが礼儀。　※のせる台

鏡餅は大体こんな感じの構成になっています。

橙・餅の作り方

さっそくまずは橙の作り方から始めます。

橙を作る上で要注意CSSプロパティは2つ

• border-radius …　角丸を作る
• box-shadow　…　影を付ける　※後日細かく解説します

橙

∴∵

.kgmmc {
	width:100%;
	height:500px;
	position:relative;
}
.happa {
	margin-left:-15px;
	border:1px solid #333;
	border-radius:20px 20px 20px 20px / 1px 20px 1px 20px;
	width:20px;
	height:10px;
	background-color:#47AC00;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 5px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:5px;
	z-index:6;
}
.daidai {
	margin-left:-27px;
	padding-top:15px;
	border:1px solid #333;
	border-radius:32px 31px 25px 22px / 25px 26px 25px 25px;
	width:55px;
	height:30px;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	background-color:#F4BF06;
	position:absolute;
	left:50%;
	top:10px;
	z-index:5;
	text-align:center;
}

お餅

.mochiS {
	margin-left:-90px;
	border:1px solid #333;
	border-radius:100px 100px 40px 40px / 50px 50px 30px 30px;
	width:180px;
	height:70px;
	background-color:#FFF;
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	box-shadow:0px 3px 5px rgba(0,0,0,0.3), inset -4px -5px 13px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:50px;
	z-index:4;
}
.mochiL {
	margin-left:-125px;
	border:1px solid #333;
	border-radius:100px 100px 40px 40px / 50px 50px 30px 30px;	
	width:250px;
	height:80px;
	background-color:#FFF;
	-moz-box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	-webkit-box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	box-shadow:inset -4px -5px 20px rgba(0,0,0,0.65);
	position:absolute;
	left:50%;
	top:110px;
	z-index:3;
}

へたうま手書き風、角丸（border-radius）でも以前書いた角丸の大きさをバラバラにする方法でお餅のような形も再現ができます。

※box-shadowについてはまた別途解説いたします。

四方紅の作り方

次に四方紅の作り方について解説します。

四方紅を作る上で要注意CSSプロパティは1つ

• border …　枠にボーダーをつける（色んな使い方があるんです）

まずはborderプロパティをいじってみる

.shihoubeni {
	box-sizing:border-box;
	border-width:3px 3px 3px 3px; /* →50px 50px 50px 50pxに変更 */
	border-style:solid;
	border-color:#333;
	width:100px;
	height:100px;
}

borderで作る三角形

.shihoubeni {
	margin-left:-120px;
	box-sizing:border-box;
	border-width:50px 50px 50px 50px
	border-color:#333 transparent transparent transparent;
	border-style:solid;
    /*　↑上の罫線以外は透明にしてます↑　*/  
	width:100px;
	height:100px;
}

四方紅

.shihoubeni {
	margin-left:-120px;
	border-width:120px 120px 120px 120px;
	border-color:#333 transparent transparent transparent;
    /*　↑上の罫線以外は透明にしてます↑　*/  
	border-style:solid;
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:160px;
	z-index:10;
	-moz-transform:scale(1,0.5); /* 別途解説予定 */
	-webkit-transform:scale(1,0.5); /* 別途解説予定 */
	transform:scale(1,0.5); /* 別途解説予定 */
}
.shihoubeni:before {
	margin-left:-116px;
	border-width:116px 116px 116px 116px;
	border-color:#F00 transparent transparent transparent;
    /*　↑上の罫線以外は透明にしてます↑　*/  
	border-style:solid;
	display:block;
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:-119px;
	z-index:11;
}
.shihoubeni:after {
	margin-left:-110px;
	border-width:110px 110px 110px 110px;
	border-color:#FFF transparent transparent transparent;
    /*　↑上の罫線以外は透明にしてます↑　*/  
	border-style:solid;
	display:block;
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:50%;
	top:-119px;
	z-index:12;
}

様々な色の三角を作成して、重ねることで赤い縁どりの四方紅を再現することができます。

※transform:scale(1,0.5);についてはまた別途解説いたします。

さて、CSSで鏡餅の解説　第一部は今回はここまで。
第二部は近日公開いたしますので、お楽しみに！

→画像は一切つかわずにcss3で鏡餅を描く②へ続く