1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずCSSで描かれた「けいおん!」の澪がマジですごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的...

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

今回紹介するのは株式会社TKS 田中金属製作所が制作したマイクロナノバブルシャワーヘッド「Bollina Ninfa(ボリーナ ニンファ)」TK-7100-SLです。マイクロナノバブルと...

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりまし...

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

今回はAndroidでadb接続からスクリーンショットを取る方法を紹介したいと思います。通常のAndroidのスマホやタブレットでは電源ボタンと音量ボタンの長押しで簡単にスクリ...

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

今回はタブレットをいろいろな場所に自由に配置することができるタブレットアームを購入したので紹介したいと思います。先日の記事のタブレットをPCのサブディスプレイ化で...

BSデジタル放送のトランスポンダ移動によるTVTestの設定変更方法!

BSデジタル放送のトランスポンダ移動によるTVTestの設定変更方法!

久しぶりにPCのTVTestを使ってBSでも見ようと思ったら、なぜかBSジャパンが映らないということに気がつきました。その原因を調べたらBSデジタル放送のトランスポンダ移動に...

dTVターミナルにAbemaTVやプライムビデオなどのアプリをインストールする方法!

dTVターミナルにAbemaTVやプライムビデオなどのアプリをインストールする方法!

dTVターミナル(dTV 01)はテレビで見るためのNTTドコモから発売されているデバイスですが、通常は他のアプリをインストールしたり、カスタマイズしたりはできない仕様になっ...

Android端末をWi-Fi経由でadb接続する方法!

Android端末をWi-Fi経由でadb接続する方法!

Android端末をコマンドライン上から色々な操作を行うことができるadbコマンドですが、通常adb接続する際にはパソコンとAndroid端末をUSBで接続したまま行うと思いますが、...

PCでスマホアプリが動くAndroidエミュレーター「NoxPlayer」がすごい!

PCでスマホアプリが動くAndroidエミュレーター「NoxPlayer」がすごい!

今回はパソコン上でスマホゲームやアプリを動かすことが出来るAndroidエミュレーターのNoxPlayerを紹介したいと思います。WindwosとMacバージョンがあり、どちらのOSでも簡...

1000円で買ったStar 4 Fitness Trackerスマートブレスレットが微妙だった話!

1000円で買ったStar 4 Fitness Trackerスマートブレスレットが微妙だった話!

先日レビューを書いた超激安のスマートブレスレットi5 Plusを買って以来、スマートブレスレットにハマっています。新たに激安の送料込み1000円以下で販売されていたStar 4 ...

NetaGear RSS News

Now Loading

Article

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

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

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

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

Amazon

Now Loading...