CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。
例えば次の例のように各セクションをブラウザいっぱいに広げることです。（コードと解説はこちら）
セクションをブラウザいっぱいに広げたサンプル
ビューポート基準の単位も多くのブラウザが対応してきていますので、まさにこれからが使いどころです。今流行りのページを作成する上で便利になりますので上手に使っていきましょう。
各ブラウザサポート状況はこちら
vhとvwの使い方
ビューポートとはスマートフォンで使用される概念です。簡単に言ってしまえば表示領域のことです。PCの場合はブラウザの表示領域を表します。
この新しい単位の何が良いかとというと、ルートを基準にした単位だということです。今表示しているデバイスの表示領域からの割合を指定することができます。
つまりパーセント指定のように親子関係を気にしなくても良いところがポイントです。
ビューポート基準単位の種類
- vw
- 「viewport width」ビューポートの幅に対する割合
- vh
- 「viewport height」 ビューポートの高さに対する割合
- vmin
- 「viewport minimum」ビューポートの幅と高さのうち、値が小さい方に対する割合
- vmax
- 「viewport max」ビューポートの幅と高さのうち、値が大きい方に対する割合
ビューポート基準単位の使い方
簡単サンプルで試してみましょう。
divの入れ子状態を作り、それぞれのdivに幅と高さをvw,vh単位を使用します。
ブラウザの幅と高さに応じてdivのサイズが変更されます。それぞれ、ブラウザの幅を基準にした割合で描画されます。
子要素の「.content」の幅はブラウザの幅に対して30％になり、親要素に依存してないことがわかります。
HTMLコード
<div class="wrapper"> <div class="content">AAA</div> </div>
CSSコード
.wrapper{
width:50vw;
background:pink;
height:50vh;
}
.content{
width:30vw;
background:yellow;
height:20vh;
}
応用例
背景画像を画面いっぱいに広げる方法
背景画像を画面いっぱいに広げることも簡単にできます。
ある要素の背景に画像を設定してそれをブラウザやデバイスの画面いっぱいに広げるには、旧来の方法では「width」と「height」を100％に指定するのですが、特にheightの指定が面倒でした。ある要素にいきなりheightの指定をしても思うようになりません。これは親要素に対してのパーセンテージを設定しなければならないためです。
しかし、ビューポート基準の単位を使用すれば、いきなりある要素に「100vw」と「100vh」を指定すればよいのです。
また、背景画像（background-image）自体の伸縮は「background-size:cover」を使用します。
「background-size」をショートハンドで使用する場合には位置指定（centerなど）のあとに/を付ける必要があります。
HTMLコード
<div class="wrapper"></div>
cssコード
body{
margin:0;
padding:0;
}
.wrapper{
width:100vw;
height:100vh;
/*background-sizeをショートハンドにする場合位置指定のあとに/を付けること*/
background:url(red1.jpg) center/cover;
}
セクションを画面いっぱいに広げる方法
次のサンプルは「スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編」のサンプルも少し手を加えたものです。
これは各セクション部分を画面いっぱいに広げたものです。
作成方法は、ビューポート基準の単位を使用して、各sectionに「100vw」と「100vh」を指定することがポイントです。
ただ注意しなければならないことがあります。それは「100vw」や「100vh」はあくまでも見えている画面内で100％になるということでページ全体に広がるわけではないことです。
そのため、今回のようなサンプルではセクションの内容が完全に表示領域に入るようにしなければ不具合がでます。つまりコンテンツが表示領域からあふれ出てしまいます。「overflow」プロパティで対処はできますが、使い勝手の悪いものになります。コンテンツ作成のときに十分設計を行ってから使うようにしましょう。
今回のサンプルはPC用ではフォントサイズを16px、スマートフォンサイズでは14pxにして表示領域を変えています。remを使うとフォントサイズの指定が簡単になりますのでスマートフォンサイトでは積極的に使いたい単位です。
サンプルのナビゲーションなど可動部分の説明は「スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編」を参考にしてください。
HTMLコード
<header>
<span>Header</span>
</header>
<div class="gnav-btn">
<div class="icon-animation">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
<nav class="global">
<ul class="gnav">
<li><a href="#sec1">menu1</a></li>
<li><a href="#sec2">menu2</a></li>
<li><a href="#sec3">menu3</a></li>
<li><a href="#sec4">menu4</a></li>
<li><a href="#sec5">menu5</a></li>
</ul>
</nav>
<div class="wrapper">
<h1>sample</h1>
<article>
<section class="sec1">
<h2 id="sec1">section1</h2>
<img src="http://lorempixel.com/400/200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
</section>
<section class="sec2">
<h2 id="sec2">section2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
</section>
<section class="sec3">
<h2 id="sec3">section3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
</section>
<section class="sec4">
<h2 id="sec4">section4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
</section>
<section class="sec5">
<h2 id="sec5">section5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt autem doloremque, ab iusto quos consequuntur architecto molestiae quibusdam rerum sit eum sint itaque fuga exercitationem, aspernatur velit. Veritatis, cum, deserunt.</p>
</section>
</article>
</div>
<footer>Footer</footer>
CSSコード
html{
font-size:62.5%;
}
body,
ul,
li {
font-size:1.4rem;
margin: 0;
padding: 0;
}
section{
box-sizing: border-box;
width: 100vw;
height: calc(100vh + 55px);
padding:1rem;
overflow: hidden;
}
.sec1{
background-color: rgb(147, 140, 176);
}
.sec2{
background-color: rgb(165, 176, 140);
}
.sec3{
background-color: rgb(176, 167, 140);
}
.sec4{
background-color: rgb(176, 140, 173);
}
.sec5{
background-color: rgb(176, 154, 140);
}
.wrapper {
box-sizing: border-box;
padding: 1px 0;
margin-top: 40px;
background-color: rgb(147, 140, 176);
}
img {
max-width: 100%;
height: auto;
}
header {
box-sizing: border-box;
background: #333;
color: #ccc;
padding: 1.5rem;
position: fixed;
width: 100%;
top: 0;
z-index: 98;
}
footer {
box-sizing: border-box;
background: #ccc;
padding: 1rem;
bottom: 0;
width: 100%;
}
/*nabi開閉部分*/
.gnav li {
border-bottom: 1px solid #333;
}
.gnav li a {
display: block;
text-decoration: none;
/* (44-16)/2=14px */
padding: .875rem 1rem;
}
.gnav {
list-style-type: none;
background: #eee;
display: block;
width: 70%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
left: 0;
top: 55px;
z-index: 99;
visibility: hidden;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.gnav.on {
visibility: visible;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.modal {
background-color: rgba(255, 255, 255, .5);
width: 100%;
height: 100%;
left: 0;
opacity: .1;
position: fixed;
top: 0;
z-index: 97;
visibility: hidden;
webkit-transition: visibility 0 linear .4s, opacity .4s;
-moz-transition: visibility 0 linear .4s, opacity .4s;
transition: visibility 0 linear .4s, opacity .4s;
webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.modal.on {
opacity: 1;
webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
visibility: visible;
}
/*ハンバーガーボタン*/
.icon-animation {
width: 44px;
height: 44px;
display: block;
cursor: pointer;
position: fixed;
right: .5rem;
top: .5rem;
text-align: center;
z-index: 99;
}
.icon-animation span {
width: 44px;
height: 1px;
display: block;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -22px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.icon-animation .top {
-webkit-transform: translateY(-13px);
-ms-transform: translateY(-13px);
transform: translateY(-13px);
}
.icon-animation .bottom {
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
transform: translateY(13px);
}
.is-open .middle {
background: rgba(51, 51, 51, 0)!important;
}
.is-open .top {
-webkit-transform: rotate(-45deg) translateY(0px);
-ms-transform: rotate(-45deg) translateY(0px);
transform: rotate(-45deg) translateY(0px);
}
.is-open .bottom {
-webkit-transform: rotate(45deg) translateY(0px);
-ms-transform: rotate(45deg) translateY(0px);
transform: rotate(45deg) translateY(0px);
}
@media (min-width:736px) {
body{
font-size:1.6rem;
}
header {
display: block;
}
h2{
padding-top:60px;
}
.global {
width: 100%;
position: relative;
/*ナビ中央そろえ*/
overflow: hidden;
/*ナビ中央そろえ*/
}
.gnav-btn {
display: none;
}
.gnav {
list-style-type: none;
background-color: inherit;
display: block;
overflow: visible;
/*ナビ表示*/
position: fixed;
/*ナビ中央そろえ*/
width: auto;
left: 50%;
/*ナビ中央そろえ*/
top: 0;
z-index: 99;
visibility: visible;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.gnav li {
border-bottom: none;
width: auto;
position: relative;
/*ナビ中央そろえ*/
left: -50%;
/*ナビ中央そろえ*/
float: left;
/*ナビ中央そろえ*/
}
.gnav li a {
display: block;
text-decoration: none;
padding: 1.5rem 0.5rem;
color: #fff;
}
}
jQueryコード
$(function() {
$(‘body’).append(‘
‘);
var gnav = $(‘.gnav’);
var modal = $(‘.modal’);
var gnavbtn = $(‘.gnav-btn’);
$(window).resize(function() {
gnav.css(‘transition’, ‘none’);
modal.removeClass(“on”);
gnav.removeClass(“on”);
gnavbtn.removeClass(‘is-open’);
});
gnavbtn.on(‘click’, function() {
$(this).toggleClass(‘is-open’);
gnav.css(‘transition’, ‘.5s .1s cubic-bezier(0, 0, .2, 0)’).toggleClass(‘on’);
modal.toggleClass(‘on’);
});
modal.on(‘click’, function() {
modal.removeClass(“on”);
gnav.removeClass(“on”);
gnavbtn.removeClass(‘is-open’);
});
$(window).on(‘load resize’, function() {
var timer = false;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
if (window.matchMedia(“(max-width:737px)”).matches) {
//737px以下の場合
$(window).on(‘scroll’, function() {
if ($(this).scrollTop() < 100) {
$('header').fadeIn();
$('.icon-animation span').css('background-color', '#fff');
} else {
$('header').fadeOut();
$('.icon-animation span').css('background-color', '#000');
}
});
} else if (window.matchMedia("(min-width:736px)").matches) {
$(window).off('scroll');
$('header').show();
$('.icon-animation span').css('background-color', '#fff');
}
}, 200);
})
/*リンクの動きをゆっくり移動にするスクリプト*/
$("a[href*=#]").click(function() {
$('html,body').animate({
scrollTop: $($(this).attr("href")).offset().top - 0
}, 'slow', 'swing');
/*クリックしたらナビを閉じる動作*/
modal.removeClass("on");
gnav.removeClass("on");
gnavbtn.removeClass('is-open');
//リンクを無効
return false;
})
});
[/js]
コメントを投稿するにはログインしてください。