前置き
本サイトでは、Facebookやtwitterで、簡単なご質問をお受けしております。まだまだ若輩者ゆえ答えられることに限りがございますが、出来る限りお応えしていきたいと思います。
ウィンドウサイズいっぱいにしたい。ついでにウィンドウサイズより30px小さいサイズにする方法も知りたい。
Facebookのメッセージよりご質問を受けました。このご質問…わたくしもハマった記憶がございます。height:100%指定すればいいんじゃないの？と試してみれども、意図した通り動いたり動かなかったり。また、ちょっとだけ工夫したいと思ってもキッカケがつかめたりつかめなかったり…。「ウィンドウサイズいっぱいにする」言葉にすると簡単ですが、用途や仕様する技術によって幾つか罠があるのです。
であれば、(メモに残して)覚えてしまえと。
まずはやること整理。
お話を伺うと、width:100%で横幅いっぱいにはできるそうなので、縦幅に絞ってご説明したほうがよろしいでしょうね。最低限のcssの知識はあるものとしてステップ形式でご説明を続けます。
- cssのみで高さいっぱいにする。
- jQueryを利用して高さいっぱいにする。
- ウィンドウサイズより◯px小さい高さで表示する。
- ついでに、ちょっと動かしてみる。
説明に利用するhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <title></title> </head> <body> <div id="main"> </div> <div id="footer"> </div> </body> </html> |
こちらのid=”main”ボックスの高さを修正していきます。
1. cssのみで高さいっぱいにする。
忘れがち!htmlとbodyタグの高さを100%指定してからボックスの高さを指定します。
これらは標準でheight:autoがかかっています。その中でいくらボックスの高さを指定しても、htmlとbody以上のサイズになりません。
|
1 2 3 4 5 6 7 8 |
html,body{ height: 100%; } #main{ width: 100%; height: 100%; } |
ほとんどの場合はこのCSSのコピペでOKでしょう。うまくいきましたか？
2. jQueryを利用して高さいっぱいにする。
cssで何故か上手くいかない…そんな時は「jQueryでやっておしまい。」ということでjQueryでの記述方法を載せておきます。
そもそも、高さをいっぱいにしたい…そんな要望が出るときは何かしらデザインと絡んだ表示を場面が多いと予想されます。なので予め要素を動かせるようjQueryで記述しておくのもいいのではないでしょうか。
jQueryの設置方法は検索サイトで「jQuery 簡単 設置」などで調べてください。皆さんとても丁寧に説明されています。
|
1 2 3 4 5 6 7 8 9 10 11 |
//ページ読み込み時に高さ取得 $(document).ready(function(){ var winHeight = $(window).height(); $("#main").css("height",winHeight + "px"); }); //画面がリサイズされたときに高さ取得 $(window).resize(function(){ var winHeight = $(window).height(); $("#main").css("height",winHeight + "px"); }); |
cssの時には、ウィンドウサイズが変更になると自然とボックスのサイズも変わりましたが、jQueryの記述ではウィンドウサイズが切り替わるときの動きも忘れずにつけるようにしましょう。
3. ウィンドウサイズより◯px小さい高さで表示する。
ここらへん(ウィンドウの底辺から〇pxの指定とか)になってくるとcssのみで表現するのは難しくなりますできないこともないですが…。jqueryで記述しておいてよかった〜と思うひとときです。
例えば「ウィンドウサイズより30px小さいサイズにしたい」というのであれば、winHeightから-30px引いてあげればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 |
//ページ読み込み時に高さ取得 $(document).ready(function(){ var winHeight = $(window).height(); $("#main").css("height",winHeight - 30 + "px"); }); //画面がリサイズされたときに高さ取得 $(window).resize(function(){ var winHeight = $(window).height(); $("#main").css("height",winHeight - 30 + "px"); }); |
4. ついでに、ちょっと動かしてみる。
せっかくなのでちょっと動かしてみます。
ページ表示時に1.5秒かけてbox高さがウィンドウのサイズより30px小さいところまで広がります。こちらは動きのイメージがつきやすいようにサンプルをご用意しました。
step4の動作サンプル -amiten
|
1 2 3 4 5 6 7 8 9 10 11 |
//ページ読み込み時に高さ取得しつつ動かす。 $(document).ready(function(){ var winHeight = $(window).height(); $("#main").animate({"height":winHeight - 30 + "px"}, 1500 ); }); //画面がリサイズされたときに高さ取得 $(window).resize(function(){ var winHeight = $(window).height(); $("#main").css("height",winHeight - 30 + "px"); }); |
いかがでしたでしょうか、問題が解決出来るだけでなく、いろいろやってみたくなりましたか？(´∀｀*)ｳﾌﾌ
コメントを残す