CSS3の新しい単位〜vhとvw

HTML&CSS

CSS3ではビューポートを基準にした単位vhとvwが導入されました。地味ですね、単位ですから。けれどもこれのおかげで色々なことが簡単にできるようになります。
例えば次の例のように各セクションをブラウザいっぱいに広げることです。（コードと解説はこちら）
vw1
セクションをブラウザいっぱいに広げたサンプル

ビューポート基準の単位も多くのブラウザが対応してきていますので、まさにこれからが使いどころです。今流行りのページを作成する上で便利になりますので上手に使っていきましょう。
各ブラウザサポート状況はこちら

スポンサーリンク

vhとvwの使い方

ビューポートとはスマートフォンで使用される概念です。簡単に言ってしまえば表示領域のことです。PCの場合はブラウザの表示領域を表します。
この新しい単位の何が良いかとというと、ルートを基準にした単位だということです。今表示しているデバイスの表示領域からの割合を指定することができます。
つまりパーセント指定のように親子関係を気にしなくても良いところがポイントです。

ビューポート基準単位の種類

vw
「viewport width」ビューポートの幅に対する割合
vh
「viewport height」 ビューポートの高さに対する割合
vmin
「viewport minimum」ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax
「viewport max」ビューポートの幅と高さのうち、値が大きい方に対する割合

ビューポート基準単位の使い方

簡単サンプルで試してみましょう。
divの入れ子状態を作り、それぞれのdivに幅と高さをvw,vh単位を使用します。
ブラウザの幅と高さに応じてdivのサイズが変更されます。それぞれ、ブラウザの幅を基準にした割合で描画されます。
子要素の「.content」の幅はブラウザの幅に対して30％になり、親要素に依存してないことがわかります。

vw,vhを使用した簡単サンプル

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]

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS lecture
スポンサーリンク
シェアする
dororoをフォローする
dororo
IT工房｜AI入門とWeb開発｜エンジニアのグルメ日記
スポンサーリンク
タイトルとURLをコピーしました