JS memo

お洒落にJavaScript。

2019年5月18日13:07

HTMLとCSSだけでキャラクターを書いてみた

メインビジュアル

HTMLとCSSだけでキャラクターを書いてみた

最近JavaScriptを使わなくともHTMLとCSSだけである程度のWEBデザインは可能になりました。
フロントエンドをするにあたり、JavaScriptの技術だけでなく、HTMLとCSSの知識とスキルが足りていないなと感じます。
そこで今回はCSSのスキルアップと可能性を探るべく、HTMLとCSSだけでLINEのキャラクター「ブラウン」でデザインしてみました

目次

  1. 完成したデザインとHTML&CSSコード
  2. キャラクター作成のポイント
  3. まとめ

完成したデザインとHTML&CSSコード

まずはHTMLとCSSで作成したキャラクターのデザインを載せておきます。

ブラウン完成図▼

HTML▼


<div id="brown">
  <div id="left-eye"></div>
  <div id="right-eye"></div>
  <div id="mouse"></div>
  <div id="nose">
    <div id="nose-shape"></div>
  </div>
  <div id="mouse-bar"></div>
  <div id="mouse-bar2"></div>
  <div id="mouse-bar3"></div>
</div>

CSS▼


body {
  box-sizing: inherit;
}
#brown{
  position: relative;
  width:300px;
  height:250px;
  background-color: #825039;
  border-radius: 48%;
  margin-top:200px;
  border:solid 3px #54362a;
}
#brown::before, #brown::after {
  content: "";
  position: absolute;
  top: -10px;
  background-color: #825039;
  width: 100px;
  height: 70px;
  border-radius: 45%;
  border:solid 3px #54362a;
  z-index: -1
}
#brown::before {
  left: 35px;
  transform: rotate(60deg);}#brown::after {
  right:35px;
  transform: rotate(-60deg);}#left-eye, #right-eye {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: rgb(0,0,0);
  border-radius: 50%;
  top: 73px;}#left-eye {
  left: 120px;}#right-eye {
  right: 120px;}#mouse {
  position: absolute;
  width: 63px;
  height: 80px;
  top: 94px;
  left: 50%;
  transform: translate(-50%,0);
  background-color: #e3c9bb;
  border-radius: 45%;}#nose {
  position: absolute;
  top: 105px;
  left: 50%;
  transform: translate(-50%,0) scale(1,0.8);}#nose-shape {
  position: relative;
  background-color: rgb(0,0,0);
  text-align: left;}#nose-shape::before, #nose-shape::after {
  content: '';
  position: absolute;
  background-color: inherit;}#nose-shape, #nose-shape:before, #nose-shape:after {
  width: 1em;
  height: 1em;
  border-top-right-radius: 50%;
}
#nose-shape {
  transform: rotate(-240deg) skewX(-30deg) scale(1,.866);
}
#nose-shape:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
#nose-shape:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
#mouse-bar, #mouse-bar2, #mouse-bar3{
  position: absolute;
}
#mouse-bar {
  top: 120px;
  width: 5px;
  height: 20px;
  background-color: rgb(0,0,0);
  left: 50%;
  transform: translate(-50%,0);
}
#mouse-bar2, #mouse-bar3 {
  top: 130px;
  left: 47%;
  width: 6px;
  height: 30px;
  background-color: rgb(0,0,0);
  border-radius: 30%;
  transform: rotate(25deg);
}
#mouse-bar3 {
  left: 51%;
  height:25px;
transform: rotate(-37deg);
}

キャラクター作成のポイント

今回キャラクターを作成するにあたり、ポイントとなった部分がいくつかあったのでまとめておきます。

ポイントその1

はじめに輪郭・耳・目・口・鼻に分けて、divで表現するのか、beforeまたはafterで表現するのかを決めます。
決まったらザッとhtmlの構成を作成しておくと、cssが描きやすくなります。

ポイントその2

輪郭や目の丸や鼻の三角などの図形はbackground-colorとborder-radiusで表現してあげると上手く書くことができます。

ちなみにブラウンの鼻に使った角丸の逆三角形が難しかったので、 「CSSで3角丸の三角形を作る方法 - コードログ」のサイトを参考にさせていただきました。

ポイントその3

輪郭のpositionをrelativeにして、各パーツのpositionをabsoluteにしてあげるとtop,right,bottom,leftで位置を簡単に指定できます。

ポイントその4

今回HTMLとCSSを書くのにAtomを使用しました。AtomにはPreview HTMLという、いちいちブラウザでRunしなくてもデザインを表示してくれる優れたパッケージがあります。

ペイント

コードを書くとリアルタイムでデザインが更新されるのでhtml、cssを書く際にはおすすめです。

まとめ

割と単純な図形でもHTMLとCSSだけで表現するのは難しかったですが、CSSの表現方法に少し慣れた気がします。
色々他サイトを拝見させていただいて、 box-shadowを使ってキャラクターを書いているものが多かったので、次回はbox-shadowも駆使してデザインしてみようと思います。

またCSSのメタ言語SCSSでデザインするのもおもしろそうなので、使用してみたいと思います!