1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずCSSで描かれた「けいおん!」の澪がマジですごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

現在、楽天スーパーセールにてLINEが提供するスマートスピーカーClova Friendsが驚異の88%オフの1480円で販売されています。スマートスピーカー「Clova Friends SALLY」と...

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

本日12月6日9時より、Amazonでは年末の大セールとなるAmazon Cyber Monday(サイバーマンデー)2019を実施されます。開催期間は12月6日(金)9時00分から12月9日(月)23時...

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

前回までにDearMob iPhoneマネージャーでiTunesを使わないバックアップ方法、写真転送、音楽転送と3本シリーズ記事として書いてきました。iTunesを使用せずにDearMob iPhon...

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでは11月26日よりGearbestブラックフライデーセールを実施しています。Gearbestではスマホやタブレット、スマートウォッチなどの製品を数多く取り揃えた中国のネッ...

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

現在AmazonではWWTECKSのUSB充電電熱ベストが通常販売価格4,588円のところ1,294円で購入が可能となっています。超激安の1,294円で購入するには50%OFFクーポンと1000円引き...

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

本日より海外で人気のブラックフライデーセール(Black Friday)が日本のアマゾンでも初開催されます。ブラックフライデーセールの開催期間は11月22日[金]9:00から11月24日...

パソコンデスクのケーブルをダイソーの100円グッズできれいに整理しよう!

パソコンデスクのケーブルをダイソーの100円グッズできれいに整理しよう!

今回はパソコンデスクの周りのケーブル類をダイソーの100円グッズを使ってきれいにする方法について紹介したいと思います。今年に入ってからPCデスクのFLEXISPOT 電動式昇...

Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

現在、全国2万店以上の店舗から簡単に注文・デリバリーできる総合サイトの出前館では、アマゾンのAlexa(アレクサ)における出前館のAlexaスキルを使って注文した場合、初回...

NetaGear RSS News

Now Loading

Article

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

Webデザイン > 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...