初めてのCSSアート

Comment

CSSを学び始めたころに作ったCSSアートです。
小学生の時に初めて買ってもらったゲーム機を題材にしました。

CSSについて調べていたら、「CSSアート」というものがあると知り、やってみたくなりました。
positionプロパティを使ったポジショニング練習として行いました。

初めてCSSアートに挑戦するので作りやすいものが良いと思い、四角くて作りやすそうなNintendo DSを思いつきました。
モチーフを決めたら資料を参考に色を選んだり、どのように記述するかの設計図を描きました。
設計図を作っておいたおかげでコーディングの時にあまり迷わず進められました。

設計図を参考にコーディングしました。
思った場所に配置できるように、HTMLタグの親子関係に気を使いながら作りました。また、グラデーションを駆使してリアルに見えるように調整しました。

最初、CSSアートというものを知って、難しそうだと思っていましたが、やってみたら楽しくて「自分にもできるんだ」とうれしくなりました。CSSアートという技術は実際の業務では使わないと思いますが、 HTMLやCSSを知る、触れるための入り口として適していると思いました。