レスポンシブデザインの体験

レスポンシブデザイン（Responsive Design）とは

デバイスの画面（ウィンドウ）幅や解像度に合わせてレイアウトを変化させる技法のこと
responsive=反応する
コンピュータ〜タブレット〜スマートフォン、各サイズについて、複数のサイトを用意せず、１つのウェブサイトデータで対応させる
現在では、多くのサイトで、コンピュータよりスマートフォンからの閲覧が多数を占めることもあり「スマートフォン向けサイトを優先的に制作する」モバイルファーストで制作することが主流
レスポンシブデザイン（ウィキペディア）
レスポンシブデザイン（Mozilla）
レスポンシブデザイン（Google画像）

コンピュータ上でのレスポンシブデザインのシミュレーション

ウィンドウ幅を広くする〜狭くする
ブラウザのレスポンシブデザインモード（開発モード）を使う

レスポンシブデザインの体験

ウィンドウ幅を変化させたときに、どのようにコンテンツが変化するのかをコードで確かめます。

【準備】

responsive_sample_01 フォルダを作成します
index.html を作成し、フォルダに保存します。HTMLには、基本のコードを入力しておきます（tab + ! で入力）
style.css を作成し、フォルダに保存します。
index.htmlの<head>要素内に下記を追加し、CSSをリンクします。（</head>の直前に挿入）

<link rel="stylesheet" href="style.css">

幅の設定のテスト

①<head>にviewportの記述があることを確認します。記述がない場合は、追記します。

▼index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!--中略-->

補足：これは何をしているコードか？

決まり文句のように挿入されるコードですが、次のような意味があります。レスポンシブデザインでの設計には必須になります。

name="viewport"
表示領域（ビューポート）についてのルールを設定するという宣言

content="width=device-width"
ページの横幅（width）を、アクセスしてきた端末の横幅（device-width）と同じにする。この設定がない場合、スマホ（横幅約400px）で開いているにも関わらず、ブラウザは「PC用の980pxの画面」としてページを読み込んでしまいます。

initial-scale=1
最初にページを開いたときの拡大倍率（scale）を、1倍（1 ＝ 100%）に設定する。スマホを縦位置から横位置に回転させた際に、不自然にズームされるのを防ぎ、等倍（100%）で見せるための設定です。

②widthの設定の違いによる差を確認するため、ベースとなるHTMLを入力します。

▼index.html（<body>に挿入）

  <header>
    <h1>レスポンシブデザインの体験</h1>
  </header>

  <main>
    <section class="width-test">
      <h2>1.幅のテスト</h2>

      <h3>A. 固定 (width: 500px)</h3>
      <div class="box-base box-fixed">ブラウザを狭くすると画面からはみ出します</div>

      <h3>B. 流動 (width: 100%)</h3>
      <div class="box-base box-fluid">ブラウザに合わせて伸び縮みします</div>

      <h3>C. ハイブリッド (max-width: 500px)</h3>
      <div class="box-base box-ideal">基本は100%ですが、500px以上には広がりません</div>
    </section>

  </main>

  <footer>
    <p>&copy; Webデザイン演習</p>
  </footer>

③CSSを設定します。3つのボックスに共通の装飾と、ボックス毎の装飾とに分けて記載します。

▼style.css

@charset "UTF-8";

/* 1.幅のテスト */

/* 共通の装飾 */
.box-base {
  height: 100px;
  margin-bottom: 30px;
  padding: 20px;
  color: white;
  font-weight: bold;
}

/* A. 固定 */
.box-fixed {
  width: 500px;
  background-color: #e74c3c; /* 赤 */
}

/* B. 流動 */
.box-fluid {
  width: 100%;
  background-color: #3498db; /* 青 */
}

/* C. ハイブリッド */
.box-ideal {
  width: 100%;
  max-width: 500px;
  background-color: #2ecc71; /* 緑 */
}

④ブラウザでウィンドウ幅を変化させながら確認します。

レスポンシブデザインをする上では、画面・ウィンドウ幅に応じて変化するように、500pxのような固定幅にせず、% による相対的なサイズ指定にすることが重要です。

スマートフォン・タブレット・PCの各サイズで切り替える

⑤画面・ウィンドウ幅に応じて背景色を切り替える設定をします。まず、HTMLから入力します。

▼index.html（先ほどの</section>の後に挿入）

    </section>

    <section class="media-query-test">
      <h2>2.メディアクエリ</h2>
      <div class="responsive-test">
        <p><span class="mode-text">現在のモード：</span></p>
        <p>ブラウザの横幅をゆっくり動かしてみてください。</p>
      </div>
    </section>

  </main>

⑥CSSを入力します。

▼style.css

/* 2. メディアクエリ */

/* スマホサイズの設定（モバイルファースト） */
.responsive-test {
    background-color: #ffeb3b; /* 黄 */
    padding: 50px;
    text-align: center;
}

.mode-text {
    font-size: 1.2em;
    font-weight: bold;
}

.mode-text::after {
    content: "スマホ版 (767px以下)";
}

/* タブレット以上のサイズ（768px以上） */
@media (min-width: 768px) {
    .responsive-test {
        background-color: #ff9800; /* オレンジ */
    }
    
    .mode-text::after {
        content: "タブレット版 (768px以上)";
    }
}

/* PCサイズ（1024px以上） */
@media (min-width: 1024px) {
    .responsive-test {
        background-color: #00bcd4; /* シアン */
    }
    
    .mode-text::after {
        content: "PC版 (1024px以上)";
    }
}

ブレイクポイント

画面の切り替わるポイントです。例えば下記のような設定方法があります（数値は例です）。実際には、ヘッダーやナビゲーションなどの画面上に配置された要素がバランスよく見える位置で切り替えることもあります。

コンピュータ　1024px以上
タブレット　768〜1023px
スマートフォン　〜767px

CSSフレームワークでは、さらに細分化されたブレイクポイントを採用しています。

※CSSフレームワークとは、レイアウトを構築するためのCSSコードがまとめられたテンプレートのことです。

メディアクエリ

ある条件を満たした際に有効になる設定の書き方です。レスポンシブデザインの場合は、画面・ウィンドウ幅を基準に条件を設定します。

モバイルファーストでの作成の場合、スマートフォンサイズ用の設定を最初に記述し、画面サイズが大きい端末用の設定を下に追加していきます。スマートフォン→タブレット→コンピュータの順での記述になります。

min-widthに設定したサイズ以上の場合に { } 内のCSSを適用する、という意味です。

/*スマホ用*/
 
/*タブレット用   768px以上〜*/
@media (min-width: 768px) {
 
}
 
/*コンピュータ用   1024px以上〜*/
@media (min-width: 1024px) {
 
}

コンピュータ（画面が大きい端末）を基準に作成した場合は、画面サイズが小さい端末用の設定を、下に追加していきます。コンピュータ→タブレット→スマートフォンの順での記述になります。

max-widthに設定したサイズ以下の場合に { } 内のCSSを適用する、という意味です。

/*コンピュータ用*/
 
/*タブレット用 1023px以下〜*/
@media (max-width: 1023px) {
 
}
 
/*スマホ用 767px以下〜*/
@media (max-width: 767px) {
 
}

作成例：https://ngsm-syr.github.io/responsive_sample_00/
コード：https://github.com/ngsm-syr/responsive_sample_00/

参考リンク