CSS
Sass
scss
デザイン
Web

SCSSでお絵かきしてみる(アンパンマンpart1)


はじめに

CSS(SCSS)を感覚的に使えるようになるため、

練習していきたいと思います。

まずは白黒のすごく簡単な絵を描きます。

今回のお題はアンパンマンです。

何も見ずに描いたので、また精度を上げて描きたいと思います。

(キャラクターの再現精度のほう)

一応githubにソース全体を上げています。

https://github.com/t-motoki/scss-oekaki/tree/master/src/oekaki/ampanman


注意


  • ただの自己満足です

  • 絵を描くことが目的です

  • googlechromeでのみ動作確認済みです


描いたもの


See the Pen
xBQMzv
by Takashi Motoki (@t-motoki)
on CodePen.


一応解説


  • 縦の並びはblock要素(div)を並べました

  • 横の並びはdisplay:flexを活用しました

  • 円はborder-radiusで表現しています

  • 半円はborderの描画を1辺にしています


今回の反省


  • 半円を描くのを手抜きなので、口が先細りしてしまった

  • scssのメリットを生かしきれてなかった


次の課題


  • 色をつける

  • 角度をつけたり、リアルさを追求していく

  • inline要素などもつかっていく