採用サイト|株式会社エスオーエルグループ

  知っておくと便利な「Javascript」基礎編1|エスオーエルグループ 採用サイト ブログ

2014.4.16

Wed

TAR

知っておくと便利な「Javascript」基礎編1

技術的なお話

こんにちは。TARです。

 

最近は、リキットレイアウトやレスポンシブデザインなどブラウザサイズや環境にあわせて最適化したレイアウトが増えてきました。

 

そこで!!!
知っておくと便利なJavascriptをご紹介させて頂きます。

 

まずは、抑えておきたい基本編!第1弾!!!

 

ブラウザサイズを取得してCSSの値を置き換えよう!

 

 

———————————————————————————–
$(window).width(); //ブラウザウィンドウ幅の取得
$(window).height(); //ブラウザウィンドウ高の取得
———————————————————————————–

 

 

これは、知っておくと結構使えるんです。

 

プラグイン化しないで、簡単なスクリプトをつかって処理させるようなときには
もってこいです!

 

 

———————————————————————————-
var ●●●●  = (取得した値 – 150) / 2;
———————————————————————————-

 

 

このようにして取得した値を元に条件にあわせて処理を行えば
様々な値を求める事だって可能♪

 

 

———————————————————————————-
$(‘#●●●●’).css({width: “●●●●”});
———————————————————————————-

 

 

こうすると求めた値を環境にあわせて置き換えていく事ができる優れもの。

 

 

 

【まとめ】
ネットサーフィンをするデバイスは様々!デスクトップPCやノートPCはもちろん。タブレットにスマートフォン。ディスプレイサイズは山のようにありますよね。

 

より快適にストレスを感じることなくブラウジングが出来るレイアウトにhtmlが、いままで以上に重要となって来ています。

 

ブラウザサイズの取得!単純なことですが、使い方を工夫する事によって様々な使い道だって存在してくるんですよね。
是非参考にして実践で使ってみてください。

 

また、様々なスクリプトの使い道についてご紹介したいと思いますので、是非また見てくださいね!

カテゴリー

人気記事ランキング

知っておくと便利な「Javascript」基...

恋するフォーチューンクッキー...

始まりの季節...

仕事は楽しい!...

爆発...

最新エントリー

Congratulations(...
連休明け~...
こんにちは♪...
一般事務・営業事務・経理事務 ス...
チョコよりバニラ派!...

アーカイブ