Viewport Units

表示領域が変更されるたびに値が変わるレスポンシブな単位

使いどころ

スマホサイトの文字サイズ指定

サンプル： https://jobtech.jp/data/vwvh.html

HTML

文字サイズを「vw」で指定することで画面幅の違う端末でも改行位置を揃えることができ、端末による表示の差異をなくせます。

  <div class="box content">
    <div class="inner">
      <h1>各端末で改行位置を揃える</h1>
      <h2>スマホ時に文字サイズを「px」指定</h2>
      <div class="test1">
        <p>わたしたちは、氷砂糖をほしいくらゐもたないでも、きれいにすきとほつた風をたべ、桃いろのうつくしい朝の日光をのむことができます。
          またわたくしは、はたけや森の中で、ひどいぼろぼろのきものが、いちばんすばらしいびろうどや羅紗らしやや、宝石いりのきものに、かはつてゐるのをたびたび見ました。
          わたくしは、さういふきれいなたべものやきものをすきです。</p>
      </div>
      <h2>スマホ時に文字サイズを「vw」指定</h2>
      <p>左右余白等もvwで指定しないと微妙に改行位置が変わるので注意</p>
      <div class="test2">
        <p>わたしたちは、氷砂糖をほしいくらゐもたないでも、きれいにすきとほつた風をたべ、桃いろのうつくしい朝の日光をのむことができます。
          またわたくしは、はたけや森の中で、ひどいぼろぼろのきものが、いちばんすばらしいびろうどや羅紗らしやや、宝石いりのきものに、かはつてゐるのをたびたび見ました。
          わたくしは、さういふきれいなたべものやきものをすきです。</p>
      </div>
    </div>
  </div>

CSS

/**
 スマホ用デザイン
*/
@media screen and (max-width: 480px) {
  /* コンテンツ */
  .content .test1 {
    font-size: 16px;
  }

  .content .test2 {
    font-size: 5vw;
  }
}

iPhone 5/SE

iPhone 6/7/8

iPhone 6/7/8 plus

ヒーロー画像設定

ファーストビュー全面を覆うようなカバー写真を設定できます。

サンプル１： https://jobtech.jp/data/hero01.html

HTML

  <div class="box hero">
    <div class="inner">
      <div class="mainTitle">ヒーロー画像</div>
      <div class="subTitle">ファーストビューを覆うようなデザイン</div>
    </div>
  </div>

CSS

/* ヒーロー */
.hero {
  /* 背景画像 */
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-attachment: fixed;
  /* 幅と高さ */
  width: 100vw;
  height: 100vh;
}

.hero .mainTitle {
  /* 文字 */
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  /* 位置調整 */
  text-align: center;
  padding-top: 40vh;
}

.hero .subTitle {
  /* 文字 */
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  /* 位置調整 */
  text-align: center;
}

/**
 スマホ用デザイン
*/
@media screen and (max-width: 480px) {
  /* ヒーロー */
  .hero .mainTitle {
    /* 文字 */
    font-size: 8vw;
  }

  .hero .subTitle {
    /* 文字 */
    font-size: 5vw;
  }
}

PC

iPhone

iPhoneで「background-size: cover;」と「background-attachment: fixed;」を同時に指定すると画像の一部だけ大きく表示されるバグがあります。

iOS has an issue preventing background-attachment: fixed from being used with background-size: cover - see details

https://caniuse.com/#search=background-attachment

そのため、スマホ時デザインでは「background-attachment: fixed;」を「background-attachment: scroll;」に変更します。変更したものが「サンプル２」になります。

サンプル２： https://jobtech.jp/data/hero02.html

HTML

サンプル１から特に変更なし

CSS

「background-attachment: fixed;」を「background-attachment: scroll;」に変更

@media screen and (max-width: 480px) {
  /* ヒーロー */
  .hero {
    background-attachment: scroll;
  }
}