こんにちは、株式会社bitFlyerのフロントエンド開発部所属の上村です。
bitFlyer Advent Calendar 2022の16日目です。本日は「CSS」のトピックをお送りします。
ある日Twitterでこんなツイートを見かけました。
https://twitter.com/asyrafhussin4/status/1561981294984065024?s=20&t=R_IKD97-SeBKpeQE5tEPsQ
この方はcssだけで人物イラストを作っているようで、完成度が高く、今までこう言ったことをしたことがなかったのでかなり面白いと思いました。
普段こういった複雑なイラストは画像で済ませることがほとんどですが、意外とこういったイラストもcssで作れたりします。
手間はかかるかもしれませんが、cssだけでイラストを作る機会はほとんどなかったですし、ツイートを見て「楽しそう！私もやってみようかな」と好奇心がくすぐられました。
というわけで作ってみます！
主にキーとなるCSSプロパティは
border-radius
border
position
top,right,bottom,left
くらいでしょうか。
一つの要素を上記のプロパティで丸や三角などに整形し、それをひたすらスタンプのようにペタペタ貼っていきます。
やってみようと思ってみたは良いものの何を書こうか悩みました。
ツイートにあるような人物像は難易度が高そう、顔のバランスがズレたら微妙な感じになりそうなので断念しました。
何にしようかなと悩んでいたところ、ちょうど私の好きなテレビ番組ベスト5に入る「音のソノリティ」をやっているのをみて決めました。
「日本らしい絶景を書いてみよう」
日本らしいというと富士山が思い浮かびます。
富士山が映る絶景は色々みますが、よく目にするのは桜の中に富士山が写るスポットです。
富士山と四季を感じられる木々のコンビが良さそうなので、この風景を描いてみます！
憶測で大体どれくらいのコード量が必要なのか気になったので、ツイートのコードを見ると10000万行近い、、、、。
人物の絵を描くだけでこの行数、、、。
細かい部分も再現されていて完成度が高いですが、気軽にかける量ではないです。
景色になったらどのくらいになるんじゃい、と億劫になりつつ完成を楽しみに描き始めます。
ワールドカップが盛り上がる裏でとあるエンジニアの気合で作るcss絶景の戦いが始まります。
1. 富士山の土台を作成
これは黒の長方形を作って白の四角形で上塗りすることで山それっぽいシルエットを作りました。
頂上の凸凹は小さな要素で調整してます。
before&afterも使うことでHTMLの要素数を節約することができそうなので他の部分も同じ様にやっていきます。
2. 色味を付けていく
最初は白黒で作る予定でしたが、山頂の雪が白なので、色味がないと少し都合が悪いことがわかりました。
だったら色味もつけてやるわい！！
と少しやけくそで色味もつける方針に決定。
これだけでもそれっぽくなりました。
寝起きで聞かれてもこれは富士山と答えられます。
ですが、まだまだ！
本物の富士山はこんなカクカクでのっぺりした見た目はしてません。
ゴツゴツ感を出すために少し色味を足していきます。
3. よりリアルな見た目に
結構見た目が富士山に近くなりました。
鋭利なところはborder-radiusやborderで図形を調整し、色も変えることで日光に当たっている部分とそうでない部分を表現しました。
もっと細かい見た目にしたいですが、他の部分が早く作って欲しいと言っているので一旦次に進みます！（ただしんどくなっただけ)
4. 小さい山を追加
富士山の中盤らへんに一つ小さい山のようなものが見えるので一緒に描いていきます。
これも富士山と同じ要領で四角を作って三角や丸で上書きするやり方で進めました。
しかし、この山の影はなぜか富士山みたいにうまくできません。
難しい！色々試して一番しっくりきたのがこれです。
端は木々で隠れるので次にいきましょう。
5. 木も追加
次は富士山を囲む木々を追加していきます。
木は太い幹から細い枝までありますが、今回は比較太い幹だけを描きます。
こんな感じでしょうか。
細い長方形やborder-radiusを適用させた先端が丸い要素をつなげることで枝っぽくなります。
この時点では少し冬の風景みたいな感じですね。
最後は葉の部分を追加していきます。
参考にした写真は桜ですが、今はどちらかというと紅葉の季節なので紅葉に変えてしまいましょう！
世界の創造主になったような気分で理想の絶景に変えていきます。
紅葉の葉は星のようにいくつかの方向へツンツンしていて少し複雑なので、これを一つの要素だけで表すことはできません。
なので親のdiv要素を作って、その中に細かい部分を表現する子要素を格納して作ります。
一体何枚作れば良いいんだと想像しただけで気が遠くなりそうですが、css絶景創造主はこんなことではへこたれません。
埋め尽くされたら綺麗になりそうですね。
ひたすら埋めていきます。
枝一本に紅葉を咲かせたところで気付きました。
これは大変なことになるぞ！！全然埋まらない！
思っていたよりも細かくて一枚に時間がかかります。
これでは冬の落葉した木々になってしまう、、
そう焦りを感じていたところ、「別に一枚一枚描いていく必要ないよね」と心のリトル創造主が囁いてくれました。
確かに、
とここからは他の枝でも使えそうな配置のグループをいくつか作って、使いまわしていくことにしました。
こうするだけで一回の作業で何十枚と一気に于めることができるので、かなり楽になりました。
真っ赤の中にも何枚かはまだ黄色のままの葉があるよね！と黄色のワンポイントを入れられるまでの余裕さも生まれます。
大まかな空間を紅葉で埋めていくにつれて、ローカルの読み込みが遅くなってきました。
「え、そんなに重い？」
と疑問に思い現時点でのコード行数を数えたところ約7万行。
軽量化していないためか、気付いたらすごい行数になっていました。
しかし、CSS絶景作りももう少しで終わるのでラストスパートをかけます。
6. 仕上げていく
最後に足りない部分を埋めたり、より細かく表現できるように修正します。
心なしか頭の中でサライが流れてきました。
ここは仕上げなので一箇所一箇所丁寧に描いていきます。
そしてついに、完成しました！
達成感ともうやらないという決意が同時に押し寄せてきます。
色味も綺麗にでました！白黒ではなく、色をつけて良かったです。
もっと時間と手間をかければ絵画のような完成度にすることもできそうです。
皆さんはいかがでしょうか。
数種類のプロパティを活用するだけで、どんどん作れるので自分もやってみたい！と感じた方はぜひチャレンジしてみてください。
また、弊社bitFlyerではフロントエンドエンジニアを募集 しています。ご興味のある方はぜひご応募ください！
次回もお楽しみに！