[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック

Post on:2014年11月10日

sponsors

フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。

高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。

次のセクションが見えるのは、こんな感じです。

このサイトではスクリプトでヘッダセクションの高さを90%に設定しています。

Frickrではセクションの高さを100%にセットしています。

こういったサイトの多くはレイアウトを達成するために、スクリプトを使用していますが、たった一行のスタイルシートで実現することが可能です。

このデモページではヘッダセクションを90%の高さに、残りのセクションを100%の高さにスタイルシートで設定しています。

高さを設定するのは、たった一行のスタイルシートです。

.section { height: 100vh; }

単位「vh」とは「viewport height」の略で、1vhはブラウザの高さの1%になります。

100%にしたい時は「100vh」、90%にしたい時は「90vh」を指定すればOKです。

「vh」はChrome, Safari, Opera, Firefox, IEは9+で利用できます。