ダイナミックなデザインのホームページを作る場合、
ブラウザサイズいっぱいに画像を表示する手法が効果的です。

 

ここでは、「ブラウザサイズを自動で取得する方法」と「動的にCSSを設定する方法」を組み合わせることで実現できる、画像をフルスクリーン表示するプログラムの実装方法について見ていきましょう。

 

フルスクリーン表示のための基礎技術

ブラウザサイズを自動で取得する方法

ブラウザのサイズを自動で取得する場合、javascriptの「height()」関数を使います。

 

対象を表示しているブラウザウィンドウに設定し、height()関数を適用することで、返り値として現在表示しているブラウザの高さが返されます。

 

ブラウザサイズを自動で取得するjavascript

 

動的にCSSを設定する方法

要素に対して動的にCSSを設定する場合は、「.css()」関数を使います。

 

.css()関数では、引数に設定したいcssのプロパティ名と値を設定することで、指定した要素名に動的にCSSを設定することができます。

 

動的にCSSを設定するjavascriptの構文

動的にCSSを設定するjavascriptのサンプル

 

ブラウザサイズを自動で取得して画像をフルスクリーン表示するサンプルプログラム

これまでに紹介した2つの方法を組み合わせると、ブラウザサイズを自動で取得して画像をフルスクリーン表示することができるようになります。

そのサンプルプログラムを以下に紹介しておきます。

 

HTML

CSS

javascript

 

 

おすすめの記事