レスポンシブWebデザインを学ぼうと思った動機

「レスポンシブWebデザイン」を聞いたことあるが全体像を把握できてなかった。
今回は、「レスポンシブWebデザイン」の全体像の把握するのと共にソースに起こして体系的に学んだ。
アジェンダは、以下の通り。

本投稿のアジェンダ

レスポンシブWebデザインとは
レスポンシブWebデザインを実現するテクニック
- フルードグリッド
- フルードイメージ
- メディアクエリ、ブレイクポイント
実際にレスポンシブデザインを体系的に学習
まとめ

学習手段

レスポンシブWebデザインの勉強は、以下の書籍で行った。

書籍

いちばんよくわかるHTML5＆CSS3デザインきちんと入門
 Bootstrap 4 フロントエンド開発の教科書

レスポンシブWebデザインとは

「レスポンシブWebデザイン」とは、簡単に説明すると画面をスマホやPC上で表示させた際に画面サイズに応じて適切なレイアウトで表示するデザインのこと。
「レスポンシブWebデザイン」を導入することでスマホ用とPC用で画面レイアウトを分けなくて済むので二重管理の手間が省ける。

レスポンシブWebデザインを実現するテクニック

レスポンシブWebデザインで使われるテクニックをマインドマップでまとめた。

レスポンシブWebデザインを実現するテクニックは、以下の通り。

フルードグリッド(Fluid Grid:可変グリッド)

「グリッドシステム」によるWebデザインとブラウザ幅の変化に応じて内容の大きさを変える「リキッドレイアウト」を組み合わせた手法のこと。
※単語補足情報
グリッドシステム: レイアウトを格子状に分解して配置するデザイン手法
リキッドレイアウト: レイアウトの幅が変更されたとしても元のレイアウトを維持する手法

フルードイメージ(Fluid Image:サイズが変化する画像メディア)

レイアウト幅に応じて、画像サイズを拡大・縮小させるテクニックのこと。
「フルードグリッド」との組み合わせで画像サイズをグリッド幅に応じて柔軟に変化させることができる。

メディアクエリ、ブレイクポイント

「メディアクエリ」は、画面幅や画像の解像度など様々な条件に応じてスタイルを切り替えることができるテクニックのこと。
主に画面のサイズが変化した時のスタイル指定などに使われる。
「レスポンシブWebデザイン」では、画面の幅が拡大・縮小する毎にレイアウトを柔軟に変化する。レイアウトが変化する境目の値を「ブレイクポイント」という。

※「モバイルファーストCSS」と「デスクトップファーストCSS」について
メディアクエリで囲まれていない部分をベースデザインとした時にベースとなるCSSでスマホ向けのデザインを仕上げてからメディアクエリを使ってPC向けのCSSを追加することを「モバイルファーストCSS」という。
逆にベースデザインを先にPC向けに仕上げる手法を「デスクトップファーストCSS」という。

実際にレスポンシブデザインを体系的に学習

実際にレスポンシブWebデザインは、どのようなものなのか体系的に学習する。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>responsive</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <p class="responsive-1">responsive1</p>
      <p class="responsive-2">responsive2</p>
    </div>
  </body>
</html>

style.css

@charset "utf-8";

/* === デフォルトCSS削除 === */
body {
  margin: 0;
}

/* === レスポンシブデザインの実現 === */

/* フレックスボックスを使いたい要素の親要素 */
.container {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}

/* フレックスボックスを使う要素のスタイル */
p {
  padding: 16px 0 0 18px;
  height: 128px;
  color: white;
  font-weight: bold;
  background: skyblue;
}

/* === 画面幅が768px以上になったときのスタイル === */
@media only screen and (min-width: 768px) {
  /* 要素を横並びにする */
  .container {
    flex-flow: row;
  }

  .responsive-1 {
    flex: 1 1 auto;
  }

  .responsive-2 {
    flex: 0 0 auto;
    background-color: brown;
  }
}

上記のソースでの抑えておきたいポイントは、2つある。
1つ目は、フレックスボックスを指定する要素の親要素に指定する「display: flex;」である。
「レスポンシブWebデザイン」を実現するには、フレックスボックスを使う要素の親要素に「display」プロパティを指定し、「value」にflexを指定する必要がある。

2つ目は、「@media only screen and (min-width: 768px) {}」である。
これがメディアクエリと言われるもので画面の幅に応じてレイアウトを変えることができる。
ちなみに768pxがブレイクポイントを指す。

・画面が768px未満だった場合

・画面が768px以上だった場合

768px以上になったときのレイアウトが適用されているのが確認出来る。

さいごに

様々な画面の幅に柔軟に対応できる「レスポンシブWebデザイン」を使いこなせることでメリットがたくさんあるので、今回学んだことは頭に叩きこみます！！！

レスポンシブデザインについて