1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. 画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!

画像を一切使わずにCSS3だけでとある科学の風力発電を描いてみた!

css_Wind_Electricity_000.png

先日の「CSS3 ドラえもん ver2」に引き続き、本日もCSS3の記事です。今回は画像を一切使わずにHTML+CSSでいろいろなものを作ってみようという企画の第3弾です!

だいぶ前のことになりますが、CSS3ドラえもん公開後の1ヵ月後にTwitter 'Fail Whale'という、CSSだけでTwitterのくじらを描いた猛者がいるという記事を目にしました。このくじらに触発されて今度はアニメーションに重点を置いたものを作ってみようと思い、実際に作ってみました。
doraemon_css3_008.png

今回作成したのは、とある魔術の禁書目録やとある科学の超電磁砲に度々出てくる風力発電+飛行船です。ただし、飛行船はchromeだけのおまけです。

もちろん、今回も使うものはHTML+CSS3だけで一切の画像やjavascriptは使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。


CSS3で作ったとある科学の風力発電の完成品!


css_Wind_Electricity_001.png
とある科学の風力発電 Demo


注意事項としてはGoogle ChromeまたはSafari、firefox4 Beta12で閲覧してください。Google Chrome,SafariまたはOpera,firefox4 Beta12以外のブラウザではアニメーションが動きません(Operaとfirefox4 Beta12は羽の上にマウスを乗っけると動き出します。)。また、スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。firefoxはアニメーションが動きませんが、それ以外ではきちんと表示することが出来ます。Opera、IE9では一部CSS3に対応してない部分があります。また、IE8以下はCSS3には全く対応していないので構造が崩れてひどいことになります。

Google chromeを入れていない方はぜひこの機会に試してみてください。
→Google Chromeのダウンロード

今回はアニメーションをやりたかったので、風力発電はアニメーションがメインに作ってあります。もちろん、画像は一切使っていないので「とある魔術の禁書目録」のロゴも画像を使っていません。ただし、ロゴを正しく表示するには小塚明朝 Pro Bや小塚明朝 Pro Hといったフォントが必要です。

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

各ブラウザの動作


css_Wind_Electricity_003.png

アニメーションが動くのはChromeだけです。その他のブラウザはマウスを乗っけるとちょっと傾きます。
追記:アニメーションが動くのはchrome,Safari,Opera,firefox4 Beta12以降です。Operaとfirefox4 Beta12は羽の上にマウスを乗っけると動き出します。その他のブラウザはマウスを乗っけるとちょっと傾きます。

静止画として考えると、ChromeとFirefoxは完全に表示できています。Opera、IE9 RCはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。Operaに至っては背景のグラデーションがかからないので、文字まで見辛くなっています。

最後はいつも通りオチ担当のIE7、8ですが、謎のミサイルが3つ飛んでいる状態ですね。もうなんだか意味がわからないです。

おまけ


css_Wind_Electricity_005.png

おまけとしてChromeだけ飛行船を飛ばしました。飛行船はアニメーションで移動します。これは記事公開前に思いつきで追加したものなのでそんなにしっかり作ってません。

関連作品


gununu_index_css3_023.png
とあるぐぬぬの禁書目録 Demo

関連作品としては、とあるぐぬぬの禁書目録 Demoがあります。閲覧時の注意事項としてはGoogle ChromeまたはSafariで閲覧してください。Google Chrome,Safari以外のブラウザではかなり崩れます。Google ChromeまたはSafari以外のブラウザではアニメーションが動きません。また、スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。

今まではブラウザの互換性を重視して、Chromeやfirefoxでは完全に見れるように作ってきましたが、今回のは互換性を維持できませんでした。そんなこんなで今回はChrome or Safari限定になってしまいます。

Pure CSS Design


doraemon_css3_v2_003.png
Pure css design


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


今回の個人的感想




今回のものは、CSSの行数で行ってもドラえもんより少ない500行でした。今回はアニメーションに重点をおいているため、簡単な題材でつくったので時間はそんなに掛かりませんでしたね。アニメーションという意味合いでは、gifアニメーション画像よりもきれいでファイルサイズを軽く出来るのでその点はメリットがあるように思えます。その代わりにどのブラウザでも使えるというわけではないので、CSS3をつかったアニメーションは一長一短ですね。

ぶっちゃけ最近ではSVGとjavascriptでアニメーションしたほうが、もっと複雑なことが可能なのでそっちの方がいいかもしれません。まあ、今回のような回転するだけなら、CSS3を使うのもありかと・・・。もちろん回転させるのは画像の場合ですけどね。

元々CSSはHTMLの装飾するためのもので、本来はこういった使い方をするものではないのですが、CSS3によってデザインの幅が広がったということは間違いない事実です。今回の技術デモでCSSでの新たなアイデアや知見が広がればと考えています。

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

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

Related article

COMMENT TO THIS ENTRY

これすげーな!
画像なしで、全部html+CSSで書かれているなんて驚き

9043

chrome最強伝説!
Opera(笑)

9044

Firefox3.6でも、ぎこちない(コマ送り)でアニメーションすることを確認しました。
また、chromeの現行バージョン(9.0.597.107)では「禁書目録」の文字が上方へ数pxずれます。
念のため、ご報告まで。

9045

↑firefoxってアニメーションしなくね?たぶんマウスを乗っけた時に少し回転するやつはアニメーションじゃないと思う。

9046

Firefox4.0 Beta12もぎこちないアニメーションしますね。
私の環境ではIE9もFirefoxも文字がずれるけどフォントのせいでしょうか。

9047

字がずれるというのはtwitterでも報告が入っています。正しく表示するには、とある魔術の禁書目録のロゴで実際に使われている小塚明朝 Pro Bや小塚明朝 Pro Hといったフォントが必要です。これが入ってないとずれてしまうようですね。

firefox4でのずれはフォントの問題ではないようです。現在調査中です。

9048

アンドロイドからですが、きちんとアニメーションまで完璧に動作しました。
CSS3に対応しているんですかね

9049

Operaとfirefox4 beta12以降でのアニメーション動作を追加しました。羽の上にマウスを乗っけると羽が回転し始めます。

私はアンドロイド端末を持っていないので動作確認をしていないのですが、webkit系のブラウザならアニメーションまでしっかり動くと思います。

9050

safariだけど飛行船飛んでました

9052

やはりすごいですね…

CSS3にはほんと驚かされます

9059

回る向きが逆、って事は無いんですよね。
自分のPC、ぼろいので・・・

9063

Android2.1 IS04
標準ブラウザで飛行船まで表示します

9066

firefox4でのズレを少し修正しました。firefox4 RCって3.6.8と表示が全然違うのはなぜなんだろう。。。

9068