[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす　〜作る編〜


こんにちは。

最近、タピオカの記事、「[\[CSSアニメーション\]●●●CSSでタピオカ作ってふわふわ浮かせる●●●](https://qiita.com/mame_hashbill/items/ccf6e89f46fde8a8e20c)」がタピオカランドを超える勢いでタピオカなので、負けてられないと、私は大好きなまなちゃん（ねこ）の愛らしさをCSSで表現しようと思う。

完成したまなちゃんはこちら

<p class="codepen" data-height="397" data-theme-id="0" data-default-tab="css,result" data-user="himeka223" data-slug-hash="MWgbKxa" style="height: 397px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="manachan">
  <span>See the Pen <a href="https://codepen.io/himeka223/pen/MWgbKxa/">
  manachan</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

スリスリしてくるような愛らしさがなんとも、愛くるしい！！！！！！

詳しく説明していく:point_down_tone1:
長くなりそうなので、動かす説明は次回に、、、
[\[CSSアニメーション\]CSSだけで、まなちゃん（ねこ）を作って動かす　〜動かす編〜 \- Qiita](https://qiita.com/super-mana-chan/items/8be7e32c750e292092c6)

#まなちゃん
出会いは高校3年生の夏休み。
高校の近くのファミマの裏に捨てられているのを、友達が学校に連れてきたのがきっかけ。
まなちゃんが妹のうねこ（もちろんこの子も超絶愛してる）とダンボールのなかで無邪気にじゃれ合っていたのを今でも覚えている、、、

![PA0_0129.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/77ea9cef-7267-b060-ba99-779ad6f2bb6c.jpeg)
左うねこ　右まなちゃん

ちなみに、まなちゃんという名前は、当時ぶいぶい言わせてた芦田愛菜に顔が似てるからと意味がわからない理由で友達がまなちゃんと名付けたのだ。今では気に入ってる。

そして、もともと家には2ぴきの猫がおられたので、頭を下げ、まなちゃんとうねこと共に住んでいただけることになった。

どっしり生きてきたまなちゃん。現在の姿がこちら
![iOS の画像 (2)のコピー2３.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/3f6cce00-a27f-19b3-9e99-096fb4baf35d.jpeg)

#ざっくり部品を説明
まなちゃんを作る上で、下記の図のようにわけた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/cf07d4c0-6769-ebee-ed29-b0744d8e0fd6.png)

* まなちゃん
    * 耳(ear) -疑似要素で左右を表示 
    * 顔(face) -疑似要素で模様を表示
        * 目(eye) -疑似要素で左右を表示 
        * 鼻(nouse) -疑似要素で左右の「ω」を表示
        * 口(mouse)
    * 左のひげ(beard) -疑似要素で1本目と3本目を表示
    * 右のひげ(beard--r) -疑似要素で1本目と3本目を表示

**HTMLはこうなる:point_down_tone1:**

```html:manachan.html

<div class="manachan">
  <div class="manachan__ear"></div>
  <div class="manachan__face">
    <div class="manachan__eye"></div>
    <div class="manachan__nouse"></div>
    <div class="manachan__mouth"></div>
  </div>
  <div class="manachan__beard"></div>
  <div class="manachan__beard--r"></div>
 </div>
```



では要素ごとに細かく見ていく。

#耳
まなちゃんの耳の正体はこう。消してハムじゃない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/e2f4651b-150f-e16f-054c-77349466436f.png)
これは`.manachan__ear`の疑似要素`:after` `:before`で左右の耳を表示している。
##CSS
```scss:ear
&__ear{
    position: relative;
    &:before, 
    &:after {
      top: 0px;
      width: 150px;
      height: 150px;
      background-color: lighten($pink,30%); 
    }
    &:before {
      left: 0px;
      transform: rotate(0deg);
      border-radius: 8px 150px;
      box-shadow: 
        0 20px darken($orange, 8%) inset, 
        4px -5px darken($orange, 16%) inset;
      animation: ear-l 5s infinite;
    }
    &:after {
      right: 0px;
      transform: rotate(0deg);
      border-radius: 150px 8px;
      box-shadow:
        0px 20px darken($orange, 8%) inset,
        -4px -5px darken($orange, 16%) inset;       
      animation: ear-r 5s infinite;
    }
  }
```
##形状
そう！まなちゃんの耳はただの三角ではない。
丸みを帯びた、とてもなだらかで、愛らしい三角形なのだ。

それを表現するべく、

* `width: 150px; height: 150px;`で正方形の要素に
* `border-radius: 8px 150px;`で角丸を設定（左右で逆に）

と設定し、右上、左上のみ出すことで緩やかな耳に見えるようにした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/dfe16c82-84b7-7f66-079f-57babdf1f51b.png)


##色と影
耳は、中のピンク、オレンジの毛、オレンジの毛の影、の3色からできている。
特に要素を増やさず、耳の形状を利用しながら、3色の色をいい感じにつけるには、オレンジの毛と影を`box-shadow`で表示させる。

* 基本となる中のピンクは、`background-color`で色を付ける
* オレンジの毛、オレンジの毛の影は**`box-shadow`の内側に影をつける方法**を利用


`box-shadow`は`,`で区切ることで複数影を設定できる。
これを利用し、オレンジの毛、オレンジの毛の影の2色を表示する。

まずオレンジの毛！！
1つ目の影として、`0px 20px darken($orange, 8%) inset`を指定。
これは**下に20px影をずらし、内側に、**という指定。

次にオレンジの毛の影で濃くなる毛！！
2つ目の影として、`4px -5px darken($orange, 16%) inset`を指定。
これは**右に4px、マイナスなので上に5px、影をずらし、内側に、**という指定。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/c480d13c-d202-473c-18c2-73c672631c64.png)

#顔
##CSS

```scss:face
&__face{
    position: relative;
    margin: auto;
    width: 300px;
    height: 290px;
    border-radius: 180px 180px 150px 150px / 180px 180px 120px 120px;
    background-color: $white;
    overflow: hidden;
    &:after,
    &:before{
      z-index: 0;
      width: 300px;
      height: 300px;
      background-color: #FAAC58;
      top: -120px;
      right: 50%;
      border-radius: 50% 0% 70% 50%;
    }
    &:before{
      top: -150px;
      right: auto;
      left: 40%;
      border-radius: 0% 50% 50% 70%;
    }
  }
```

##形状
まなちゃんの顔はでっぷりしてるので、ただの丸じゃ間に合わなかった。
ほっぺたをすこーしだけぶっくりしたかった。

なので
`border-radius: 180px 180px 150px 150px / 180px 180px 120px 120px;`
とすることで、左下、右下を楕円の角丸にすることが出来るのだ。

指定の仕方としては、
**`border-radius: 横方向の半径 / 縦方向の半径;`**
になる。

なので今回は、

* 左上と右上は180pxの円
* 左下と右下は横に半径150px、縦に半径120pxの楕円

の角丸ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/4e7e030b-c6c8-d1e2-eff9-fd0d4687a12f.png)


##模様

まなちゃんのトレードマーク！

これは疑似要素`:after:before`で表示した。
上で説明してる`border-radius`で角丸で模様の形を作り、顔に乗せている。

* 模様のかたちと色を指定した疑似要素を`position`で指定。
* `.manachan__face`に`overflow: hidden;`を指定することで顔からはみ出た模様を非表示に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/2dc0f701-f8b8-5c66-a261-4cdbebbb5b6b.png)

これで顔の下地は出来上がり！
ではお顔のパーツを見ていく。

##顔のパーツ
顔のパーツは`position`で位置を指定。

**ここで注意するのが、`z-index`**

出来上がるものイメージしながら、`z-index`を華麗に付けていく。

顔`.manachan__face`の模様をつけるための、疑似要素`:after`が、顔パーツである子要素たちの後ろにきてしまうので、そこも注意しながら`z-index`を華麗に付けていく。

##目
目は特にすごいことしてないので割愛。（めんどくさくなったわけじゃない）

###CSS

```scss:eye
&__eye{
    &:after,
    &:before{
      top: 35%;
      left: 30%;
      background-color: #000;
      width: 30px;
      height: 20px;
      border-radius: 50% 50% 40% 50%;
      z-index: 1;
      animation: eye 5s infinite;
    }
    &:before{
      left: auto;
      right: 30%;
    }
  }
```

##鼻と「ω」
まなちゃんのチャームポイント、ピンクのお鼻と、愛らしい「ω」
###CSS
```scss:nouse
&__nouse{
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    margin:auto;
    background-color: lighten($pink,30%);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    z-index: 1;
    &:after,&:before{
      top: 5px;
      left: -38px;
      background-color: lighten(#FBFBEF, 2%);
      width: 50px;
      height: 50px;
      border-radius: 100%;
      animation: nouse 5s infinite;
    }
    &:before{
      left: auto;
      right: -38px;
    }
  }
```

* `.manachan__nouse`要素自体をピンクの鼻とする
* 疑似要素`:after:before`で「ω」
* 今回も`position`で位置指定＆`z-index`を華麗につける

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/36fa4cfd-4132-75ce-ac4b-2dc27509a1f2.png)

##口
お口はあえて「ω」の下にしまっておく。

```scss:mouse
&__mouth{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin:auto;
    background-color: $pink;
    width: 20px;
    height: 40px;
    border-radius: 100%;
  }
```

* 三角とかじゃなく楕円にすることで、更に愛らしさを表現
* 「ω」の下にしまっておくことで、アニメーションしたときにいい感じに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/9c4d8127-3573-5f9f-062f-4c388462f0ba.png)

##ひげ
###CSS
```scss:beard
&__beard{
    position: absolute;
    top: 50%;
    left: -40px;
    width: 50px;
    height: 1px;
    background-color: #000;
    transform: rotate(3deg);
    animation: beard-l 5s infinite;
    &:after{
      @extend .manachan__beard;
      top: -10px;
      left: 0px;
      transform: rotate(6deg);
    }
    &:before{
      @extend .manachan__beard;
      top: 10px;
      left: 0px;
      transform: rotate(-6deg);
    }
  }
  &__beard--r{
    @extend .manachan__beard;
    transform: rotate(-3deg);
    left: auto;
    right:-40px;
    animation: beard-r 5s infinite;
    &:after{
      @extend .manachan__beard;
      top: -10px;
      left: 0px;
      transform: rotate(-6deg);
    }
    &:before{
      @extend .manachan__beard;
      top: 10px;
      left: 0px;
      transform: rotate(6deg);
    }
  }
```

###形状

* beard自体を真ん中のひげ
* 疑似要素`:before``:after`で上下のひげを表示
* `transform: rotate(3deg);`などのように、それぞれ傾きを付けている

反対も同じく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/53c01c02-52a7-5442-ffd8-a85f0f18c4e9.png)

#まなちゃん完成！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/04c881a4-bddf-3d77-2fe6-623a6f79b772.png)
アニメーションについての説明は次回に、、、疲れたわけじゃない
[\[CSSアニメーション\]CSSだけで、まなちゃん（ねこ）を作って動かす　〜動かす編〜 \- Qiita](https://qiita.com/super-mana-chan/items/8be7e32c750e292092c6)