Hello Droid! CSSでドロイド君を描いてみた

CSSでアンドロイドのキャラクター「ドロイド君」を作成する

目標

次の画像にあるドロイド君を作成する

※できあがったコードはこちらから確認できます。

準備

任意のディレクトリに下記ファイルを作成

droid.html
droid.css

droid.html の初期状態

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <!-- ドロイド君のパーツをここに追加 -->
  </div>
</body>
</body>
</html>

droid.cssの初期状態

/* ドロイド君 */
.droid {
  margin: 50px;
}

/* 以下に追記していく */

作成

必要なパーツ検討

大きく分けて3パーツに分けられそう

さらに、体は手足と親子関係を築けそう

droid.htmlで表現するとこんな感じになる

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="css/droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <div class="droid__head">
      <div class="droid__antenna"></div>
      <div class="droid__eye"></div>
    </div>
    <div class="droid__body">
      <div class="droid__hand"></div>
      <div class="droid__leg"></div>
    </div>
  </div>
</body>
</body>
</html>

頭を作成

まずは頭のみ作成

これは半円で表現できそう。droid.css に以下を追記

.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
}

positionのrelative・absoluteとz-indexを使って、半円の上に目をのせる

.droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
  /* 新規追加 */
  position: relative;
  z-index: 0;
}

.droid__eye {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 疑似属性のbefore, afterを使わなくても良いが、使用するdiv タグの数を減らせる */
.droid__eye::before,
.droid__eye::after {
  top: 25px;
  left: 20px;
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: #ffffff;
  content: "";
  position: absolute;
}

ファイルを開くとこんな感じになる

目と同じようにアンテナ用のクラスも追加

.droid__antenna {
  position: relative;
  z-index: 1;
}

.droid__antenna::before,
.droid__antenna::after {
  border: 1px solid #a0c437;
  top: px;
  left: 15px;
  width: 15px;
  background: #a0c437;
  transform: rotate(50deg);
  content: "";
  position: absolute;
}

.droid__antenna::after {
  left: 70px;
  transform: rotate(-50deg);
}

これでようやく頭ができた

頭の下に体を作成

下記を追記

.droid__body {
  width: 100px;
  height: 100px;
  background: #a0c437;
  border-radius: 0 0 5px 5px / 0 0 5px 5px; /* 体の下の角を少し丸くする */
}

ファイルを開くと…ん、頭と体がくっついてしまった、、
.droid__headに margin-bottom: 5px;を追記して調整

これでいい感じになった

手足を追加

頭に目やアンテナを付けたときと同じように手足も付けられる

.droid__hand {
  z-index: 1;
  position: relative;
}

.droid__hand::before,
.droid__hand::after {
  left: -25px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__hand::after {
  left: 105px;
  border-radius: 20px/ 20px;
}

.droid__leg {
  position: relative;
  z-index: 1;
}

.droid__leg::before,
.droid__leg::after {
  top: 50px;
  left: 10px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__leg::after {
  left: 70px;
  border-radius: 20px/ 20px;
}

できあがり！

少し工夫

ドロイド君がまばたきするようにしてみた
.droid__eye::afterにanimation: blink-r infinite 7s;を追加

さらに下記を追加

.droid__eye::before {
  animation: blink-l infinite 7s;
}

@keyframes blink-r {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}

@keyframes blink-l {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}