Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アンパンマンをcssで描く

Last updated at Posted at 2020-12-09

cssで初めてキャラクターを制作したので、その時に行ったことについて紹介します。

制作物

全体のコード

<!-- 顔 -->
<div class="face">
  <!-- 眉毛 -->
  <div class="eyebrowsWrapper">
    <div class="eyebrows eyebrows--left"></div>
    <div class="eyebrows eyebrows--right"></div>
  </div>
  <!-- 目 -->
  <div class="eyeWrapper">
    <div class="eye eye--left"></div>
    <div class="eye eye--right"></div>
  </div>
  <!-- 鼻・頬 -->
  <div class="noseWrapper">
    <div class="nose nose--left"></div>
    <div class="nose nose--center"></div>
    <div class="nose nose--right"></div>
  </div>
  <!-- 口 -->
  <div class="mouse"></div>
</div>
// reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

// 要素自体を中央に
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  min-height: 300px;
}

// 顔
.face {
  position: relative;
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 50%;
  background: #fe935d;
}

// 眉毛
.eyebrowsWrapper {
  display: flex;
  justify-content: space-between;
  width: 190px;
  height: 50px;
  margin: 50px auto 0;
}

.eyebrows {
  width: 70px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  border-left: 3px solid #000;
  &--left {
    left: 0;
  }
  &--right {
    right: 0;
  }
}

// 目
.eyeWrapper {
  display: flex;
  justify-content: space-between;
  width: 160px;
  height: 54px;
  margin: -25px auto 0;
  background: #ff0;
}

.eye {
  width: 40px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

// 鼻
.noseWrapper {
  display: flex;
  justify-content: center;
}

.nose {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  &::before {
    content: '';
    display: block;
    width: 60%;
    height: 100%;
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
  }
  &--left {
    margin-top: 5px;
    margin-right: -5px;
    background: #fe523c;
    &::before {
      margin-left: auto;
      border-radius: 0 80px 80px 0;
      border-top: 3px solid #000;
      border-right: 3px solid #000;
      border-bottom: 3px solid #000;
    }
  }
  &--center {
    z-index: 1;
    background: #fc2812;
    border: 3px solid #000;
    &::before {
      content: none;
    }
  }
  &--right {
    margin-top: 5px;
    margin-left: -5px;
    background: #fe523c;
    &::before {
      border-radius: 80px 0 0 80px;
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      border-left: 3px solid #000;
    }
  }
}

// 口
.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: -5px auto 0;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    display: block;
    width: 100%;
    height: 70px;
    border-radius: 0 0 70px 70px;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-left: 3px solid #000;
  }
}

制作過程

html

<div class="face"></div>

scss

丸を作成

.face {
  width: 300px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 50%;
  background: #fe935d;
}

結果

face1.png

眉毛

html

<!-- faceの中に入れる -->
<div class="eyebrowsWrapper">
  <dic class="eyebrows eyebrows--left"></div>
  <dic class="eyebrows eyebrows--right"></div>
</div>

scss

.eyebrowsWrapper {
  display: flex;
  justify-content: space-between;
  width: 190px;
  height: 50px;
  margin: 50px auto 0;
}

.eyebrows {
  width: 70px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  border-left: 3px solid #000;
}

結果

face2.png

説明

1. 眉毛の大枠作成

.eyebrowsWrapperで眉毛の配置する場所を作成。(画像の黄色い場所)

face3.png

2. 眉毛の枠を作成

.eyebrowsで眉毛を作成。

.eyebrows {
  width: 70px;
  height: 50px;
  background: #00f;
}

face4.png

3. 上の部分のみ、角をとる

.eyebrows {
  width: 70px;
  height: 50px;
  background: #00f;
  border-radius: 50px 50px 0 0; // これを追記
}

face5.png

border-radiusについて、

border-radius: 左上 右上 右下 左下;

のように記載することで、個別に記載を行うことができるため、今回は「左上」と「右上」に50pxの記載を行うことで、上記のような角丸を作成することができる。

詳しくは https://developer.mozilla.org/ja/docs/Web/CSS/border-radius を参照してください。

4. backgroundからborderに変更

今回は、「top, right, left」の3箇所に線を引くため、

.eyebrows {
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  border-left: 3px solid #000;
}

を追加。

face6.png

html

<!-- 目 -->
<div class="eyeWrapper">
  <div class="eye eye--left"></div>
  <div class="eye eye--right"></div>
</div>

scss

.eyeWrapper {
  display: flex;
  justify-content: space-between;
  width: 160px;
  height: 54px;
  margin: -25px auto 0;
  background: #ff0;
}

.eye {
  width: 40px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

結果

face9.png

説明

1. 大枠の作成

.eyeWrapperで目の配置する場所を作成。(画像の黄色い場所)

face7.png

.eyeで目を作成。

2. 枠を作成

.eye {
  width: 40px;
  height: 50px;
  background: #000;
}

face8.png

3. 楕円を作成

.eye {
  width: 40px;
  height: 50px;
  background: #000;
  border-radius: 50%; // これを追記
}

face9.png

楕円についても、正円の時と同じように、border-radius: 50%;で適応されます。

html

<!-- 鼻・頬 -->
<div class="noseWrapper">
  <div class="nose nose--left"></div>
  <div class="nose nose--center"></div>
  <div class="nose nose--right"></div>
</div>

scss

.nose {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  &::before {
    content: '';
    display: block;
    width: 60%;
    height: 100%;
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
  }
  &--left {
    margin-top: 5px;
    margin-right: -5px;
    background: #fe523c;
    &::before {
      margin-left: auto;
      border-radius: 0 70px 70px 0;
      border-top: 3px solid #000;
      border-right: 3px solid #000;
      border-bottom: 3px solid #000;
    }
  }
  &--center {
    z-index: 1;
    background: #fc2812;
    border: 3px solid #000;
    &::before {
      content: none;
    }
  }
  &--right {
    margin-top: 5px;
    margin-left: -5px;
    background: #fe523c;
    &::before {
      border-radius: 70px 0 0 70px;
      border-top: 3px solid #000;
      border-bottom: 3px solid #000;
      border-left: 3px solid #000;
    }
  }
}

結果

face15.png

説明

1. 大枠の作成

.noseWrapperで鼻・頬の配置する場所を作成。(画像の黄色い場所)

face10.png

2. 鼻の枠を作成

.noseで鼻・頬を作成

// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成)
.nose {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

// 左頬のスタイル
.nose--left {
  background: #fe523c;
}

// 鼻のスタイル
.nose--center {
  background: #fc2812;
}

// 右頬のスタイル
.nose--right {
  background: #fe523c;
}

face11.png

3-1. 頬の位置を調整

このままだと違和感があるので、鼻と頬が微妙に重なるように変更する

// 左頬のスタイル
.nose--left {
  margin-top: 5px;
  margin-right: -5px;
}

// 右頬のスタイル
.nose--right {
  margin-top: 5px;
  margin-left: -5px;
}

face12.png

3-2. 頬の位置を調整(鼻の重なりを調整)

現時点だと「左頬 → 鼻 → 右頬」の順番で要素が重なっているため、鼻のz-indexの値を追加することで、「左頬 → 右頬 → 鼻」の順番に重なりを変更します。

// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成)
.nose {
  position: relative;
}

// 鼻のスタイル
.nose--center {
  z-index: 1;
}

face13.png

4. 中央に白い四角を配置

cssで要素を中央に寄せる方法として、今回は固定の値のため、calc(50% - 要素のサイズ / 2)を使用して、合わせます。

// 鼻・頬の中央にある四角
.nose::after {
  content: '';
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
}

face14.png

5-1. 鼻に輪郭を配置

鼻については、全体に配置をするため、通常のborderを使用。

// 鼻のスタイル
.nose--center {
  border: 3px solid #000;
}

5-2. 頬に輪郭を配置

// 鼻・頬に共通するスタイル(鼻・頬のサイズを作成)
.nose::before {
  content: '';
  display: block;
  width: 60%;
  height: 100%;
}

// 左頬のスタイル
.nose--left::before {
  margin-left: auto;
  border-radius: 0 80px 80px 0;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
}

// 鼻のスタイル
.nose--center::before {
  content: none; // display: none;でもよいが、擬似要素だとcontent: none;で要素を表示させないこともできる。
}

// 右頬のスタイル
.nose--right::before {
  border-radius: 80px 0 0 80px;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
}

face15.png

補足

「4-2. 頬に輪郭を配置」の部分について、別の方法として、要素自体にborderを引く方法もあるが、その場合、以下のような状態(左頬の部分)になってしまうため、今回はbefore要素を使用し、半円で対応。

face16.png

html

<div class="mouse"></div>

scss

// 口
.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: -5px auto 0;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    display: block;
    width: 100%;
    height: 70px;
    border-radius: 0 0 70px 70px;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-left: 3px solid #000;
  }
}

結果

face17.png

説明

1. 口の表示させる部分の配置

.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: -5px auto 0;
  background: #00f;
}

face18.png

2. 曲線が適応されるように記載

.mouse

.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: 0 auto;
  border-radius: 0 0 40px 40px; // ここにborder-radiusを追加
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
}

のように対応を行った場合、以下の画像のような状態になってしまうため、before要を作成して対応を行う。

face19.png

3. before要素で曲線の部分を作成する

.mouse::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 0 0 70px 70px;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
}

face20.png

4. 位置の調整

高さを70pxで設定したため、

「既存の高さ(40px) - 設定した高さ(70px) = -30px」なので、topの値を-30pxに変更。

.mouse::before {
  content: '';
  position: absolute;
  top: -30px; // ここの値を変更
  left: 0;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 0 0 70px 70px;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
}

face21.png

5-1. はみ出している場所の非表示

はみ出している部分については、親要素にoverflow: hiddenを追加。

.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden; // これを追加
}

face22.png

5-2. 余白調整

最後に頬と口の間に隙間があるため、最後に余白の調整を行う

.mouse {
  position: relative;
  width: 140px;
  height: 40px;
  margin: -5px auto 0; // margin-top: -5px;に変更
  overflow: hidden;
}

face23.png

最後に

初めてcssでキャラクターを記載して見ましたが、意外と楽しかったので、また機会があればQiitaにまとめますので、よろしくお願いします!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?