1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずCSSで描かれた「けいおん!」の澪がマジですごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

Xボーダーを使って日本に発送できない海外サイトの商品を購入する方法!

以前に、AmazonUSで日本に発送できない商品も日本語で簡単に買える「Xボーダー」がすごい便利!という記事で紹介した「Xボーダー」ですが、実はこのXボーダーは海外のAmazo...

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

送料込み28円!?スマホ三脚固定ホルダー(ブラケット)を買ってみた!

今回はスマートフォンを三脚固定するためのホルダーの三脚ブラケットがAmazonで送料込み28円という超激安価格で販売されていたので一つ購入してみました。そこで今回はスマ...

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

Windows標準搭載の仮想デスクトップを便利に拡張できるソフト「Sylphyhorn」!

今回紹介するのはWindows10の仮想デスクトップの機能を更に便利に拡張できるソフトの「Sylphyhorn」を紹介したいと思います。Windows10から標準で搭載されている仮想デスク...

Amazonの初売り!おまかせ福袋や見える福袋などの販売を1月2日18時よりスタート!

Amazonの初売り!おまかせ福袋や見える福袋などの販売を1月2日18時よりスタート!

今年のAmazonの初売りは2019年1月2日(水)~18時から1月4日(金)23時59分まで開催されます。「Amazonの初売り」では、商品が届くまでお楽しみの「おまかせ福袋」に加えて...

あけましておめでとうございます!

あけましておめでとうございます!

新年あけましておめでとうございます!裏技shop DDは今年でサイト開設から14年目に突入します!気がつけばこんなに長く続けていることは他にないくらい長い時間が経ってし...

管理人が選ぶ2018年のShopDDの記事ベスト10!

管理人が選ぶ2018年のShopDDの記事ベスト10!

今年も残り少なくなってきましたが皆さんいかがお過ごしでしょうか?!本日は大晦日ということで、2018年の記事を振り返ってみるという意味合いも込めて管理人が選ぶ2017年...

「YouTube Premium」と「YouTube Music Premium」の違いをまとめました!

「YouTube Premium」と「YouTube Music Premium」の違いをまとめました!

2018年11月からスタートしたYouTubeの新サービスのプラン「YouTube Premium」と「YouTube Music Premium」ですが、名前が似ててよくわかりにくかったので違いについて調べ...

12製品総額600ドルの有償ソフトのライセンスキーを無料配布するキャンペーンを実施中!

12製品総額600ドルの有償ソフトのライセンスキーを無料配布するキャンペーンを実施中!

WonderFox Soft, Inc.は同社製品であるWonderFox HD動画変換プロを含む合計9製品のライセンスキーを無料配布するWonderFox 2018 Xmas Carnival(ワンダーフォックス 2018メ...

Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

Painterなどが最大91%OFFのVEGAS&Corel全製品値下げキャンペーンが開催中!

現在ソースネクストの公式サイトでは、PaintShop、WinDVD、Painter、VideoStudio、CorelDRAWなどのCorel全製品とVEGAS Pro、ACID Pro、SOUND FORGE、SPECTRALAYERSなどのVE...

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

YouTubeでHTTP Error 400が出てサイトにアクセスできない時の解決方法!

今回はYouTubeで出くわしたHTTP Error 400(Bad Request)が出て、YouTubeにアクセスできなくなってしまった時の解決方法を紹介したいと思います。この現象が発生してしまう...

NetaGear RSS News

Now Loading

Article

画像を一切使わずCSSで描かれた「けいおん!」の澪がマジですごい!

 html+CSS+javascript 
css3_k-on_mio_000.png

今回紹介するのは、画像を一切使わずにhtml+CSSだけで「けいおん!」の秋山 澪を描いた技術デモ作品です。実際に作品を見てもらえば分かると思いますが、ものすごくクオリティが高くて普通に画像にしか見えないレベルです。久しぶりにCSSで絵を描く作品で驚かされたので、これはぜひ紹介せねばと思い記事を書きました。

「けいおん!」(K-ON!)は、軽音楽部で4人の高校生たちがガールズバンドを組み、音楽活動を行っていくストーリーで人気のかきふらい氏による4コマ漫画作品です。2年前にアニメ化、今月12月より映画が公開されている人気作品ですね。秋山 澪はその作品に登場するキャラクターです。その秋山 澪をまったくの画像なしで、html+CSSのコードだけで表現しています。
私も以前にCSSでドラえもんなど様々な作品を描いたりしましたが、はっきりいってhtml+CSSのコードだけで絵を描くのはとても大変です(コードの量的な意味で・・・)。絵の複雑度によりますが、html+CSSのコードだけで色々表現するのにはとても面倒な行為です。そういった意味で今回のけいおんの澪は正直言って神レベルだと思いました。

まあ、こういうものはなんだかんだうだうだ語るより実際に実物を見せたほうが早いですね。百聞は一見に如かずと言いますし・・・。

Demo作品


css3_k-on_mio_001.png
K-ON! 秋山澪 with CSS3 Demo

この作品をぱっと見て、これが画像じゃないと気がつく人が何人いるでしょう。実際に見ても本当の画像のように見えます。それくらいすばらしい出来だと思います。

http://rei.idv.tw/sample/mio.html

ハッキリ言って、これを見せられて突然「これ画像じゃないです」といわれても、見せられた人は「ちょっと何言ってるかわからないっすね。」状態でしょう。この人何言い出してるんだ?と思われること間違いなし。どうもみても画像です。本当にありがとうございました。ってなるのが普通の反応だと思う。

ブラウザ比較


css3_k-on_mio_002.png

Firefox8,Chrome16,Opera11,IE10 Developer Preview ,IE9,IE8の比較画像です。CSS3系ではいつもどおりIE8がネタにされるのですが、今回もIE8だけドット絵の様ですね・・・。まあとりあえず、絵が崩れたブラウザは残念でしたってことです。早くバージョンをあげましょう。

今回ブラウザ比較をしていて、Firefox8,Chrome16,IE10 Developer Previewはアニメーションで髪の毛と目が動いていました。私も髪と目のアニメーションはぐぬぬインデックスでやったのですが、髪の毛は結構面倒なのでよくできているなと感心しました。

今回のK-ON! 秋山澪は完成度が高すぎて、ネタ度が低いですね。実際にはIE7とかも動かしたんですが、IE8とほとんど変わらなかったですね。もっと面白い感じに崩れてくれればよかったんですけど。

Demo作品2


css3_k-on_mio_003.png
Lacus Clyne with CSS3 Demo

この製作者の方は、その他の作品では機動戦士ガンダムSEED ラクス・クラインなども作っているようです。

pon_de_ling_001.png
Pon De Lion with CSS3 Demo

今回この作品を作った方は台湾人の方みたいですね。ちなみに台湾人の方の作品でもう一つすごいのがあって、これは以前の記事でも紹介したんですが、html+CSSだけでポン・デ・ライオン(Pon De Lion)を描いた作品です。

画像を一切使わずにCSS3だけで描かれた「ポン・デ・ライオン」がすごい!

こちらもどう見ても画像です。はい。それくらいレベル高い作品です。

記事などを見るとどちらもCSSドラえもん関連の記事にリンクされていました。ちなみになぜCSSドラえもんが台湾で認知されているのかというと、過去にEngadget 中文版に記事が載ったため。そういったところから話が広がり、どうやら台湾ではCSSドラえもんのおかげで、CSSで絵を描くという変態コーディングが一部で盛り上がっているようです。マジでこれ誰得だよ!まあ言わずもがな俺得な訳ですが・・・。

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design

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

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

今回の個人的感想!




今回もとんでもない作品が海外から来ましたね。今回は製作者の@reiidvさんから直接Twitterで話しかけられて、作品紹介されてそのクオリティにびっくりしたので早速記事にしたものです。CSSの行数を見ましたが、結構短くまとめた状態で1300行以上ありました。こんだけ書けば普通にサイトが一個できますよ、はい。

ちなみに製作者は台湾人らしいです。ポン・デ・ライオンの件といい、台湾どうなってるんだよ・・・。などとつっこみ入れたい感じなのですが、その元凶が自分自身にもあるのでなんとも言えない。確かに、ぐぬぬインデックス書いたときにこれ以上の作品を求むとか調子乗って書いてしまったが、それにしても送られてくる作品のレベルが高いこと高いこと。レベルが高い作品は当然載るべき。という訳で今回も記事にしたわけです。

CSSで絵を描くというのは実用的ではないと前から言っているわけなんですが、それでもチャレンジする人がいるんですから、世界は面白いですね。実際のところPure CSS Designの方も海外のアクセスが多いですからねー。自分の作品が多くの人に影響を与えることができるというのは本当にうれしいことです。また、このようにさらにすごい作品が出てくることを願っています。

Related article

COMMENT TO THIS ENTRY

マジで神過ぎるw

9457

よく分からんが凄い

9459

昔のBasicでのLINE、PAINT文でグラフィック書いてた時代よかめちゃ楽そうだ
ディザとか必要無いしね

9462

この人バカだろ(ほめ言葉)

9468

この人バカだろ(ほめ言葉)

9469

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。