はじめに
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要素などもつかっていく