画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた！

CSSでキュウべえ(FULL)を描いてみた - jsdo.it

つくった作品を紹介する前に、ここ最近のCSSでのすごい作品を一つ紹介したいと思います。かなり話題になっていたので知っている人も多いと思いますが、CSSでキュウべえを描いた人がいました。CSSドラえもんに様にCSSで絵を描く変態は私だけだと思っていましたが、日本にもこんな変態・・・じゃなくてすごいCSS職人がいるとは！実際に見てその完成度の高さに驚きました。

こりゃ負けてられないなーというわけで、以前から温めていたCSS作品を公開します。



今回作成したのは、とある魔術の禁書目録(インデックス)のぐぬぬ画像を参考にして作った「とあるぐぬぬの禁書目録」です。上に表示されているものが参考にした画像です。ぐぬぬ画像を選択した理由は、ぐぬぬ画像は数え切れないくらい沢山の種類があり、かつ基本が似ているので、一つ作れば他のキャラに応用して大量生産できるかなと思ったからです。

ぐぬぬを知らない人もいるかと思うので一応説明を載せておきます。これらの画像は全て画像職人さんが作っていると言うんだからすごいですね。

ぐぬぬとは、アナ・コッポラ（苺ましまろ）のアップ画像を様々なキャラクターに改造した、コラ画像シリーズである。
引用：ニコニコ大百科 - ぐぬぬ

もちろん、今回も使うものはHTML+CSSだけで一切の画像やjavascriptは使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

CSS3で作った「とあるぐぬぬの禁書目録」の完成品！

とあるぐぬぬの禁書目録 Demo

とあるぐぬぬの禁書目録 Demo閲覧時の注意事項としてはGoogle ChromeまたはSafariで閲覧してください。Google Chrome,Safari以外のブラウザではかなり崩れます。Google ChromeまたはSafari以外のブラウザではアニメーションが動きません。また、スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。

今まではブラウザの互換性を重視して、Chromeやfirefoxでは完全に見れるように作ってきましたが、今回のは互換性を維持できませんでした。まあ実際にところは、border-radiusの動作がブラウザごとに異なるので、Chromeを基本として作成していたレイアウトを他のブラウザで再現できなかったというのが正しいです。この点はブラウザ間で挙動に差があるborder-radiusよりもborder-radius＋box-shadowを用いるべきでした。次回があればこの経験を活かしたいと思います。
話がそれましたが、そんなこんなで今回はChrome or Safari限定になってしまいます。

Google chromeを入れていない方はぜひこの機会に試してみてください。
→Google Chromeのダウンロード



もちろん、画像は一切使っていないので「とある魔術の禁書目録」のロゴも画像を使っていません。ただし、ロゴを正しく表示するには小塚明朝 Pro Bや小塚明朝 Pro Hといったフォントが必要です。

画像ではない証拠はhtmlとCSSのソースを確認してもらえば分かると思います。まあ、画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。。。

各ブラウザの動作

今回はwebkitを使っているChrome,Safariだけまともで、Firefox、Opera、IE9はそこそこ見れるレベル、IE8以下は盛大に崩れてます。IE7にいたってはあなた誰ですか？というレベルです。さすがのオチ担当ですが、今回は他のブラウザも崩れているのでちょっと微妙です。やはり、いつもの「他のブラウザは完璧なのにIEだけ崩れている」という形がおもしろいのに、今回はそれが出来なかったのでちょっと悔しいです。

Chromeで見た際のクオリティは自分で言うのもあれですが、かなり高いです。このページをChromeで開いたとして、はたして何人が画像を使っていないと気がつくかというレベルだと思います。その他のブラウザではバレバレだけど・・・。

今回もChrome,Safariだけアニメーションを導入してます。画像よりもぐぬぬ感を表現するために、目がうるうるするようにしています。後は顔の上にマウスを乗っけると風が吹いて髪の毛がなびきます(これが思いのほか面倒だった)。毎度のことですが、アニメーションを入れないなら画像で十分だろとか言われるので、今回も局所的に導入しています。

Pure CSS Design

Pure css design

今回の作品も含め、CSSドラえもんなどの過去作品はPure CSS Designの方で公開中です！興味のある人はぜひご覧ください。たまに重い時があるので、そういうときは時間を置いてからアクセスしてください。他の作品の記事は下からどうぞ。

関連作品

とある科学の風力発電 Demo

今回の「とあるぐぬぬの禁書目録」の関連作品としては、画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた！があります。こちらはCSSによるアニメーションに重点を置いたもので、Google Chrome,Safari,Firefox4,Opera11で羽が回転します。（Operaとfirefox4は羽の上にマウスを乗っけると動き出します。）

→IE9に対応したCSS3 Draemon Ver2を公開！
→画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた！

今回の個人的感想

今回のCSSの行数はドラえもんの5倍の3500行を超えました・・・(詰めればもう少し減るけど)。今回はアニメーションもたくさん取り入れたせいもあるかもしれませんが、どんなサイトつくってんのというレベルの行数です。なんせこのブログですら2000行いかないくらいなので、この絵を完成させるのに要するCSSの量ははっきり言って割に合わない。しかも、最後のブラウザ間の調整段階で今回は他ブラウザとの互換性がない事に気がつくという由々しき事態まであったのだから本当にひどい。これのせいでテンションがた落ちでした。

記事の最初の方でぐぬぬなら一つ作れば他のキャラで大量生産ができそうという件がありましたが、ぶっちゃけ今はそんな気は一切起きないです。時間がたてば作る可能性はあるかもしれないが、はっきり言って需要がなさそうだし。誰か気が向いたらこれを応用して他のキャラを作ってみてくれ。
そんな暇人・・・じゃなくて勇者は大歓迎だ。

最後に・・・

このCSSシリーズの記事を公開すると、毎度言われるのが「SVGやCanvas使えば？」というコメントです。「そうじゃないんだ。あえてCSSで作るからおもしろいんだ！」と、声を大にして言いたい。CSSで作る意味はあるのかと問われれば、はっきり「No」と答えられる。ただ、純粋にCSSで絵を描くことの限界にチャレンジしたかった。今回の作品を作ったのはそれだけの理由です。

これを超えるCSSで絵を描く作品があったら、ぜひコメントで教えて欲しい。世界は広いからすごい作品を作る人は沢山いるだろう。そういうすごい作品をもっと見てみたい。

毎度言いますが、元々CSSはHTMLを装飾するためのもので、本来はこういった使い方をするものではないです。しかし、この絵を見れば分かるとおりCSS3によってデザインの幅が広がったということは間違いない事実です。今回の技術デモでCSSでの新たなアイデアや知見が広がればと考えています。

今回の企画を通してCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。