1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけでドラえもんを描いてみた!

画像を一切使わずにCSS3だけでドラえもんを描いてみた!

doraemon_css3_001.png

昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました!

今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。

CSS3で作ったドラえもんの完成品!


doraemon_css3_002.png
CSS3 ドラえもん

最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対応してない部分があります。また、IEはCSS3には全く対応していないので構造が崩れてひどいことになります。

ちなみにGoogle ChromeはCSS3のアニメーションで目が動くおまけ付です!

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

各ブラウザの動作


doraemon_css3_003.png

ChromeとFirefoxはCSS3によく対応しておりさすがというべきか、ちゃんと同等に表示できています。Operaはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。

最後はIEですが、さすがは我らがIEさん!すばらしいオチをつけてくれましたね!
もうIEとかネタでしかないし、早く滅びればいいのにw

作っている途中にも感じましたが、CSS3はブラウザごとに結構挙動が違います。そんな中でもOperaのborder-radiusはちょっと特殊で、口を見てもらえば分かるんですが鋭くなっているんです。最初はもっと口が裂けていて、Operaだけ口裂けお化けみたいになっていたのでものすごく驚きました。

XHTMLの記述とW3Cについて


doraemon_css3_004.png

こんなむちゃくちゃな事をやるってことはhtmlの記述に問題がありそうな気がしますが、その点は全く問題なくXHTML 1.1で製作しています。もちろんW3C Markup Validatorも通りますし、ちゃんと
「This document was successfully checked as XHTML 1.1!」と表示されます。

→W3CでCSS3ドラえもんを確認する

今回のはコンテンツなしのdivタグレイアウトなので通って当たり前なのですが、とりあえずWeb標準で書いていることは確かです。

画像との容量の比較


今回はhtml+CSSで記述しましたが、本来画像ならばどれくらいの容量になるのか調べてみました。用いた画像はGoogle Chromeからスクリーンショットを撮って保存したものです。

この画像との比較を行う意味合いとしては、もともとの容量と画像との容量の差を測ることで、画像を使わずCSS3で描くことのメリットを無理やり探し出すというわけです。

GIF


doraemon_css3_005.gif

ファイルサイズ 33.5KB
画像の中では一番圧縮されていますが、画質がいまいちです。GIFの限界は256色なので画質が低下しており、さらにGIF特有のざらつきがちょっと現れています。

JPEG


doraemon_css3_006.jpg

ファイルサイズ 96.5 KB
こちらのJPEGはフルカラーで作成した場合。フルカラーのため画質は非常によく、きれいなのだが当然のことながら容量が大きくなりました。

PNG


doraemon_css3_007.png

ファイルサイズ 60.2KB
フルカラーでPNGを作成した場合。フルカラーで非常にきれいなのですが、やはり容量が大きくなりました。ファイルサイズと画質を考えると、バランス的にはPNGが画像では一番ですね。

html+CSSの場合


doraemon_css3_008.png

html 2.05KB
CSS 14.2KB

ファイルサイズ 2.05KB + 14.2KB = 16.25KB
html+CSSで作成した場合。さすがに画像を使っていないだけあってか、ファイルサイズは最も小さくなりました。読み込みの速度も速く非常にきれいに表示されます。
※htmlに関してはドラえもんの記述のみを抽出して計算しています。

やはり画像と比較するとファイルサイズはかなり小さくできるようです。画質的にはPNGと同等ですが、PNGの容量はソースコードの4倍ですからね。数が増えればこの差は読み込みに関しても非常に大きく影響を及ぼすことでしょう。

つまり、html+CSSで絵を描くメリットは存在するということです。しかしながら、それを圧縮するための労力と苦労がハンパないので、わざわざ画像を使わずhtml+CSSで書く必要性は皆無ですね。

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design


今回の作品も含め、CSSドラえもんなどの過去作品はPure CSS Designの方で公開中です!興味のある人はぜひご覧ください。近々、もう一つのCSS3作品を公開予定です。

・IE9に対応したCSS3 Draemon Ver2を公開!
・画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
・画像を一切使わずにCSS3だけでとあるぐぬぬの禁書目録を描いてみた!
・IE10,Opera11に対応したCSS3 Draemon Ver3を公開!

今回の個人的感想




今回のCSS3ドラえもんを作ったのは、この馬鹿な企画を通してCSS3のすごさと今後の可能性を皆さんに知っていただけたらと思って実行しました。ぶっちゃけますが、こんなことをするのは明らかに一部の馬鹿か変態のする行為です。

なんせ画像ならimgで貼るだけでできることをわざわざCSSのコードだけで600行近く書くなんて頭がおかしいとしか思えない。作った本人が言うのもあれですが、余程の暇人でない限りCSS3で絵を描くのは人には薦めません。

最初は顔だけの予定でしたのでもっとソースコードが短かったんですが、胴体を加えて影をつけたり細部にこだわり始めたらとまらなくなって、いつの間にか600行にもなっていました。CSSのプロとかならもっと短く書けるかもしれませんが、一介の素人たる私が書くとこんな感じになります。

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

追記:IE9に対応したCSS3 Draemon Ver2を公開!
追記2:画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!
プロフィールアイコン

パソコンやスマホなどのガジェットに興味があり、大学で情報工学の勉強してシステムエンジニアに。ブログ歴は15年以上。ITの専門的な知識はそこそこあり、国家資格の情報処理技術者試験のスキルレベル4「情報セキュリティスペシャリスト」や「ネットワークスペシャリスト」などを取得。

Related article

COMMENT TO THIS ENTRY

すごいっすね

8102

すばらしいです!
変態ではなくて、天才ですね。
CSS3でラクに描画できるソフトって、可能性ないんでしょうか?

8103

こいつ・・・動くぞ!

8104

CSS3のすばらしさがとても伝わりました!

8105

すごいですね~
IEもすごいですがwww

これならIEユーザーへ視覚的にいろいろと訴えられますねw

8106

一番出来の悪いIEが資格的なweb標準という矛盾を痛烈に感じました。CSS3前途多難ですね。

8107

まあ、ほんとにナチュラルに著作権侵害する人ですねえ。。。。
小学館はうるさいよ?

8108

これは本当にすごいですね!

8109

sleipnirを使っていますが、悲しくなりました・・・

8110

今度はアンパンマンでお願いします。。

8111

CSS3ってすごいですね
IEには吹いた
試しにIEで見てみたら目の部分が完全に崩れてた
IE早くなくなればいいのに

8113

LunaのTridentで見たらすごいことにw

Geckoはまあまあだけど、口がかわいいことにw
それに、右腕がなぜか色が違うww

WebKitは影のグラデーションがおかしいけど、普通。
目も動くしw

うーん。Google Chrome 強いなw

8114

Safariでの動作確認をしてないのは何故?

8116

Safari4.0.5でもChromeと同じように表示されるよ
そのぐらい、自分で調べれば?
CSS3対応だって、ブラウザの制作元が表記しているなら
それで済む話だろ。
動作確認する義務は、ここの管理人には無いよ。

8117

すごいですね...CSS3。
でも、何でドラえもんなんですかね?w
IEはもう消えれば良いのにw
「各ブラウザの動作」のIE見て吹きましたw

初コメです。
下のナビゲーションとかカッコイイですね。
とても気に入りました^^
あと、COMMENT FORMに「プレビュー」設置したら良いと思います。

8118

凄いです♪
目が動くんですね、可愛らしい(*´∀`*)

私はMac Safariで拝見しましたが、完璧なドラちゃんでした♪

8119

作成お疲れ様です。
IEは確かにネタでしかないwww

8120

safariも綺麗に表示されますよw

8122

これを見てたらAcid2を思い出したわ。

8123

IE9で治ってたらいいんですけどね。
いまはfirefox使ってます。

8124

-moz-border-radiusのような、標準によく似た(そして、他のプロパティと組み合わせるととんでもない表示になってしまう)独自拡張を持っていることを、CSS3に対応って言ってしまうのはいかがなものかと。

8126

興味深い企画でした。 皆さんおっしゃっているように、IEは良いネタになりますね。

8128

svgが流行らないのは何でだろう?

8129

すげー

8130

ここまでできるようになってるんですね。

8131

IEはネタとして、これからも残って欲しいw

8133

Safari でも無事に表示され、目玉が動きます。

8134

何のために!?
というところが感動しました。
しかしIE8のカクカクぶり…
ほんと、滅びればいいのに!!

8135

ネタとしては面白いけど実際問題
使ってる人口が多すぎて笑えないw

8136

IE6だと更にカオスなドラえもんが見られますw

8137

はじめはCSS3だけでどうやって書いてるの?って疑問でしたが
IEの表示を見てやっとCSS3が理解できました。

8138

windows以外のOSだとどのように見えるのだろう・・・。

8139

SVG使えよ

8140

IE8をわざわざ互換モードにして表示乙。
IE8でもちゃんと表示されるよーんwww

8142

>最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので
なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。本第には関係のない所で損をしてるよ。
でも内容自体は評価しますけどね。

8144

iPhone(iPod Touch)で確認してみましたが、顔と足だけ真四角でした。でもIE8より全然まともです。IE8は精進が必要ですね。

8146

>なんでこういう、今の&原作ドラえもんファンの神経を逆なでするような事書くかね。

自分は昔の方が好きだからそっちをイメージしてますって言ってるだけなのに、逆撫でしてるとかどうかしてるな。
今のドラえもんを中傷とかしてるわけじゃないんだから落ち着けよ。

8147

特定のブラウザを叩いている人も滅びればいいよ。
もちろん不特定でも駄目だけどね^^

8149

ソースはソース!!
どうやって書いてるの?

8150

Operaは正式な仕様にならないと真面目に対応しないからなー
だが、そこが良い!

8152

素晴らしい記事内容ですけど…
コレ、小学館から訴えられたり、警告されたりしないのですかねえ…
これがもしハム太郎の絵だったら、似た絵を独自に描いただけでも警告されるらしいですが。
www.dfnt.net/t/photo/column/use_images.shtml


IEで閲覧するとドラに見えない謎の何かになるからこの場合はセーフ、
といった線引きの有無が巷にあるのかどうかも気になります。
仮にそういうアレが有るとしたら、
あえてcssで描くことで何かしらアレなソレをコレして回避することに利用できるという展開もあるのでしょうね。

8153

ステキです。こういう時こそ、いいね!ボタン欲しいです。

8154

IEへのバッシングひどすぎwww

8156

WindowsのIE及びSafariでは確認しましたがMacでも正常に表示されていました。でも私が使っているプラグインがWin IEでしか機能しないため普段は Win IE派な私です。

8157

IEがこんなに不甲斐ないなんて知らなかった!! IEもう使わないw

8159

IE9 では両肩が崩れて、グラデーションと影がなくなって表示されるようです。
それ以外は大丈夫そうですね。
まだ Platform Preview 版の IE9 なので正式リリース時にはどうなるかわかりませんが。

8160

rasaitoの再来や~

8161

IE6だと原型のこらないです(笑)

8162

おれクロームだが左うざい

8163

結構、影響力強そうなサイトなのでまじめに。

CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。
それにたとえば縦書きとなんかは IE だけしかサポートしてないし、粗を見つければいくらでも出てくる。(最近 Webkit がルビ対応したけど)

ま、結局目立つもんを抑えて、無知な世間にアピールできるかどうかで評価は決まっちゃうんだけどね。

8164

面白いですね。
iphoneからだとこうなりました
http://beebee2see.appspot.com/i/agpiZWViZWUyc2VlchULEgxJbWFnZUFuZFRleHQYvpaNAQw.jpg

8165

Sleipnir でも角ばるけど、ブラウザとしては普段使いやすいし、
こんなん見れなくても困りませんけどね(笑)

8169

容量比較ですが、ベクターとラスターを一緒にするのはズレてますね。
JPGやらPNGやらと比較するなら、全ピクセルを1x1のdivで表現するような形式でないと。

8171

面白いのはわかるけど、滅びれば良いのにとか言ってる人たちが気持ち悪い。誰と戦ってるんだろう。

8172

>CSS3 はまだ正式勧告されてないし、その点に関して IE は悪くない。

正式に採用されて、IE9で対応したとしてもXPはIE9使えない件・・・

8173

ブラウザなんて標準のIEで十分じゃないの?
画像で重いのを感じるスペックのPCなんて今は、誰も使ってないよ

8174

IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
嫌いなのに必至に批判する為にIEと口にする。
いつの時代も不思議な人たちは居るもので。

8181

「-webkit-*」や「-moz-*」を使って、ChromeやFireFoxに無理矢理対応するのはかなりずるくありませんか?

それできちんとドラえもんが表示されたところで『CSS3によく対応してる』とは言えないと思いますが。

8183

やたらIEを擁護したがる人の意図が分からない。マイクロソフトの工作員かなんかなの?結局firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。

「-webkit-*」や「-moz-*」はずるいとか言ってる人もいますが、それで表示できているならまだいいんじゃない?それすらできないブラウザがいるのに。正式にCSS3が勧告されればその独自拡張から接頭辞を外すんだしさ。

8184

> firefoxやchromeのように先行実装すらしていないブラウザがCSS3が勧告されてすぐに対応できるとは到底思えない。

IE8は先行実装してますよ。
-webkit-*や-moz-*を入れるなら、-ms-*入れて、
IE用のCSS3も呼び出すべきだろ


8189

>IE8は先行実装してますよ。
>-webkit-*や-moz-*を入れるなら、-ms-*入れて、
>IE用のCSS3も呼び出すべきだろ

この人何も知らないんじゃないのか?
IE8がCSS3に対応していないのは常識だろ。
-ms-ってつけてもradiusやgradientやshadowも全く動かんし。

自分の勘違いでサイトが滅びればいいとかどんだけ~。

8191

>>IE8は先行実装してますよ。
そんな訳無いだろw
IE8にどんな妄想抱いてるんだこいつは。

できるなら実際にIE8で丸いドラえもん書いてこいよw

8192

「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。

これは、各ブラウザの独自実装であってCSS3じゃ無いでしょ。

8193

>>「CSS3だけで」って言ってるのに、「-webkit-*」や「-moz-*」を使ってるのがおかしい。

じゃあ他のCSS3の記事を紹介しているサイトにでも行って
「これは接頭辞がついているからCSS3じゃない、おかしい」
と、馬鹿みたいに騒いでくればいいんじゃない?

どこのサイトのCSSS3の記事だってほとんど接頭辞ついてるし、
世間的にはそれがCSS3として扱われている。

8194

ベクターでいいならSVGのほうがいいのでは?
軽いし。拡大縮小思いのまま。

8195

なぁ、作者は今の時点のCSS3で何が出来るか書いているだけだろう?
今まではCSSと言えど直線を描くまでがデフォルトだった。
「今後はこういう事も出来るようになるよ」って、ただそれだけだろう?もうちょっと穏やかにみようや。
IEに関しては現状できなくてもIE9からの実装を目指しているんだし、あくまで【現段階】でこうなるって話じゃね?

8196

まず、CSS3 ってのはモジュール化されてるんだから、「CSS3 に対応」って発言自体あまり正しくない。
本当に CSS3 の全部のモジュールに対応してるならいいけどさ。

このドラえもんがカクカクなのは、CSS Backgrounds and Borders モジュールの「border-radius」系に対応してるかどうかって局部的な話だろ。
もともと、Mozilla が先行実装して、そのあとに仕様に取り込まれることになりそうなものなんだから、この件で IE を責めるのは馬鹿な気がするな。

8198

コメ欄見てると、世の中どれだけ馬鹿が多いかわかるな。
SVGがどうとか、容量比較でベクターとラスターを一緒にするのはズレてるとか、どんだけ読解力ないんだよ。はてブのコメントの方がよっぽどまとも。

8199

著作権うんぬん言ってるお利口バカ、
接頭辞がついてるからCSS3ではない原理主義者のバカ
SVGと比べろとか、知識ひけらかしバカ

世の中バカだらけだな、良いもの見させてもらったよ

8201

凄い!の一言です!

8222

スゲェ
正直、アンタ凄いよ!

8223

おお~
感動してしまいました。
趣味で絵に携わっていますが、
CSSでここまで可能とは。

おめでとう!

8226

長いものに巻かれるのは嫌いではないですけど
よい技術が世に出にくくなっているのならちょっと
考えちゃいますね。
ただ、私初心者な物でドラちゃんが綺麗に表示されると
パソコンを使う人たちにどういう恩恵が生まれるのかが
よくわからなくて...
初心者をうならせるほどの破壊力がないと
歴史の更新はゆるくなっちゃうんだろうなぁ、
私みたいな初心者のせいで。

8277

ここにswfものせて欲しかった。おそらくCSS3と同様のサイズになったと思いますよ。

8288

「-webkit-*」や「-moz-*」が認められるのならIE用にexpressionやbehaviorやfilterをつかうのもOKですよね?

8386

     /: : : : : __: :/: : ::/: : ://: : :/l::|: : :i: :l: : :ヽ: : :丶: : 丶ヾ    ___
     /;,, : : : //::/: : 7l,;:≠-::/: : / .l::|: : :l: :|;,,;!: : :!l: : :i: : : :|: : ::、  /     ヽ
    /ヽヽ: ://: :!:,X~::|: /;,,;,/: :/  リ!: ::/ノ  l`ヽl !: : |: : : :l: :l: リ / そ そ お \
   /: : ヽヾ/: : l/::l |/|||llllヾ,、  / |: :/ , -==、 l\:::|: : : :|i: | /  う う  前  |
.   /: : : //ヾ ; :|!: イ、||ll|||||::||    ノノ  イ|||||||ヾ、 |: ::|!: : イ: ::|/   な 思 が
   /: : ://: : :ヽソ::ヽl |{ i||ll"ン    ´   i| l|||l"l `|: /|: : /'!/l    ん う
 ∠: : : ~: : : : : : : :丶ゝ-―-      ,  ー=z_ソ   |/ ハメ;, :: ::|.   だ ん
   i|::ハ: : : : : : : : : : : 、ヘヘヘヘ     、  ヘヘヘヘヘ /: : : : : \,|.   ろ な
   |!l |: : : : : : : : :、: ::\    、-―-,      / : : :丶;,,;,:ミヽ   う  ら
     丶: :ハ、lヽ: :ヽ: : ::\__  `~ "      /: : ト; lヽ)   ゝ
       レ `| `、l`、>=ニ´        ,  _´ : :} `   /
         ,,、r"^~´"''''"t-`r、 _  -、 ´ヽノ \ノ   /    お ・
       ,;'~  _r-- 、__     ~f、_>'、_         |  で  前 ・
      f~  ,;"     ~"t___    ミ、 ^'t         |  は  ん ・
      ,"  ,~         ヾ~'-、__ ミ_ξ丶     |  な  中 ・
     ;'  ,イ ..          ヽ_   ヾ、0ヽ丶    l         /
     ( ;":: |: :: ..          .`,   ヾ 丶 !    \____/
     ;;;; :: 入:: :: ::      l`ー-、   )l   ヾ 丶
     "~、ソ:: :い:: :     \_  ノ ,    ヾ 丶

8387

反論できないからAAで誤魔化しているのですね、わかります。 

8388

ファイルサイズが小さいのは素晴らしいですけど、表示する際のレンダリングはやはりCPUとメモリを喰うのでしょう?

8396

すごいですね!!
ここまでできるなんて、素晴らしいです!!
IE…見て笑いました。早く滅びて欲しいです。

8458

CSSの本気ってすごい・・・乙です

8460

こんなこっといいな~♪でっきたっらいいな~♪

8470

今IE6使ってるが、これ見てもう終わってることを理解したww
chromeいいなーとか思うけどやっぱりIE6やめられねぇ

8581

感動しました。
本当にIEなくなってほしいです。

8603

>-とりあえず互換対策までしているようなので-
>IE系で支障の出る仕様を好む人はIEについて発言しない方が良いと思う。
>嫌いなのに必至に批判する為にIEと口にする。
>いつの時代も不思議な人たちは居るもので。

Webサイト制作者側的に手間がかかって困るんだよ。
無駄に画像とかも使いたくないし、Javascriptをいちいち使って多様したくないし。

滅びるかは別として、早く他のブラウザ同等の性能くらいにはなって欲しい。

8642

http://jqueryui.com/themeroller/
このページをいろいろなブラウザで見てみると
IEがかなりきついことがわかる
(高速でさまざまなブラウザに対応したJavaScriptライブラリ)

アニメーションになってない

対応してない機能が多いと
スクリプト側でやる処理も増えて
重いの不の連鎖が起きる

悪いことはいわんからIEやてめちゃんとしたブラウザつかってけれ

8962

ie9ではドラえもんの腕だけカクカクになるぞ!!。

9014

ie5.5で見るとすごいことになる!!

9015

       ヾシヾ⌒シヾ-‐ヽ
     ー丿          ヾヽ
    シ              ,,,α
  ξ          ゞシヾ"  ヽ         ,,,....,,,、、...,,,....,,
  !           彡       ヽ:::     ..i'´.        ヾ'''、、、,,,
   シ          彡       ,j:::   ..,/ヾ,            ヽ
   !シ         ,,彡       :シ  ,;''''   ヾ   ,___       ヽ
    j  ,-‐-、   i    ッ三ミ:;j i、'  j-‐    `, , ‐'' = )       ヽ:
     し { !⌒- ヽ! j     ‐-‐'j ヽ、...'       '  .,_//,        !;::
     ヾ丶`-'  ! !        {__,__,!'         -‐' ヾ       ノ:::
      ,ヾ  '  、       ,'  ....,)        ::     ヽ     ノ::::::
 _...-‐‐'''´ :::            ´::(      _... ´       ヽ    /:::::::
        ::              ! .... -‐´           ヽ   /:::::     __,....,,-‐-、
 ::::.       ヽ   !......:-‐ー、 ,,,,,,;;;ヽ __ ...-‐、     ::     `ヽ-、___,--/'´ ,、   , `ヽ、
            !:::,´´´´´:::::`"""´:::::::::::::::;;;;;;;;ヽ、    ;::           ヽ-‐' !  ./   iヽ
                         ::::::::::::;;;;;;;;i   ;::   ;      __,,,    `、丿 ./  )
           ::::             ´´´::::-´::ヽ:::  l::  ;    -‐´  ..,;;;;    ヽノ、  /
           ::::              /´      !::  j::  

9089

CSS習ってまだ2週間です
以外に簡単にドラえもんでができました
ドラえもんの体もできました。
あとクッキーていうやつもCSS3でできました。
クッキーは自身があります得に目がよくできました
モンスターボールもCSS3でできました。
本とCSS3ってすごいですよね。
何でもできますね。

9369

IE9ではFirefoxと同じような表示になりました。

9383

CSS3だけで描画とはすごい

しかしまあさすがIE8!これはひどい

ちなみにIE9ではOperaと同じ表示になりました。
ChromeとFirefoxは微妙に違いますがよく表示されています。

IE8のオチ

9628

新たな可能性がどんどん広がっていって見ているだけでも非常に楽しいです。

9843

IEでもちゃんと表示されるじゃないか!
いいかげんにしろ!
(笑)

10190

ドラえもんCSS3がバリデーションエラー起きてますよヽ(;▽;)ノ

FC2の解析のタグで <div align="right"> ダメって言われているので <div style="text-align: right;> にすれば解決だとおもいますが(⌒-⌒; )

10414

IE11だと火狐と似たような表示になる(但し眼は動かない模様...)
edgeだとIE11とほぼ同じ表示で眼は動くのだが...縦に動くと横に灰色の線が入る...参考までに↓
https://twitter.com/yorozuya61377/status/996764981659025408

10786