スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画面サイズに合わせて高さを指定する3つの方法

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

height-max.png

簡単なデモを作っていますのでご覧ください。

画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。

section { background: url(image.jpg) no-repeat fixed; background-size: cover; }

では、高さの指定方法を100%を例に3つ紹介します。

jQueryを使う

まずは、jQueryを使う方法です。個人的には1番なじみがあります。

$(document).ready(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});
$(window).resize(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});

ウィンドウの高さを取得して、その値をCSSに書き込みます。

後半部分はユーザーがウインドウサイズを変えたときにあらためて高さを取得しなおすためのものです。

前半の部分だけにしているサイトをたまに見かけますが、途中でウインドウサイズを変えるユーザーを考慮して、後半部分も指定した方がよいと思います。

height: 100%を使う

各セクションにheight: 100%;を指定する方法です。

ただし、画面いっぱいに表示したい要素に対してheight: 100%;を指定するだけでは、思うようになりません。

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

html, body { height: 100%; }

htmlにcssを指定するのは個人的に違和感もありますが、これを指定することで解決します。

height: 100vh;を使う

height: 100vh;を指定すると、高さが画面の高さと同じになります。これが1番簡単ですが、対応するブラウザがIE9以上となります。IE以外は問題なく使えます。

IE7ならともかく、IE8となるとまだ無視できない場合も多いかもしれないです。

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

まとめ

ということで、要素の高さを画面サイズに合わせる方法を3つ紹介しました。

height: 100vh;がブラウザを気にせず使えるようになればベストな選択肢になると思います。

近頃はスマホ、タブレット、PCなど様々な環境で閲覧するユーザーがいますので、その環境に応じた設定が重要になっているのかなと感じています。

そんなとき、今回のような指定方法は便利になってくると思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。