Help us understand the problem. What is going on with this article?

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

こんにちは。

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

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

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

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

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

まなちゃん

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

PA0_0129.JPG
左うねこ 右まなちゃん

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

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

どっしり生きてきたまなちゃん。現在の姿がこちら
iOS の画像 (2)のコピー23.jpg

ざっくり部品を説明

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

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

HTMLはこうなる:point_down_tone1:

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
これは.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;で角丸を設定(左右で逆に)

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

image.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

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

の角丸ができる。

image.png

模様

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

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

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

image.png

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

顔のパーツ

顔のパーツは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を華麗につける

image.png

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

mouse
&__mouth{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin:auto;
    background-color: $pink;
    width: 20px;
    height: 40px;
    border-radius: 100%;
  }
  • 三角とかじゃなく楕円にすることで、更に愛らしさを表現
  • 「ω」の下にしまっておくことで、アニメーションしたときにいい感じに

image.png

ひげ

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

反対も同じく

image.png

まなちゃん完成!!!

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした