HTML

2年半ぶりくらいに自分のポートフォリオサイト、ORANGE AGEをリニューアルしました。
リニューアルする時どきに自分のやってみたいことを思いっきり反映してきて、前回はフルFLASHサイト、そして今回のリニューアルではHTML5＋jQueryで制作してみました。（CSS3もちょこっとだけ使ったよ）

目次：
1. 今回やりたかったこと
2. HTML5でサイトを作る準備
3. 使用したその他のjQueryプラグイン
4. videoタグで再生する動画の準備
5. 制作実績の各背景、サイズは3000×1600px。ファイルサイズ圧縮が鍵。
6. まとめ＆今後やりたいこと

Continue reading

ORANGE AGEのサイトで使用したJavaScriptを紹介すると共に、設定で詰まったところの自分用メモも書いておきます。

■jQuery.js
巷で流行ってるjQueryです。prototype.jsより面白そうだったので今回はこっちで構成してみました。

設定メモ：特になし。

■Shadowbox.js
今回のお気に入り。Lightboxのような感じで、動画、画像、ウェブページなど表示が可能なスクリプト。movやfla、swfまでも表示可能と大抵のものは再生できます。作品公開している人には結構ひかれるスクリプトではないでしょうか。

設定メモ：shadowbox.jsの中の画像のパスとflvプレイヤーのパスをきちんと設定すること。

■lavalamp.js
メニューの下でうにょうにょ動いてるやつです。なにか遊び的なものが欲しかったので設置。FLASHじゃなくてもこういうのができるようになったのはいいですね。

設定メモ：設定は特に問題なし。CSSが、IE6には考慮されてなかったので、 

*html body .lavaLampBottomStyle li a {
     margin: auto 5px;
}

と、修正して対処。（IE6でマージンが2倍になるバグの対処です。）

■minmax.js
IEでCSSのmax-widthなどを使えるようにするライブラリです。これのおかげでウィンドウを可変してもデザインが崩れずに済んでいます。ありがとうございます。

設定メモ：特になし。

■rollover.js
画像のロールオーバーを簡単にしてくれるスクリプト。画像ファイル名をいじるだけでいいので簡単便利。

設定メモ：特になし。