1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずCSSで描かれた「けいおん!」の澪がマジですごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
MySQLでONLY_FULL_GROUP_BYのエラーが出たときの対策!

MySQLでONLY_FULL_GROUP_BYのエラーが出たときの対策!

先日のサーバー移転の際にMySQLのバージョンを5.7にしたのですが、ONLY_FULL_GROUP_BYのエラーが出てしまい、今までのソースコードでは正常に動作しなくなってしまいました...

サーバーメンテナンスのお知らせ!(2019/05/24~25)

サーバーメンテナンスのお知らせ!(2019/05/24~25)

いつもShopDDおよびNetaGearをご利用いただきありがとうございます。2019年5月24日(金)、5月25日(土)2時AM2:00~AM:6:00頃にサーバーの移転及びメンテナンスを行います。作...

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

今回紹介するのはLoctek製のガススプリング式(ガス圧式)の液晶モニターアーム D8です。ガススプリング式を採用しており通常の固定式の液晶モニターアームと比較すると、移...

ギガビット対応のLANケーブル延長コネクターを買ってみた!

ギガビット対応のLANケーブル延長コネクターを買ってみた!

先日の記事でダイソーで売っているLANケーブル延長コネクターを購入しましたが、せっかく最大1Gbpsのフレッツ光ネクスト ギガファミリー・スマートタイプを契約しているの...

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

ちょっと前の記事で日本未発売で日本に発送できない商品を購入する方法の例として、Xボーダーを利用して日本未発売の超薄型背面バッテリーmoto modsの「moto power pack」...

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現でき...

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

今回紹介するのは、YouTubeのチャンネル分析が可能なマーケティングツールである「NoxInfluencer」です。NoxInfluencerを使うことでYouTubeチャンネルランキング、比較、タ...

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

先日からGWプレゼントキャンペーンでライセンスコードをプレゼントされていたVideoProcですが、今回はそのVideoProcを実際に使ってみたのでレビューを書きたいと思います。...

Vegas Proの手ブレ補正機能の効果を検証してみました!

Vegas Proの手ブレ補正機能の効果を検証してみました!

先日86%オフのキャンペーンで購入したプロ用動画編集ソフトのVegas Proですが、今回はそのVegas Proを使って手ブレしている動画にVegas手ブレ補正プラグインを使って手ブレ...

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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。