うさぎのWeb年賀状を作ろう

2016年の猿は、HTMLはdivひとつだけで実装することにもこだわっていました。スタイル付けのために構造的に不必要なタグをたくさん使うのは冗長で美しくないと思っていたんです。
そのため、divひとつとbefore要素、after要素の3つのパーツのみで描画できる方法を考えました。

限られたパーツで描画するために、猿はbox-shadowを使って多数の円を描きました。
ベースになっているのは右鼻の穴で、大きさ・色・位置・重なりを調整しながら丸いシャドウを加えていくことで、猿の顔になっています。

box-shadowはお手軽な方法ではありますが、シャドウはベースと同じ形にしかできないため、パーツの形が限られるという課題があります。猿も、顔の中身は全て円、湯に浸かっている体と波紋は全て楕円、と形を限定したデザインにしました。
今年うさぎを描画するときには、耳は円では描けないし、うさぎらしい形を目指すとbox-shadowでは厳しそうだな..と直感的に思いました。

また、猿の年賀状から7年経った今、私はすっかりタグがミニマムでないことへも抵抗が薄れています。最近のサイトはレイアウトやスタイルが複雑でとても凝っていますよね。業務の中でそうしたデザインをHTML/CSSで再現しているうちに、無理に少ないタグで実装しようとするより、わかりやすくメンテナンスしやすい構造で作ろうと心境が変化していきました。

そんなわけで、今回は無理なくうさぎらしい形を作るためにdivを2つ使って輪郭と顔の中身のパーツに分けて実装しました。
（もっと細かく分けることもできますが、制約があったほうが実装が面白いので最低限で。）