デザインのはなしとかCSS | デザインのはなしとか http://nadegaku.n-designer.net 専門学校 名古屋デザイナー学院のOBが書くブログ Wed, 28 Dec 2011 11:38:28 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 FlashのようでFlashでない、HTML5で動いているサイト http://nadegaku.n-designer.net/2011/10/28/flash%e3%81%ae%e3%82%88%e3%81%86%e3%81%a7flash%e3%81%a7%e3%81%aa%e3%81%84%e3%80%81html5%e3%81%a7%e5%8b%95%e3%81%84%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%82%a4%e3%83%88/?utm_source=rss&utm_medium=rss&utm_campaign=flash%25e3%2581%25ae%25e3%2582%2588%25e3%2581%2586%25e3%2581%25a7flash%25e3%2581%25a7%25e3%2581%25aa%25e3%2581%2584%25e3%2580%2581html5%25e3%2581%25a7%25e5%258b%2595%25e3%2581%2584%25e3%2581%25a6%25e3%2581%2584%25e3%2582%258b%25e3%2582%25b5%25e3%2582%25a4%25e3%2583%2588 http://nadegaku.n-designer.net/2011/10/28/flash%e3%81%ae%e3%82%88%e3%81%86%e3%81%a7flash%e3%81%a7%e3%81%aa%e3%81%84%e3%80%81html5%e3%81%a7%e5%8b%95%e3%81%84%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%82%a4%e3%83%88/#comments Fri, 28 Oct 2011 08:00:29 +0000 Nori http://nadegaku.n-designer.net/?p=1395 Flashでバリバリに動いているサイトは沢山ありますが今日ご紹介するのはまるでFlashで作ったかのように細かく、滑らか動くサイトApril/Zeroです。

http://aprilzero.com/

aprilzero.com

と、、、見て頂くと分かりますが動いているのは上記スクリーンショットの１ページのみ。（ブラウザはSafariとFirefoxで確認）
どうやらHTML5とJAVA、CSS3を組み合わせた実験サイトのようですね。

それにしてもこの動き、本当に細かくて奇麗。
Adobe Flashでも次に来るWebの変化に合わせてJavaを使って脱Flashプラグインしたコンテンツを書き出せる様になってきていますがこういったサイト、今後どんどん増えていくのでしょうか？

【April/Zero】

]]> http://nadegaku.n-designer.net/2011/10/28/flash%e3%81%ae%e3%82%88%e3%81%86%e3%81%a7flash%e3%81%a7%e3%81%aa%e3%81%84%e3%80%81html5%e3%81%a7%e5%8b%95%e3%81%84%e3%81%a6%e3%81%84%e3%82%8b%e3%82%b5%e3%82%a4%e3%83%88/feed/ 0 HTML5とCSS3で作ったミュージックプレイヤーZEN-Player http://nadegaku.n-designer.net/2011/02/10/html5%e3%81%a8css3%e3%81%a7%e4%bd%9c%e3%81%a3%e3%81%9f%e3%83%9f%e3%83%a5%e3%83%bc%e3%82%b8%e3%83%83%e3%82%af%e3%83%97%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc/?utm_source=rss&utm_medium=rss&utm_campaign=html5%25e3%2581%25a8css3%25e3%2581%25a7%25e4%25bd%259c%25e3%2581%25a3%25e3%2581%259f%25e3%2583%259f%25e3%2583%25a5%25e3%2583%25bc%25e3%2582%25b8%25e3%2583%2583%25e3%2582%25af%25e3%2583%2597%25e3%2583%25ac%25e3%2582%25a4%25e3%2583%25a4%25e3%2583%25bc http://nadegaku.n-designer.net/2011/02/10/html5%e3%81%a8css3%e3%81%a7%e4%bd%9c%e3%81%a3%e3%81%9f%e3%83%9f%e3%83%a5%e3%83%bc%e3%82%b8%e3%83%83%e3%82%af%e3%83%97%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc/#comments Thu, 10 Feb 2011 09:36:51 +0000 Nori http://nadegaku.n-designer.net/?p=1244 少し前に見つけたサイトですがあまりに美しかったので今更ながらご紹介します。
そのサイトはこちら

【ZEN – HTML5-CSS3 Audio Player】

こちらのサイトで何が凄いのかと言うとトップに出ているミュージックプレイヤー。これFlashではなくHTML5とCSS3で動いています。
「Flashじゃなくてもここまで出来るんだぜ！」と言う技術の披露なんでしょうが本当に凄い。
とは言えこのサイトのプレイヤー、IEはもちろんのことFirefoxでもちゃんと見れません。特にIEで見てもただ黒い画像が貼ってあるだけに見えると思います。ここのプレイヤーが見えるのはMacのSafariとGoogle Chromeのみ。

と言うわけでIEで見ている方にどんなものかを画像でお見せします。

これが初期表示。ボタンをクリックすると・・・。

これがサイトを開いた時の初期画面（ボタン）。
この円形のボタン自体が絵ではなくHTMLで書かれております。すでにここが凄い！
（細かな加工についてはwebkit等を使用）
そしてこのボタンをクリックすると・・・。

モーフィングしてこの形に！

グラデーショングレーだったボタンが上記の様な形にフワッとモーフィングして中から回転するプレイヤーが！その瞬間から曲が流れ始めます。このアニメーションもHTML5とCSS3、後はJavaを使って作られている模様。

とこのようにこのプレイヤー、HTML5やCSSの今後の可能性を知らしめてくれるものだと思います。

ただ惜しいのはこういったコンテンツはIEで見れない事。
早く全ブラウザの仕様が統一されれば良いんですけどね〜。（ついでに携帯電話のブラウザも）

]]> http://nadegaku.n-designer.net/2011/02/10/html5%e3%81%a8css3%e3%81%a7%e4%bd%9c%e3%81%a3%e3%81%9f%e3%83%9f%e3%83%a5%e3%83%bc%e3%82%b8%e3%83%83%e3%82%af%e3%83%97%e3%83%ac%e3%82%a4%e3%83%a4%e3%83%bc/feed/ 0 CSS3・HTML5のブラウザ対応状況一覧 http://nadegaku.n-designer.net/2009/11/05/css3%e3%83%bbhtml5%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e7%8a%b6%e6%b3%81%e4%b8%80%e8%a6%a7/?utm_source=rss&utm_medium=rss&utm_campaign=css3%25e3%2583%25bbhtml5%25e3%2581%25ae%25e3%2583%2596%25e3%2583%25a9%25e3%2582%25a6%25e3%2582%25b6%25e5%25af%25be%25e5%25bf%259c%25e7%258a%25b6%25e6%25b3%2581%25e4%25b8%2580%25e8%25a6%25a7 http://nadegaku.n-designer.net/2009/11/05/css3%e3%83%bbhtml5%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e7%8a%b6%e6%b3%81%e4%b8%80%e8%a6%a7/#comments Thu, 05 Nov 2009 08:52:05 +0000 Nori http://nadegaku.n-designer.net/?p=267 n_091105_01
情報元は「CREAMU」と言うブログより。
いよいよCSS3とHTML5が各ブラウザに実装され始め実戦の場にいるWebクリエイターの皆さんも業務に取り入れるべきかどうか真剣に考えるべき時が来ていますね。

上記ブログのリンク先「Browser support for CSS3 and HTML5 CSS3 and HTML5 feature support」で紹介されているのはブラウザ別CSS3とHTML5の対応状況。
これを見れば制作の際やって良い事悪い事が一目瞭然。

Safari 4とGoogle Chrome辺りはかなりの実装度。Internet Explorerは・・・今はこんなところですか。
Webクリエイター・デザイナーは基本的にInternet Explorerに準拠していくと言うのが通例になっているのでしばらくは様子見でも良いかも？

[CSS3・HTML5のブラウザ対応状況一覧 | CREAMU]

]]> http://nadegaku.n-designer.net/2009/11/05/css3%e3%83%bbhtml5%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e7%8a%b6%e6%b3%81%e4%b8%80%e8%a6%a7/feed/ 0 スタイルシートをすっきりと見やすくしてくれる『styleneat』 http://nadegaku.n-designer.net/2009/04/13/%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%e3%82%92%e3%81%99%e3%81%a3%e3%81%8d%e3%82%8a%e3%81%a8%e8%a6%8b%e3%82%84%e3%81%99%e3%81%8f%e3%81%97%e3%81%a6%e3%81%8f%e3%82%8c%e3%82%8b/?utm_source=rss&utm_medium=rss&utm_campaign=%25e3%2582%25b9%25e3%2582%25bf%25e3%2582%25a4%25e3%2583%25ab%25e3%2582%25b7%25e3%2583%25bc%25e3%2583%2588%25e3%2582%2592%25e3%2581%2599%25e3%2581%25a3%25e3%2581%258d%25e3%2582%258a%25e3%2581%25a8%25e8%25a6%258b%25e3%2582%2584%25e3%2581%2599%25e3%2581%258f%25e3%2581%2597%25e3%2581%25a6%25e3%2581%258f%25e3%2582%258c%25e3%2582%258b http://nadegaku.n-designer.net/2009/04/13/%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%e3%82%92%e3%81%99%e3%81%a3%e3%81%8d%e3%82%8a%e3%81%a8%e8%a6%8b%e3%82%84%e3%81%99%e3%81%8f%e3%81%97%e3%81%a6%e3%81%8f%e3%82%8c%e3%82%8b/#comments Mon, 13 Apr 2009 02:30:37 +0000 Nori http://nadegaku.n-designer.net/?p=147 僕が購読しているブログ「100SHIKI」の投稿より。
[スタイルシートをすっきりと見やすくしてくれる『styleneat』 - 100SHIKI ～ 世界のアイデアを日替わりで ～]

スタイルシートがゴチャゴチャしてくるのはWebサイトを作っている人間ならいつも悩まされる問題（最初から整理すればいいんですが）
その問題を一発で解決してくれるサイトです。

 使用方法はとても簡単。サイトを開いて出てくるフォームに奇麗にしたいCSSをペーストして「Organize CSS」をクリックするだけ。これで元のCSSをIDやCLASS毎、階層化して吐き出してくれます。

[Styleneat - CSS Organizer]

]]> http://nadegaku.n-designer.net/2009/04/13/%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88%e3%82%92%e3%81%99%e3%81%a3%e3%81%8d%e3%82%8a%e3%81%a8%e8%a6%8b%e3%82%84%e3%81%99%e3%81%8f%e3%81%97%e3%81%a6%e3%81%8f%e3%82%8c%e3%82%8b/feed/ 3