こんにちは。

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

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

See the Pen manachan by himeka223 (@himeka223) on CodePen.

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

詳しく説明していく
長くなりそうなので、動かす説明は次回に、、、
[CSSアニメーション]CSSだけで、まなちゃん（ねこ）を作って動かす　〜動かす編〜 - Qiita

まなちゃん

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

左うねこ　右まなちゃん

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

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

どっしり生きてきたまなちゃん。現在の姿がこちら

ざっくり部品を説明

まなちゃんを作る上で、下記の図のようにわけた

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

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>

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

耳

まなちゃんの耳の正体はこう。消してハムじゃない。

これは.manachan__earの疑似要素:after :beforeで左右の耳を表示している。

CSS

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;で角丸を設定（左右で逆に）

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

色と影

耳は、中のピンク、オレンジの毛、オレンジの毛の影、の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、影をずらし、内側に、という指定。

顔

CSS

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の楕円

の角丸ができる。

模様

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

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

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

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

顔のパーツ

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

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

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

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

目

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

CSS

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

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を華麗につける

口

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

mouse

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

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

ひげ

CSS

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);などのように、それぞれ傾きを付けている

反対も同じく

まなちゃん完成！！！

アニメーションについての説明は次回に、、、疲れたわけじゃない
[CSSアニメーション]CSSだけで、まなちゃん（ねこ）を作って動かす　〜動かす編〜 - Qiita

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

まなちゃん

ざっくり部品を説明

耳

CSS

形状

色と影

顔

CSS

形状

模様

顔のパーツ

目

CSS

鼻と「ω」

CSS

口

ひげ

CSS

形状

まなちゃん完成！！！

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