Learning site for website creation

レスポンシブな単位

  • 投稿日:2020年07月05日
  • 更新日:2020年07月07日

Viewport Units

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

vw
(Viewport Width)

表示領域(viewport)の幅を基準

1vwはviewportの幅の1%に相当

vh
(Viewport Height)

表示領域(viewport)の高さを基準

1vhはviewportの高さの1%に相当する

vmin
(Viewport Minimum)

表示領域(viewport)の(高さと幅のうち)小さいほうの値を基準

viewportの高さが幅より小さい場合、1vminはviewportの高さの1%に相当

同様にviewportの幅が高さより小さい場合、1vminはviewportの幅の1%に相当

vmax
(Viewport Maximum)

表示領域(viewport)の(高さと幅のうち)大きいほうの値を基準viewportの高さが幅より大きい場合、1vmaxはviewportの高さの1%に相当

同様にviewportの幅が高さより大きい場合、1vmaxはviewportの幅の1%に相当

使いどころ

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

サンプル: 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

ヒーロー画像設定

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

サンプル1: 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;」を同時に指定すると画像の一部だけ大きく表示されるバグがあります。

2020年7月時点

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;」に変更します。変更したものが「サンプル2」になります。

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

HTML

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

CSS

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

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