モニタの大きさを取得:JAVAスプリクト初心者入門講座


JavaScript初心者さんの入門書です

モニタの大きさを取得

モニタの大きさを取得することは、Webページを作る上では重要なことです。たとえば、ある画像を表示させたい場合、仮にそのサイズが1000×500だったとしましょう。

このとき、画面の解像度が1024×768の環境では、きちんと見ることが出来ますが、それ以下、たとえば640×480等の環境だった場合、画面をはみ出してすべてを一度に見ることが出来ません。

画像を表示させる場合、imgタグでその表示サイズは変えることが出来ますから、ビジターの解像度に応じて、表示サイズを変更させれば、どんな環境でも見せたい部分をすべて見せることが出来るようになるというわけです。

JAVAスプリクトにおいて、画面の解像度を取得するには、window.screenプロパティを使います。 それでは、サンプルです。

var monitor = window.screen;
document.write("あなたのモニターの解像度は"+monitor.width+"×"+monitor.height"です");

このサンプルを実行してみましょう。画面にはなんと表示されましたか?仮に解像度が1024×768だったら・・・

あなたのモニターの解像度は1024×768です

と正しく表示されたはずです。 それでは、仮に横幅が1000以上だったら正しく表示されるページを作ったとして、その用件を満たしていれば正しく表示されることを示すメッセージを表示するようにしたいと思います。

ではサンプルです。

var monitor = window.screen;
var x = monitor.width;
if(x >= 1000){
document.write("あなたはこのページを正しく見ることが出来ます。\n");
} else {
document.write("残念ですがですがあなたはこのページを正しく見ることが出来ません。\n");
}

さてどうだったでしょうか?Webページ制作において、どんな環境でも、同じように見える、というように作ると言うことは、とても大事なことです。 JAVAスプリクトを活用して、そういったページづくりが出来るようになりましょう。

カテゴリー:応用編

「モニタの大きさを取得」は参考になりましたか?

モニタの大きさを取得:関連記事

簡単な電卓を作ってみる
JAVAスプリクトでは、なんと電卓も作ることが出来ます。その気になれば、皆さんがよく目にする数字の...

お気に入りに追加する機能を作る
皆さんは、Webページを巡回しているときに、ふと「お気に入りに追加」などというボタンをみかけたこと...

ページの移動時にメッセージを表示してみる
普通、というかほとんどのページではそうですが、ページを移動するときには、リンクをクリックすればすぐ...

おみくじを作ってみる
さて、JAVAスプリクトでおみくじを作ってみましょう。ビジターは、ページを訪れる度に、大吉から大凶...

マウスクリックで画像を変えてみる
何かをクリックしたら、何かの処理が起こる、という手法は、様々な場面で使われます。多くの場合、そのク...

簡単なパスワード認証
会員制サイトや、HPやブログの管理者ページでは、パスワード認証をして初めて見られるようになるという...

外部ファイルの読み込み
例えばC言語においては、関数の定義などを、外部ファイルに定義して、それをプログラム中の#inclu...

ちょっとした視覚効果
JAVAスプリクトを使って本当にちょっとした視覚効果をやってみましょう。視覚効果といっても、たいし...

プルダウンメニューの表示
リンクの多いページによっては、そのリンク先をプルダウンメニューなどを使って選ばせて、そうしてリンク...

右クリックの禁止
右クリックの禁止の設定は、画像を載せていたり、MIDIを流すようなサイト等に多いですが、そういった...

文字の解説を表示
Webサイトを見ていたときに、ふと気になった単語にマウスカーソルを当てると、その言葉の注釈のような...

時間のカウント
アップローダーからファイルをダウンロードするとき、残り何秒お待ち下さい、などという表示がでて、その...

ブラウザ別にメッセージを表示
InternetExplorerやFirefoxなど、皆さんが使っているブラウザのほとんどは、OS...

アラートを使った簡単なクイズ
JAVAスプリクトは、応用次第ではゲームも作ることが出来ます。今回は、ボタンとアラートを使って簡単...

ボタンを押してアラートを表示させる
皆さんは既に、ブラウザのソースに記述して、ページを開いたらそれが実行されるタイプのJAVAスクリプ...