Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@deren2525

CSSだけでお絵描き(CodePen)

Qiita初投稿になります。よろしくお願いします。
お手柔らかに...( ;∀;)

CSSだけでお絵描き

CSSだけで絵を描いている方をちらほら見かけまして
え、おもしろ、私もやりたいと思い初挑戦してみました。
この記事は記録用として書いています。タメになることはないかも...

SCSSで書いてます。

CodePen

HTMLとかCSSとかJSをウェブ上で書けるサービス。
書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。
https://codepen.io/

CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。
今後もお世話になりそう。

ということで、アンパンマン

いざ!お絵描き!といきたいところですが、お題決めにいつも悩みます。
目の前にあんぱんがあったのでアンパンマンにしました。(Chrome推奨です)

See the Pen CSS Anpanman by Deren (@deren2525) on CodePen.

やってみて、所感

アンパンマンの眉毛とかほっぺの線とか、というかどのパーツもゴリ押し感がすごいです。
曲線の書き方がわからず、JS使えばいけるよって記事があったのですがJSは今回使いたくないという謎のこだわりがありました()
その結果ゴリ押しな部分がちらほらありますが、そもそもCSSだけで絵を描く時点でゴリ押しになりますよね。

CSSだけで曲線を書ける方法がわからなかったのですが、もし知っている方いらっしゃいましたら教えていただきたいです。
ゴリ押しでもいけますが、まだ楽な方法があるなら楽な方を使いたいですよね。

コードの中身、もっと簡潔にできたところあるんだろうなあと思っています。
どこかでリファクタリングしていきたいです。

またCSSでお絵描き挑戦したいです。
アニメーションを加えたらもっとおもしろそうですね。

20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What is going on with this article?