パソコン用サイト、モバイル用サイトを別々に制作せずに、画面幅の広さに応じてウェブサイト、ウェブページのレイアウトや構成が変化するものをレスポンシブデザインという。

もはや主流というか、そこまでウェブに詳しくないクライアントでも『レスポンシブデザインで』なんて依頼されるくらいに、ワードの認知度は定着している感がある。

さて、今回はこのレスポンシブデザインのウェブサイトを作る際に必ずと言っていいほどに採用する技術や手法などを紹介する。

viewport

レスポンシブデザインでは、画面幅に応じてレイアウトを変える必要があるので、サイトの幅=デバイスの幅となる。そのため、viewportの設定は以下の1択。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

picture

pictureタグを使って、その中に画面幅に応じて出力する画像を別々に設定できる。PC用レイアウトの場合とSP用レイアウトの場合で、別々の画像を表示させたい時には必ず使う。

以下は、PC(幅960px以上)ならlarge.jpgを表示、SP(幅480px以下)ならsmall.jpgを表示させる場合の例。

●IE11がpictureに対応していないので、IE11でpictureが有効になるJSを、以下CDNで読み込む。
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

●画像の配置
<picture>
  <source media="(min-width: 960px)" srcset="large.jpg">
  <source media="(min-width: 481px)" srcset="small.jpg">
  <img src="symm-top-small.jpg">
</picture>

電話番号リンクの切り替え

PC用サイトでは、電話番号をクリックして電話することはないが、SP用サイトはスマホで閲覧するので、電話番号クリックでそのまま電話が掛かって欲しい。

ただ、レスポンシブデザインだとSP用にリンクを付けたつもりでも、PCレイアウトでもリンクが残ってしまう。それを解消する(PCの時はリンクを無効にする)方法はよく使う。

●電話番号リンクを普通に設置
<a href="tel:00000000000">000-0000-0000</a>

●CSSで特定の画面幅以上になったら、リンクイベントを無効にする設定をするだけ
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

蛇足

PCとSPで別々の画像を表示させたい場合、昔はこんな感じでdisplay:hidden;を駆使して、画面幅ごとに不要な画像を非表示にして、って感じでやってたのに、気が付いたらそんなことしないでも行けるような便利な世の中になってるという。

<img class="img-pc" src="large.jpg">
<img class="img-tab" src="medium.jpg">
<img class="img-sp" src="small.jpg">

.img-sp {
    display: block;
  }
  .img-pc
  .img-tab {
    display: none;
 }
@media only screen and (min-width: 481px) {
    .img-tab {
      display: block;
    }
    .img-pc,
    .img-sp {
      display: none;
    }
  }
@media only screen and (min-width: 960px) {
    .img-pc {
      display: block;
    }
    .img-tab,
    .img-sp {
      display: none;
    }
}