【CSS/jQuery】超簡単!画面サイズに合わせて高さを指定する3つの方法

プログラミング

おはこんばんにちは!ノボルです。

Web制作をしてるんだけど、要素の高さを画面サイズに合わせて指定する方法ってないの?

簡単な方法が3つあるから紹介するね!

Webサイトなどで、要素が画面サイズと同じになっていることがありますよね。

要素を横幅いっぱいに指定するなら「width: 100%;」でいいのですが、高さを画面サイズに合わせるには、どうしたらいいのでしょうか?

そこで今回は、要素の高さを画面サイズに合わせて指定する3つの方法を紹介します。

【height: 100%;】を使う方法

See the Pen NWPzLBr by monkey d ruffy (@ruffy126) on CodePen.

1つ目の方法は、各セクションに「height: 100%;」を指定するやり方です。

ただし、画面サイズに合わせて表示したい要素に「height: 100%;」を指定するだけでは、うまくいきません。

というのも、「height: 100%;」を指定するには、親要素の高さが決まっている必要があるからです。

そこで、親要素のbody要素とhtml要素にも「height: 100%;」を指定してあげましょう。

【height: 100vh;】を使う方法

See the Pen ExaReeR by monkey d ruffy (@ruffy126) on CodePen.

2つ目の方法は、「height: 100vh;」を指定するやり方です。

vh」とは、viewpoint heightの略で、「1vh=1%の高さ」となります。

この方法が最もコードの記述量が少なくて簡単ですが、対応するブラウザが「IE9以上」という点に注意してください。

IE以外のブラウザーでは、問題なく動作します!

【jQuery】を使う方法

See the Pen xxbzapz by monkey d ruffy (@ruffy126) on CodePen.

3つ目の方法は、jQueryを使うやり方です。

jQueryでウィンドウの高さを取得し、その値をCSSに書き込むことで、要素の高さを画面サイズに合わせて指定することができます。

$(window)〜」の部分は、ユーザーが画面サイズを変えたときに再度高さを取得するためのものです。

最初の「$(document)〜」の部分だけでも、画面サイズに合わせて高さを指定することができるのですが、ユーザーがウインドウサイズを変える可能性を考慮すると、「$(window)〜」の部分も記述しておくべきだと思います。

最後に

今回の記事では、要素の高さを画面サイズに合わせて指定する3つの方法を紹介しました。

今日のおさらい

・【height: 100%;】を使う方法

・【height: 100vh;】を使う方法

・【jQuery】を使う方法

これで、Web制作などをする際に、要素を画面サイズと同じにすることができますね!

頑張ってください!

最後まで読んで頂き、ありがとうございました(o^^o)

【CSS】position: absolute;で要素を中央寄せする方法【プログラミング】
おはこんばんにちは!ノボルです。 CSSの勉強してるんだけど、「position: absolute;」を使って要素を中央寄せすることってできるの? もちろんできるよ!サクッと説明するね。 そこで今回は、「position: absolut...
【CSS】超簡単!コピペで作れるオシャレなボックスデザイン30選!
おはこんばんにちは!ノボルです。 ブログでボックスデザインを作りたいんだけど、どうやってするの? という方のために、今回は、完全コピペで作れるボックスデザインを30個紹介します。全てレスポンシブ対応で、HTMLとCSSのコピペだけで使うこと...
【CSS】マウスを乗せたときにボーダーが伸びるアニメーション
おはこんばんにちは!ノボルです。 今回は、マウスを乗せたとき(マウスオーバー)にボーダーが伸びるCSSアニメーションをご紹介します。 コードだけだとイメージがつかないかもしれないので、CodePenで動きが確認できるようにしました! ほぼコ...

コメント

タイトルとURLをコピーしました