ダイナミックなデザインのホームページを作る場合、
ブラウザサイズいっぱいに画像を表示する手法が効果的です。
ここでは、「ブラウザサイズを自動で取得する方法」と「動的にCSSを設定する方法」を組み合わせることで実現できる、画像をフルスクリーン表示するプログラムの実装方法について見ていきましょう。
フルスクリーン表示のための基礎技術
ブラウザサイズを自動で取得する方法
ブラウザのサイズを自動で取得する場合、javascriptの「height()」関数を使います。
対象を表示しているブラウザウィンドウに設定し、height()関数を適用することで、返り値として現在表示しているブラウザの高さが返されます。
ブラウザサイズを自動で取得するjavascript
動的にCSSを設定する方法
要素に対して動的にCSSを設定する場合は、「.css()」関数を使います。
.css()関数では、引数に設定したいcssのプロパティ名と値を設定することで、指定した要素名に動的にCSSを設定することができます。
動的にCSSを設定するjavascriptの構文
動的にCSSを設定するjavascriptのサンプル
ブラウザサイズを自動で取得して画像をフルスクリーン表示するサンプルプログラム
これまでに紹介した２つの方法を組み合わせると、ブラウザサイズを自動で取得して画像をフルスクリーン表示することができるようになります。
そのサンプルプログラムを以下に紹介しておきます。
HTML
CSS
javascript
