CSSアート – CSSが苦手な方におすすめする一つの練習方法

今年に入ってからHTMLとCSSを勉強し始めたのですが、CSSって意外と躓きませんか?HTMLとCSSはコーディングの中でとても簡単な部類だと思いますが、CSSがいまいちうまくならなく、特に配置がうまくありませんでした。ただ一つ方法でCSSの理解がかなり高めることが出来ました。

今回はそのCSSの勉強に効果的な勉強方法を一つ紹介します。

CSSで絵を書く

これです。これでCSSの理解がかなり深まります。僕は最近Codepenというサイトを頻繁に利用していますが、そこで見かけたのが多くのCSSアートです。CSSアートとは画像を一切使わないでCSSで描かれた絵のことです。初めて見たときはいつもイラストレーターで絵を書いている僕としては「なんだこれは」と思って変に思っていたのですが、調べてみるとこんなことができるのかと驚く作品が多く見つけることが出来ました。例としてはこのような作品です。たぶんすべて表示されないので、右上のEdit on Codepenをクリックしてリンク先に飛んでくだい。それか下にある数字をクリックすれば縮小されます。

See the Pen CasioPT-1.css by Sarah Fossheim (@fossheim) on CodePen.

Sarah FossheimさんによってCasioPT-1というキーボードがかなりリアルに再現されています。

 

See the Pen CSS collector’s cabinet by Lynn Fisher (@lynnandtonic) on CodePen.

Lynn FisherさんによるCSSアート作品です。初めてみたときは、レベルの違いを思い知らされました。

 

See the Pen Only CSS: Infinite Steps by Yusuke Nakaya (@YusukeNakaya) on CodePen.

コーディングを勉強している方なら知っている方もいると思います。Yusuke Nakayaさんによる無限階段です。CSSってこんなこともできるのかと驚かされます。CSSアートを200以上も作られた方です。すごすぎです。

 

他にも紹介したいCSSアートがたくさんありますが、ぜひCodepenで探してみてください。

CSSアートに挑戦してみる

初めは難しそうだと躊躇していたのですが、勉強になると思ってまずは一つ簡単なのに挑戦してみました。

See the Pen CSS Art – WALKMAN – 1st Edition – by Shunya (@shunyadezain) on CodePen.

Walkmanの初代ですね。レトロ感が好きだったのと、パーツがあまりないので作れそうだなと思って作ってみました。初めてにしては結構うまくいったと思っています。SONYの文字以外はCSSで描いてます。Walkmanの文字もCSSにして凝ってみました。少し難しく感じたのは中心の、カセットテープを回す機構の出っ張り?です。どうやったらうまく回転させるのか考えたりしました。

作成過程

Sarah FossheimさんのウェブサイトにCSSアートの作り方がまとめられていたので真似してみました。

https://fossheim.io/writing/posts/css-polaroid-camera/

まずは参考画像を元に色のグラデーションに使う配色をAffinity Deignerで整理しました。Affinity Deignerのいいとことはスポイトで画面上のどの色も調べられるとこです。Adobe XDなどでも同じようなことは出来ます。

これはやらなくてもいいのですが、後でかなり楽になります。

 

普段使わないPugとStylusを使ってみる

CSSアート作品を見てみると多くの人がPugとStylusを使っていました。なので僕自身も使ってみました。どちらも使うことでコードを書く量が減らせるようになります。使ってみた感想としては、使い慣れていなかったので少し戸惑いました。いつもはSassを使っているのでSassでいいかなといった感じでした。今度また勉強してみたいと思います。

 

もちろん普通のCSSで描けるので使いやすいやつを使ってください。

 

CSSアートのいいところ

今回は細かいコードの説明はしませんが、CSSアートの利点をもう少し話していきたいと思います。

 

CSSアートのメリット

  • ポジショニングが上手くなる(理解できる)
  • 楽しく学べる
  • CSSアニメーションも学べる

 

ポジショニングが苦手な方に

僕自身は例えばabsoluteなどを使ったポジショニングが苦手でした。いまいち理解できていなかったのと、たまにmarginで動かない要素があることがよくわかっていませんでした。ですがCSSアートを通して、どこにどうやって配置できるかの理解を深めることができました。CSSアートはポジショニングが一番重要なのでかなり勉強になりました。

 

好きな題材を

アートなので好きな題材を用意して、それを真似して描いてみる。これが楽しい要素の一つです。ウェブサイトのデザインもいいですが、CSSアートであればもっと遊びに近い感覚でコーディングを勉強することができます。どうすればその形を作れるのかとか考えたり、わからなくてもググって調べて近い形にしてみたり。気軽に楽しくCSSを勉強できるのがCSSアートのいいところです。

 

アニメーションを加えて変化を与えてみる

CSSでアニメーションを加えることができますよね。僕は基本的にJavascriptでアニメーションを加えていましたが、CSSアートで更に理解を深めることができました。回転や横移動も簡単に実装できますし、イージングなどでアニメーションに一工夫加えるのもいいですね。

ポジショニングやアニメーション以外にもグラデーションやボックスシャドウなども頻繁に使うのでかなり練習になります。

頑張って大きな作品に挑戦してみる

最近CSSアート作ったのがOP-1というおしゃれなシンセサイザーです。各ボタンの印字もすべて細かくCSSで加えました。これを作るのには2日か3日掛かりました。たくさんのボタン、キーがあるのでグリッドの練習にもなると思って挑戦してみました。反省点としては各ブラウザで少し見た目が変わってしまうことです。ですが、かなり現物に近いリアルなCSSアートになったと思います。

See the Pen CSS-Art Teenage Engineering OP-1 Portable Synthesizer by Shunya (@shunyadezain) on CodePen.

どっちがCSSアートでつくったOP-1でしょうか?かなりリアルに再現できたと思っています。現物を買いたい方は下からどうぞ。値段が高すぎるからCSSで作ってみたところもありますね。

ポスターデザインもいい

ポスターデザインは普段からあまり作ったことがなくて挑戦してみたかったので、作ってみました。これはとてもシンプルで気に入っています。単純にグラデーションのある丸をくるくるさせて、正方形も回転させているだけです。

 

See the Pen CSS-ART SUNSET by Shunya (@shunyadezain) on CodePen.

もしCSSにまだ苦手意識がある方はCSSアートに挑戦してみてください。とても楽しいですし、かなり勉強になります。Codepenを使えば簡単にコーディング出来ますし、出来た作品をTwitterなどで紹介するとCodepenのトップページにあるPickupで紹介されるかもしれません。ちなみに僕の作った3つのCSSアートはすべて紹介されました。コード自体はキレイでなくても大丈夫です。僕のコードもキレイではないですしね。Codepenはかなりの確率でPickupに採用してくれるのでモチベーションもあがりますよ!

 

では、今回が初めてのコーディングの記事になりますが、これから少しずつ僕自身が学んだことをご紹介できたらと思います。

ではまた!

 

HTML&CSS おすすめ本