CSSでお絵かき
今回は息抜きブログです。CSSでお絵かきしてみました。水栽培しているアボカドです。CSSでアイコンを描くことができることを知って、私も描いてみたいなと思いアボカドにしてみました。HTMLやCSSを学び始めた人はこうやってたまにお絵かきしてみると勉強にもなり、息抜きにもなって良いのではないでしょうか。
使用したものは、divタグと擬似要素のみで、スタイルは「margin、width、height、background-color、flexbox、border-radius、position、opacity」だけです。これだけのスタイルで絵がかけてしまいました。
CSSを使い始めて半年経ちましたが、CSSはそれぞれのスタイルの癖が強いなと感じています。なので、マークアップの仕事では多くのスタイルを知るよりも、まずはスタイルそれぞれの特性（仕様）を理解するのがスキルアップへの近道だと思うようになりました。
<div class="p-avo-anime">
<div class="p-avo-anime__top">
<div class="p-avo-anime__ha-left"></div>
<div class="p-avo-anime__kuki"></div>
<div class="p-avo-anime__ha-right"></div>
</div>
<div class="p-avo-anime__pet">
<div class="p-avo-anime__tane"></div>
<div class="p-avo-anime__ne"></div>
</div>
</div><style>
.p-avo-anime {
margin: 30px 20px;
}
.p-avo-anime__top {
display: flex;
justify-content: center;
}
.p-avo-anime__ha-left,
.p-avo-anime__ha-right {
width: 150px;
height: 70px;
background-color: green;
opacity: 0.7;
}
.p-avo-anime__ha-left {
border-radius: 0% 100%;
}
.p-avo-anime__ha-right {
border-radius: 100% 0%;
}
.p-avo-anime__kuki {
width: 15px;
height: 300px;
margin-bottom: -50px;
background-color: green;
border-radius: 100% 0% 50% 50%;
}
.p-avo-anime__pet {
background: #59f;
width: 250px;
margin: 0 auto;
/* z-index: -1; */
padding: 0 0 30px;
opacity: 0.9;
border-radius: 20% 20% 40% 40%;
position: relative;
}
.p-avo-anime__tane {
position: relative;
width: 80px;
height: 100px;
margin: 0 auto;
background-color: tan;
border-radius: 50%;
}
.p-avo-anime__pet:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 30%;
background: #555;
opacity: 0.6;
border-radius: 30% 30% 50% 50%;
}
.p-avo-anime__tane:before {
content: "";
position: absolute;
top: 0;
right: 35%;
width: 20px;
height: 100%;
background-color: brown;
border-radius: 10% 30% 50% 30%;
}
.p-avo-anime__ne {
height: 200px;
width: 10px;
background: #ffd;
margin: 0 auto;
border-radius: 30% 20% 50% 30%;
}
</style>
