先日リニューアルしましたScramble Woodsですが，作成にあたってお世話になったサイトがいくつもあるので，感謝と覚え書きを兼て紹介させて頂きます。
これからHTML5＆CSS3を使って，特にレスポンシブWebデザインでのサイト作成をしようと考えている方は参考になるかも？
トップページのスライドショー作成に利用しました。jQuery使ったスライドショー，かなり調べまくりましたが，レスポンシブWebデザインでシンプルなスライドショー作るならコレ一択という感じ。
フェードイン・アウトの処理が滑らかで，動作が軽く，JavaScriptよくわからなくてもカスタマイズ可能（表示速度とか）で素晴らしいです。
紹介するまでもないですが，一応。
Webフォントってなんとなく敬遠してたんですが，やってみたら設定超簡単なんですね！
Scramble Woodsでは，コンテンツの大見出しの<H2>に「Poiret One」，サイト上部のクイックメニューに「Krona One」を使用。
どちらもスマートでおしゃれなフォントだと思います。
更新履歴欄の角を丸くする処理などに利用。
divブロックの角を丸くする以外に，影つけたり透明にしたりも簡単にできます。
4.Ultimate CSS Gradient Generator
更新履歴欄，ギャラリーのキャプション部分背景などの，CSSによるグラデーション作成時に利用。上とあわせて便利。
ShowCase，Products一覧などの，リキッドなグリッドレイアウト作成時に利用しました。
今回のリニューアルはこのスクリプトなしにはありえない！
可変グリッドレイアウト，有名どころでは他にNHKスタジオパークのサイトなどで使われてるやつです。
Pinterestのように，各ブロックを横サイズ固定，縦サイズ可変で使うのが鉄板のようですが，横サイズいじっても上手い具合に並べ替えてくれるので，なかなかヘンな隙間空きません。賢い。
Scramble WoodsのShowCase（トップページの，サムネイルが大量に並んでるところ）では，64×64pixelを基本サイズとして，大きく見せたいサムネイルは倍数，三倍数の横幅＆縦幅を設定しています。
6.Client Side Image Map Editor
クリッカブルマップ（ShowCase下部のデフォルメキャラクター一覧）の座標指定時に使用したソフト。
マウスオーバーでフキダシが出る処理は，また別の「moptip」というスクリプト使ってるんですが，こちらは現在公開停止してしまっているようです…
クリッカブルマップをレスポンシブデザインに対応させるスクリプト。
こんなことできるんですね！ リニューアルに取りかかる前，この処理は無理だろうと諦めていただけに，ちょっと感動しました。
おかげでスマートフォンでアクセスしたときもキャラクター一覧のリンクがちゃんと機能するようになりました。めっちゃタップしにくいけど。
ウインドウサイズ縮めたとき，「Bookmarks」欄をセンタリングさせるためにこのやり方使いました。
9.画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう
タイトルのまんまです。これを利用しているためScramble Woodsでは，CSS3に対応していないブラウザでは背景がただの無地灰色になりますが，背景なのでどうでもいい。
ギャラリーにスマートフォン等でアクセス時，表示画像をハーフサイズにして転送量を軽減させるために利用。
見た目ではちょっとわかりにくいんですが，つまりここにアクセスしたとき，
ウインドウ幅が960pixel以上だとフルサイズの画像が，
ウインドウ幅が960pixel以下だと半分サイズの画像が，読み込まれるようにする仕組みです。
この仕様，画像を落とそうとした人にとってはいい迷惑ですが知った事ではない。
Scramble Woodsのギャラリーではキーボード矢印キー[←][→]の入力でページ送りできるようになってるんですが，完成間近になって気づいたんですが，Firefoxでは event.keyCode が取得されない。いつか対応します。
以上です。
コメントは
コメントを残す