Home > 参考サイト Archive

参考サイト Archive

CSShack（CSSハック）について書いてあるサイト集(国内)

最近Webデザインをしていてよく思うのが、CSSの奥深さです。

CSSの解釈がブラウザごとに若干解釈が違ったりバクの関係で頭を悩ませることがあります。

InternetExplorer７（IE7）ではきちんと表示されるけど、一つ前のバージョン６ではきちんと表示されないなど・・・・。

最新のIE7やFirefoxやOperaでは、頭悩ませることが減ったのですが、文字の表示の仕方に違いがあります。しかし、やはり一番の曲者はIE6です・・・(T□T)

最近ではやっと自動アップデートでIE7を使う方が増えたようですが、それでもIE6やそれ以前を使われている方も多数いるようです。

私のサイトのDigitalTradesではIE6ではきちんと表示されません。

本来CSSハックを行いIE6でも表示させれるようにする必要があるのでしょうが・・・。

本来は使わないにこしたことないので、皆さ～～～ん！IE7にアップデートしましょうΣ(＝д＝ノ)ノ

・・・これ書いたらやろ～かな～(;つД｀)

ま～そんなわけで今回はCSSハックについて書いてあるサイトをピックアップしました。

CSSにはハックの他にも画像を使わずに角丸を表現したり、スクロールバーを表示させなかったり、テキストにグラデーションをかける方法など様々な使い方がまだあるのですが、今回は省略します。

CSSハックが無くなる日が来ることを願って・・・Σ(＝д＝ノ)ノ

ってか誰か、CSSファイルをハック用に自動変換してくれるアプリとか作ってくれないの？？

divタグ多すぎてする気になれない...

やっぱムリか・・・(T□T)

可能性が広がってるFlex（AIR）を使いこなす為のチュートリアル集（国内）

今日はFlexについて詳しく書いてあるサイトを紹介します。

Flexとは？と思われる方もいると思いますが、簡単に説明するとFlexとはFlashPlayerを使って一般的なデスクトップアプリケーション並みの機能やユーザーインターフェイスとインタラクションを実現できます。

これにより様々なシステムやアプリケーションをActionScritp3を使って構築していきます。

ただ、Flexは素晴らしいのですが、FlashPlayerを使うためWebブラウザ上でしか実行できないため、Webブラウザの制限を超えることができません。

そこで、AIRの登場です。

AIRはFlexの機能をそのままに様々なプラットフォームに依存しないシステムやアプリケーションが構築することができます。

なので、インターネット上で使う場合はFlexで作成して、OS上などで使う場合はAIRで作成するという使い分けができます。

注意する点は最新のFlexやAIRではActionScriptがバージョンが3になったので、今までActionScript2以前のプログラムをしていた方には少々ハードルが上がったようです。

そこで、Flexなんて聞いたことない方から、初めてFlexを使う方やFlashは使った事あるけど・・・という人に参考になるチュートリアル（参考）サイトを紹介します。

  • 先ずはAdobe社が提供しているFlexリソースサイトです。
    コチラにインストール手順からユーザーガイド・リファレンスガイドからFlexを使ったAIRアプリケーションの開発やActionScript 3.0のプログラミング概念の基本など参考になるとこが多数記載されています。
    2008-4-29-1.jpg
    http://www.adobe.com/support/documentation/jp/flex/
  • こちらもAdobe社の提供しているサイトです。
    ここでは、Flexでどういったサイトやシステムが構築できるかなどのサンプルが掲載されてます。それ以外にもFlex3の入門チュートリアルやコミュニティなども公開されていて内容は十分です。
    2008-4-29-2.jpg
    http://www.adobe.com/jp/devnet/flex/
  • Flexについて詳しく解説しています。
    いまさら聞けないFlex、そして、今こそ入門のとき!?と題をうってあるだけあって、詳しくわかりやすく書いてあると思います。
     2008-4-29-4.jpg
    http://www.atmarkit.co.jp/fwcr/special/flexent/flexent_1.html

ここからはFlex2とバージョンが一つ前になりますが、参考になるので紹介します。

今回参考にしたサイト
http://diaspar.jp/node/165

Adobe社のAfterEffectsのExpressionについて参考になるサイト集（国内）

Adobe社のAfterEffectsとは、動画を合成したり静止画にエフェクトをかけて動画素材にしたりと、CM作成や映画や３DGCアニメなど様々なジャンルの現場で使われていると思います。

本来AfterEffectsは、キーフレームを設定して数値を変更するだけで様々な効果を生み出せるのですが、Expression（エクスプレッション）という言語を使うことにより、場合によっては手動で設定するより簡単に効果を設定できます。

Expressionとは日本語で"表現"という意味になります。

ExpressionはJavaScriptをベースに開発されているので、JavaScriptをわかる方なら直ぐに使いこなせるようになると思います。ただ、注意する点はJavaScriptと違う点もあるので注意です。

海外のクオリティの高いFlashサイト集

今回は海外の完成度の高いFlashサイトを集めました。

最近ではSEO対策面でフルFlashのサイトはあまり多くないように思います。

大手のメーカーが一部商品を紹介したり、ホームページの一部をFlashにしたりなどはよく見られます。

Flashの難しさは、いかに気持ちよく違和感なく動かせるかというところに重点を置くことが多いと思いますが、これらのサイトはうまい具合に動かしているので参考になると思います。

  • Intel社が運営しているFlashゲームサイトです。
    ゲームをしていくうちに、自分のキャラを強化して世界中の人と対戦できます。
    2008-4-26-1.jpg
    http://www.robobrawl.com/
  • 様々なCDのアルバムを紹介しているサイトです。
    かなり手が込んでいて完成度は高いです。
    2008-4-26-2.jpg
    http://www.pinkfloyd.co.uk/obtw/
  • マジックをネタにしたFlashサイトです。
    様々なアクションが用意されていて、試行錯誤をしてチェックしてみてください。
    2008-4-26-3.jpg
    http://www.beonlineb.com/click_around.html
  • ファッション系のフルFlashサイトです。
    サイト自体が重いので、それぞれクリックした時にロードするようになってます。
    2008-4-26-4.jpg
    http://www.farmrio.com.br/
  • ファッション系のフルFlashサイトです。
    派手な演出はないのですが、しっとりとした落ち着いた感じがよく出てます。
    2008-4-26-5.jpg
    http://www.agatha.com.br/
  • カートゥーン調のキャラクターのイラスト紹介サイトです。
    シンプルですっきりしたサイトですが、細かい所まで作りこんであります。
     2008-4-26-6.jpg
     http://www.sir-patroclo.com/
  • ３Dキャラなどを使ったFlashサイトです。
    所々に３Dキャラが出てきたり、メニューに３Dを使ってます。
     2008-4-26-7.jpg  
    http://www.elphenden.com/new/
  • 写真を効果的に配置したFlashサイトです。
     2008-4-26-8.jpg
    http://www.bernhardwolff.com/
  • 美術館をモチーフにしたFlashサイトです。
    2008-4-26-9.jpg
    http://www.tyukanov.com/

今回参考にしたサイト
http://www.smashingmagazine.com/2008/04/02/39-creative-flash-designs/

Index of all entries

Home > 参考サイト Archive

Recent Entries
Categories
Archives

ブログランキング・にほんブログ村へ

MovableTypeで必要な書籍

Search
Feeds



お勧めWebデザイン書籍

Return to page top