Webサイト制作Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか?」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います!準備:分析&実践に役立つツールChrome、Safariなら付属のデベロッパーツールChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLやCSSが確認、編集することができる優れもの!このツールで気になる部分がどう作られているのかを見ることができます。セッション概要」をチェック!FirebugFirefoxをメインで使用していたときは随分お世話になったAdd-onのFirebug。これを使えば、上記デベロッパーツールと同様のことがFirefoxでも可能です。Firefox派の方はぜひインストールして使ってみてください!サクッと実践できるオンラインツールブラウザーで簡単にコードのテストができるjsFiddle。コードを入力して「Run」ボタンをクリックするとすぐに結果が表示されます。Webサイトにも埋め込みができるので、ブログなどで解説するときにも便利です。今回はこのjsFiddleを使って解説していきます。静止画像を組み合わせてアニメーションを作成してもいいのですが、今回は例にあげたサイトに近づけるため、動画から作成します。FILES」をクリックして動画を選択。動画は3〜4秒程度がよさそうです。次の画面で速度を調節し、タイトルを入力したらボタンをクリック。生成したら右下の「Download」ボタンでダウンロードできます。タグの背景にマウスオーバーした時に表示するGIFアニメ画像を設定します。タグ内に静止画像を置くことで、二枚の画像が重なった状態になります。マウスオーバーした時に静止画像をフェードアウトさせ、aタグの背景画像として設定したGIFアニメ画像を表示させます。);});完成!GIFアニメは重くなりがちなので、なるべく短めに作成しましょう。Bandのサイトでは、GIFアニメの画像の粗さを逆手にとってグランジ感をきかせてますね。サイトのデザインにあわせて工夫が必要です。動画を背景にBeyoncéの公式サイトでは背景に動画が使われています。動きがパッと目にとまりますね!特に新しい技術だったり、小難しいコードを書いているわけではありませんが、迫力のあるサイトが作れるので紹介します。動画を挿入まずはHTML。