SCSSでモンスターボールっぽいものを作ってたくさん背景に並べてみた

Flutterエンジニアのいもりんです。

今回は大好きなポケットモンスターに登場するモンスターボールっぽいものをSCSSで作りたいと思います。

monsterball.scss

$ball-color: #d9d9d9;
$background-color: #ffffff;

.monsterBall {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  background-color: $ball-color;
}

/* 横線 */
.monsterBall::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px); /* 中央に配置 */
  width: 100%;
  height: 4px;
  background-color: $background-color;
}

/* 中央の丸 */
.monsterBall::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: $ball-color;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px $background-color; /* 中心をくり抜く形にし、色を指定 */
}

表示するとこのようになります。

簡単にSCSSの解説です。

• .monsterBall：モンスターボールのベースになる円
• .monsterBall::before：背景色と同じ色の横線
• .monsterBall::after：背景色と同じ色の円とその中にボールと同じ色の円

イメージとしては円と横線を重ねていくように作っています。

横線を中心に配置するためにtopからheightで指定したpxの半分を引いているので、数値を調整する場合は注意してください。

業務ではFlutterを使っていますが、Webフロントエンド開発はFlutterのスマホアプリ開発とは違った面白さがあって楽しいですね。