こんにちは。デザイナーのIです。突然ですが皆さん猫はお好きですか？
私はすきです。だいすきです。
残念ながら我が家のお猫様は私に見向きもせず、偉大なる母に全力で甘えていますがそれはそれ。
そんなツレナイところも全部ひっくるめて、私は猫が好きなのです。

そのようなわけで今回のデザイナーブログでは、『画像を使わずに』HTMLとCSSのみで猫を描いてみたいと思います！
（先に申告しておきますが、私には残念ながら絵心がありません。皆様におかれましては、画面から離れ、且つ細めた温かい目でご覧いただきますよう予めお願い申し上げます。）

結果

試行錯誤した結果、以下のような猫を描くことができました。

↑スクショですみません･･･。

詳しいコードが知りたい方は、こちら→https://www.indival.co.jp/2017/11/23/5737/

計HTML22行、CSS521行です。後半はほぼkeyframesでCSSが増えているので、描画させているものはその半分くらいだったりします（ちなみにSASSの行数は477行です)。アニメーションをさせると、行数が急に増えますね。

ざっくりとした解説

ソースコードを見ていただければお分かりいただけると思いますが、HTMLはすべてdivタグです。当たり前ですが、装飾はすべてCSSで行っています。
1つのパーツを細分化していけば、より複雑な絵を描けないことはないですが、今回は反対にHTMLの量を少なくする方向で挑戦してみました。

タグが1つでも、beforeとafterの疑似要素を使用すれば、要素を全部で3つにできます。また、box-shadowなどは制限がないので、単純に数を増やすという点では有効ですね。
なので、左右それぞれのパーツにdivタグを用意しなければならないということはありません。
今回であれば耳や目、髭などはそれぞれタグは1つずつで表現できています。耳は2色使用しなければいけないことを考えると、左右に用意しなければならないかと思ったのですが、1つのタグで表現できました（後述します）。

反対に、形が複雑になる足は左右で1つずつのタグ、尻尾は身体を境に左右で分割して描いています。

活躍したプロパティ

• before+after
• border-radius
• box-shadow

beforeとafterについては前述したとおりなので割愛します。

border-radius

今回のMVPと言っても過言ではない、border-radius。基本的には何もしなければただの四角になってしまうので、これを1つ指定するだけで表現の幅がぐっとひろがりますね。
私は今回はじめて角が丸くなる仕組みを知りました。border-radiusでは水平方向と垂直方向に半径を指定して、角丸のコーナーを指定することができます。
単純に、

と指定すると、それぞれの角は「水平方向と垂直方向の半径が等しく10pxの円」の1/4となります。

これを、

とすると、それぞれ水平方向と垂直方向の半径の値を指定することができます。
つまり、この場合の左上の角は「水平方向は半径20px、垂直方向は半径10pxの楕円」の1/4となります。

言葉ではわかりにくいので、以下の図を御覧ください。

仕組みがわかれば、使用しやすくなりますね。2方向を指定すれば、より滑らかな形を作りやすくなります。
今回ですと、後ろ足部分のカーブに使用しています。円だけではなく、楕円も作成することができます。
普段はなかなか使う機会はなさそうですが、いざという時に役に立つかもしれません。

box-shadow

box-shadowはご存知の通り、影を作るためのものです。
今回は応用して、以下の2つの使い方をしました。
(1)要素を増やす
(2)内側に色を塗る

(1)は先にちらりと触れました。一見beforeとafterでもできなくはないですが、より簡単に作成するという点ではbox-shadowに軍配が上がります。
疑似要素を使用すれば、要素を増やすことができますが、最大2つまでという点がネックなわけです。
その点、box-shadowであればある程度制限がありますが、簡単に量産させることができます。
今回ですと、髭の部分で使用しています。左右にbeforeとafterで1本ずつ配置し、それぞれ影を2本つけて3本に見せています。
3重線など、複数線を引きたい場合などに活躍しそうです。

(2)は耳部分で使用しています。影を内側に表示する「inset」を指定し、耳の黒い部分を塗っています。
正直、色を変えるために要素を重ねるのは面倒なので、この要素はかなり便利でした。
指定の仕方を変えれば、模様のある猫も簡単ですね。

終わりに

IE10～edge、chrome、safari、FFで確認した所、それぞれきちんと意図したとおりに表示されていたので、上出来ではないでしょうか。
みなさんもお好きな動物や形を是非画像を使わずに作ってみてください。普段使っているプロパティの、新たな使い方を発見できるかもしれません。

さて、最後は悲しきwebデザイナーの性、OldIE(ver7～9)確認をしてみようとおもいます。

・・・意外にも、IE9が健闘していますね。(動きませんが)耳以外崩れていないので及第点としましょう。
IE8・・・も姿を保ってはいますね。許せ、ます、うん。だがIE7オマエはダメだ。
ともあれ7～9はすでにサポートが終了しているブラウザです。
きれいさっぱり存在を忘れ、誰もが明るく楽しいコーディング生活を送れる日もすぐそこまで来ていることでしょう。

それでは今回はこのあたりで失礼します。
最後までお読み下さりありがとうございました！

執筆者プロフィール

インターンを経て、2015年に新卒で入社したデザイナー。クリエイティブデザイン推進室所属。
入社してからしばらくシングルクラス派だったが、最近マルチクラス派に落ち着いた。コーディングより命名に悩まされることのほうが多い。