MACABOUTPORTFOLIOBLOGBLOGファーストビューをフルスクリーン対応デザインにしてみたもうひとつの運営サイト「大切な記録」のキービジュアルをフルスクリーン対応にしてみました。フルスクリーンに耐えさせる画像のチョイスはボカしていてもビジュアルとして成り立つフルスクリーンに耐えられる大きさ被写体が引いてあるといったところでしょうか?キャッチコピーなどの文字周り系は完全に別画像にしたほうが良いでしょう。今回僕は「ボカしていてもビジュアルとして成り立つ」画像を用意しました。シングルページにする想定ではありませんでしたが、そこそこ大きな画像ができたのでもしかするとそのうちシングルページになっているかもしれませんが今回はキービジュアルのみで、スクロール等の仕掛けも無しです。ファーストビューのみフルスクリーンになるていです。.height()で高さを取得する実装したサイトはレスポンシブです。PCとタブレットはフルスクリーンでもいいですが、スマホのポートレートがフルスクリーンなのは嫌すぎるので、まずは横幅を.width()で取得し、ウィンドウ幅が601px以上の時にだけフルスクリーンになるようにします。.height()で高さを取得し、グローバルナビの高さを引いた数値をファーストビューブロックに挿入します。関数化しているの読み込んだ時と、リサイズした時に実行するためです。60);$('.kv').css('height',kh+'px');}}キャッチコピーの天地を中央にするために、取得した高さを2で割、更にコピーの高さ+微調整分引いて、キャッチコピーのパディングに設定します。2);$('.kvc').css('padding-top',kvpt+'px');}}それぞれの関数を、読み込んだ時、リサイズしたとき用に呼び出します。});12345678jQuery(function($){kvw();kvp();});jQuery(window).resize(function($){kvw();kvp();});基本的にはこれだけですが、IE7,8に対応させるにはもう一工夫必要です。いうのもIE7,8はCSS3のbackground-sizeに対応していないからです。ググってみると対応できそうなjsが配布されていましたが、このサイトはIE7,8には対応いたしませんので、今回は導入していません。実務で同じ事をやる機会があったらその時に対応します。Wakai大阪でWebデザイナーをしています。メインでFireworksを使ってます。IllustratorやPhotoshopも使っています。