Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
3

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 1 year has passed since last update.

@kznr-snyin株式会社 運動通信社

私のCSSの歩き方

Last updated at Posted at 2022-08-26

CSS愛好家のみなさんこんにちは、自称CSSエンジニアの新屋です。
みなさんはCSSライフをいかがお過ごしでしょうか？私は日々CSSBattleに興じ、Googleのレコメンド記事もCSSまみれというCSS沼に片足つっこみそうなところなのですが、私の周りではあまりCSSの話をする人もおらず、競プロなどと比べると盛り上がりに欠けるなという印象です。なので今回はCSSを好きになってもらえたらという気持ちで記事を書かせていただこうと思います。

CSSで何をする？

CSSは奥が深く、勿論FLOCSSなどCSS設計の話も面白いのですが、そもそもCSSはデザインをコードで書けるものです。
ということで今回は絵を描きたいと思います（？）

今回の題材はこちらです。






bull.png
そう、みんな大好きブルくんです。

ブルくんはスポーツブルのマスコットキャラクターなのですが、あまりご存じないという方は以前ブルくんが活躍したレッドブルボックスカートレースの動画を貼っておくのでご覧ください。

実際に書いてみる

では以下書いていくのですが、コードが長くなってしまうので詳細の解説は省かせていただきます。気になるプロパティなどあれば調べながら見ていただければと思います。

  • まず下準備として枠取りします。ここは特になんでもいいですが、今回は.baseに対して絵を乗せていきます。
<div class="wrapper">
  <div class="base"></div>
</div>

html {
  background-color: #fff;
}

.wrapper {
  width: 600px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.base {
  position: relative;
}

準備が整ったところでまずは顔面からです。ブルくんは頭頂部が凹んで、ふたこぶのようになってるので何個か赤いレイヤーとマスク用の白いレイヤーを重ねて形を整えていきます。

  • 真っ赤な半月を用意
<div class="wrapper">
  <div class="base">
    <div class="face"></div>
  </div>
</div>

.face {
  position: absolute;
  width: 390px;
  height: 212px;
  background-color: #cc141d;
  border-radius: 48% 52% 52% 48% / 100% 100% 0% 0%;
  z-index: -100;
}

スクリーンショット 2022-08-22 1.02.58.png

  • そこに楕円を2枚のせる
<div class="wrapper">
  <div class="base">
    <div class="face"></div>
    <div class="bump bump-l"></div>
    <div class="bump_round bump_round-l"></div>
    <div class="bump bump-r reverse"></div>
    <div class="bump_round bump_round-r"></div>
  </div>
</div>

.reverse {
  transform: scaleX(-1);
}

.bump {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #cc141d;
  border-radius: 47% 84% 45% 44% / 130% 128% 0% 0%;
  border-radius: 84% 47% 44% 45% / 130% 128% 0% 0%;
  z-index: -100;
}

.bump_round {
  position: absolute;
  width: 84px;
  height: 52px;
  border-radius: 50% 50% 50% 50% / 50% 56% 44% 50%;
  background-color: #cc141d;
}

.bump-l {
  top: -18px;
  left: 4px;
}

.bump-r {
  top: -18px;
  left: 186px;
}

.bump_round-l {
  top: -18px;
  left: 92px;
}

.bump_round-r {
  top: -18px;
  left: 212px;
}

スクリーンショット 2022-08-22 1.11.17.png

  • 最後に赤四角と白丸を使って形を整えます。
<div class="wrapper">
  <div class="base">
    <div class="face"></div>
    <div class="bump bump-l"></div>
    <div class="bump_round bump_round-l"></div>
    <div class="bump_square bump_square-l"></div>
    <div class="bump bump-r reverse"></div>
    <div class="bump_round bump_round-r"></div>
    <div class="bump_square bump_square-r"></div>
    <div class="bump_mask"></div>
  </div>
</div>

.bump_square {
  position: absolute;
  width: 64px;
  height: 22px;
  background-color: #cc141d;
}

.bump_mask {
  position: absolute;
  width: 63px;
  height: 30px;
  border-radius: 50% 50% 50% 50% / 50% 56% 44% 50%;
  background-color: #fff;
  top: -33px;
  left: 162px;
}

.bump_square-l {
  transform: rotate(16deg);
  top: -9px;
  left: 138px;
}

.bump_square-r {
  transform: rotate(-16deg);
  top: -9px;
  left: 186px;
}

スクリーンショット 2022-08-22 1.17.32.png

  • 次に目をつけるのですが、あいにく顔面が真っ赤なので、.baseの下に両目のベースを作り、その上にそれぞれの目を置きたいと思います。まずは白目をちょうどいい位置に置きます。
<div class="base">
  ...
  <div class="eyes">
    <div class="eye"></div>
    <div class="eye reverse"></div>
  </div>
</div>

.eyes {
  position: absolute;
  width: 226px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 102px;
  left: 86px;
}

.eye {
  position: relative;
  background-color: #fff;
  width: 44px;
  height: 66px;
  border-radius: 50%;
  z-index: -2;
}

スクリーンショット 2022-08-22 1.30.12.png

  • 次に擬似クラスを使って黒目を入れてまぶたをキリッとさせます。
.eye::before {
  position: absolute;
  content: "";
  display: block;
  background-color: #cc141d;
  width: 44px;
  height: 16px;
  top: -2px;
  transform: skewY(20deg);
}

.eye::after {
  position: absolute;
  content: "";
  background-color: #000;
  width: 20px;
  height: 34px;
  border-radius: 50%;
  top: 10px;
  left: 13px;
  z-index: -1;
}

スクリーンショット 2022-08-22 1.32.29.png

  • 目ができたところで今度は肩のラインを出していきます。要領はこれまでと同じで白いマスクをうまく利用して肩のカーブを描いていきます。
<div class="base">
  ...
  <div class="shoulder shoulder-l"></div>
  <div class="shoulder shoulder-r"></div>
  <div class="shoulder_mask shoulder_mask-l"></div>
  <div class="shoulder_mask shoulder_mask-r"></div>
</div>

.shoulder {
  position: absolute;
  border-style: solid;
  border-width: 0 0px 80px 80px;
  border-color: transparent transparent #cc141d transparent;
}

.shoulder-l {
  top: 132px;
  left: -52px;
}

.shoulder-r {
  top: 132px;
  left: 360px;
  transform: scaleX(-1);
}

.shoulder_mask {
  position: absolute;
  width: 60px;
  height: 80px;
  border-radius: 0% 100% 100% 0% / 100% 0% 100% 0%;
  background-color: #fff;
}

.shoulder_mask-l {
  top: 132px;
  left: -53px;
}

.shoulder_mask-r {
  top: 132px;
  left: 383px;
  transform: scaleX(-1);
}

スクリーンショット 2022-08-22 1.39.17.png

  • 今度は耳をつけます。これも楕円を重ねて縁は白いマスクで調整していきます。
<div class="base">
  ...
  <div class="ear ear-l">
    <div class="ear-up"></div>
    <div class="ear-under"></div>
    <div class="ear_mask"></div>
    <div class="inner_ear"></div>
  </div>
  <div class="ear ear-r">
    <div class="ear-up"></div>
    <div class="ear-under"></div>
    <div class="ear_mask"></div>
    <div class="inner_ear"></div>
  </div>
</div>

.ear {
  position: absolute;
}

.ear-up {
  position: absolute;
  background-color: #cc141d;
  width: 60px;
  height: 30px;
  border-radius: 88% 12% 51% 49% / 88% 8% 92% 12%;
}

.ear_mask {
  position: absolute;
  background-color: #fff;
  width: 60px;
  height: 30px;
  border-radius: 100% 0% 66% 34% / 0% 34% 66% 100%;
  top: -9px;
  left: -44px;
}

.ear-under {
  position: absolute;
  background-color: #cc141d;
  width: 100px;
  height: 36px;
  border-radius: 37% 63% 51% 49% / 48% 8% 92% 52% ;
  top: 16px;
  left: -26px;
}

.inner_ear {
  position: absolute;
  width: 54px;
  height: 21px;
  background-color: #0e357f;
  border-radius: 80% 20% 43% 57% / 60% 48% 52% 40%;
  top: 26px;
  left: -12px;
}

.ear-l {
  top: 24px;
  left: -2px;
}

.ear-r {
  top: 24px;
  left: 394px;
  transform: scaleX(-1);
}

スクリーンショット 2022-08-22 1.47.05.png

  • これで残すはツノのみとなりました。ここまで来た方は大体お気づきかと思いますが、ツノは曲線が多く少し大変です。やり方はいろいろあるかと思いますが、ここではグレーの楕円から白マスクで型どっていき最後先端にグレーの楕円を乗せてみました。
<div class="base">
  <div class="horn">
    <div class="horn_mask_square_vertical horn_mask_square_vertical-l"></div>
    <div class="horn_mask_square_diagonal horn_mask_square_diagonal-l"></div>
    <div class="horn_mask_square_vertical horn_mask_square_vertical-r"></div>
    <div class="horn_mask_square_diagonal horn_mask_square_diagonal-r"></div>
    <div class="horn_mask_round"></div>
    <div class="horn_mask_square_center"></div>
    <div class="horn_mask_square_vertical2 horn_mask_square_vertical2-l"></div>
    <div class="horn_mask_square_vertical2 horn_mask_square_vertical2-r"></div>
    <div class="horn_top_round horn_top_round-l"></div>
    <div class="horn_top_round horn_top_round-r"></div>
  </div>
  ...
</div>

.horn {
  position: absolute;
  width: 386px;
  height:234px;
  background-color: #c9caca;
  border-radius: 50%;
  top: -160px;
  left: 10px;
  z-index: -1000;
}

.horn_mask_square_vertical {
  position: absolute;
  background-color: #fff;
  width: 25px;
  height:100px;
}

.horn_mask_square_vertical-l {
  top: 0;
  left: 66px;
  transform: rotate(10deg);
}

.horn_mask_square_vertical-r {
  top: 0;
  left: 282px;
  transform: rotate(-10deg);
}

.horn_mask_square_diagonal {
  position: absolute;
  background-color: #fff;
  width: 25px;
  height: 60px;
}

.horn_mask_square_diagonal-l {
  top: 92px;
  left: 82px;
  transform: rotate(-58deg);
}

.horn_mask_square_diagonal-r {
  top: 92px;
  left: 266px;
  transform: rotate(58deg);
}

.horn_mask_round {
  position: absolute;
  width: 259px;
  height: 122px;
  background-color: #fff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% ;
  top: 32px;
  left: 57px;
}

.horn_mask_square_center {
  position: absolute;
  width: 220px;
  height: 60px;
  background-color: #fff;
  top: 0;
  left: 80px;
}

.horn_mask_square_vertical2 {
  position: absolute;
  width: 40px;
  height: 60px;
  background-color: #fff;
}

.horn_mask_square_vertical2-l {
  transform: rotate(-20deg);
  top: 0;
  left: 54px;
}

.horn_mask_square_vertical2-r {
  transform: rotate(20deg);
  top: 0;
  left: 278px;
}

.horn_top_round {
  position: absolute;
  width: 28px;
  height: 50px;
  background-color: #c9caca;
}

.horn_top_round-l {
  border-radius: 50% 50% 61% 39% / 40% 56% 44% 60%;
  transform: rotate(-12deg);
  top: 24px;
  left: 35px;
}

.horn_top_round-r {
  border-radius: 50% 50% 61% 39% / 40% 56% 44% 60%;
  transform: rotate(12deg);
  top: 24px;
  left: 309px;
}

スクリーンショット 2022-08-22 1.58.22.png

以上で無事完成です！コードは長いですがやってることはひたすらレイヤー重ねてマスクで縁取りなのでコツをつかめばゴリゴリやっていけるかと思います。
これで大体のものはCSSで書けますね（？）

最後に

運動通信社では一緒にブルくんをCSSで書いてくれるフロントエンドエンジニアを募集しております！興味を持った方はもくもく会なども開催しておりますの是非遊びに来ていただけると嬉しいです！
それでは！

7
3
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
Sign upLogin
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?