CODEPENでお絵かき１

CODEPENでは、グラフィカルな作品も多くとても綺麗で、自分もチャレンジしたいと思いお絵描きしてみました。

See the Pen Minion Bob by tomo (@tomoka) on CodePen.

大きさを測る時は、photoshopでピクセルで大きさを図りました。
数値をそのままcssに反映。

色はもちろんphotoshopのスポイトで取得。

こだわったのは、DOMの構造です。
左右の手を示すのに、少し深くネストしました。

例えば、手。

腕
├左ー手
|　　├指１
|　　├指２
|　　└指３
└右ー手
　　　├指１
　　　├指２
　　　└指３

ソースにすると以下のような感じ。

      .arms
        .left
          .hand
            .finger01
            .finger02
            .finger03
        .right
          .hand
            .finger01
            .finger02
            .finger03

顔も、体も、カテゴリ分けしてネストすることに意味を持たせたく。
絵を描いたのはずいぶん前なのですが、また描こうかなと思ったので記事を書きました。