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

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

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

サイトのキャプチャ

Make full screen sections with 1 line of CSS

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

サイトのキャプチャ

Exposure

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

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

サイトのキャプチャ

Flickr

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

サイトのキャプチャ

Full screen sections with CSS

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

高さを設定するスタイルシート

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

.section { height: 100vh; }

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

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

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

サイトのキャプチャ

vhの各ブラウザのサポート状況

sponsors

top of page

©2018 coliss