おはこんばんにちは！ノボルです。
Web制作をしてるんだけど、要素の高さを画面サイズに合わせて指定する方法ってないの？
簡単な方法が３つあるから紹介するね！
Webサイトなどで、要素が画面サイズと同じになっていることがありますよね。
要素を横幅いっぱいに指定するなら「width: 100%;」でいいのですが、高さを画面サイズに合わせるには、どうしたらいいのでしょうか？
そこで今回は、要素の高さを画面サイズに合わせて指定する3つの方法を紹介します。
【height: 100%;】を使う方法
See the Pen NWPzLBr by monkey d ruffy (@ruffy126) on CodePen.
１つ目の方法は、各セクションに「height: 100%;」を指定するやり方です。
ただし、画面サイズに合わせて表示したい要素に「height: 100%;」を指定するだけでは、うまくいきません。
というのも、「height: 100%;」を指定するには、親要素の高さが決まっている必要があるからです。
そこで、親要素のbody要素とhtml要素にも「height: 100%;」を指定してあげましょう。
【height: 100vh;】を使う方法
See the Pen ExaReeR by monkey d ruffy (@ruffy126) on CodePen.
２つ目の方法は、「height: 100vh;」を指定するやり方です。
「vh」とは、viewpoint heightの略で、「1vh=1%の高さ」となります。
この方法が最もコードの記述量が少なくて簡単ですが、対応するブラウザが「IE9以上」という点に注意してください。
IE以外のブラウザーでは、問題なく動作します！
【jQuery】を使う方法
See the Pen xxbzapz by monkey d ruffy (@ruffy126) on CodePen.
３つ目の方法は、jQueryを使うやり方です。
jQueryでウィンドウの高さを取得し、その値をCSSに書き込むことで、要素の高さを画面サイズに合わせて指定することができます。
「$(window)〜」の部分は、ユーザーが画面サイズを変えたときに再度高さを取得するためのものです。
最初の「$(document)〜」の部分だけでも、画面サイズに合わせて高さを指定することができるのですが、ユーザーがウインドウサイズを変える可能性を考慮すると、「$(window)〜」の部分も記述しておくべきだと思います。
最後に
今回の記事では、要素の高さを画面サイズに合わせて指定する3つの方法を紹介しました。
・【height: 100%;】を使う方法
・【height: 100vh;】を使う方法
・【jQuery】を使う方法
これで、Web制作などをする際に、要素を画面サイズと同じにすることができますね！
頑張ってください！
最後まで読んで頂き、ありがとうございました(o^^o)
コメント