[ モバイルファースト] WebサイトにレスポンシブWebデザイン適用する手順

本記事では、サイト制作をしていく上では必須ともいえるレスポンシブデザインの活用方法についてご紹介させて頂いております。メディアクエリって何?? 使い方は?? など実際に講座を通して受けた質問内容を元に簡潔にまとめ、動くサンプルもご用意しておりますので、皆様の制作活動に役立てて頂ければと思います。

✅ レスポンシブデザインを理解する
✅ メディアクエリの活用法を身につけられる
✅ サンプルを用いた実践形式でさらにイメージを固める

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

今現在において、何かの申し込みやファイルの閲覧などもスマホやタブレットで出来てしまうことは当たり前になっております。

つまりユーザーが用いる端末(PC, タブレット, スマホ)の画面サイズに応じたデザインへ自動的に切り替わるように、各ページにおけるレイアウトをCSS(HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っているもの)を用いて用意する必要があるんですね。

このような技術のことをレスポンシブデザインと言います。

メディアクエリ : CSS記述方法

/*  
　　max-width: ◯◯px →  画面サイズが◯◯px以下〜 
   PC優先のレイアウトデザインを設定する際に使用
*/

@media screen and (max-width : ◯◯px) {
  /*   ここに画面サイズが◯◯px以下の場合のCSSを記述   */
}

/*  
　　min-width: ◯◯px →  画面サイズが◯◯px以上〜 
   スマホ優先つまりモバイルファーストのレイアウトデザインを設定する際に使用
*/

@media screen and (min-width : ◯◯px) {
  /*   ここに画面サイズが◯◯px以上の場合のCSSを記述   */
}

日本含め海外でも今は、モバイルファーストでのレイアウト設計が主流にはなっていますので、PC優先のレイアウト設計よりかは、スマホ優先のレスポンシブデザインが多く用いられています。

レスポンシブ化をしてみる(実践)

じゃあ、早速、必要なファイルを準備して、順番に実践をしてみましょう！

以下が今回、作成するDEMOページになります。

作成する前にコードのイメージを固めるためにも確認しておいてください。

DEMO

レスポンシブ_サンプル

HTMLファイル/CSSファイルを準備

まずは、ベースとなるHTMLファイルとCSSファイルを準備しましょう。

<!DOCTYPE html> 
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- CSSファイルを読み込み -->
        <link rel="stylesheet" href="res_sample.css">
    </head>
    <body>
        <!-- ヘッダー -->
        <header></header>
        <!-- メインコンテンツ -->
        <main>
            <div class="block">1</div>
            <div class="block">2</div>
            <div class="block">3</div>
        </main>
        <!-- フッター -->
        <footer></footer>
    </body>
</html>

body {  
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 100px;
    background-color: palegoldenrod;
}

main {
    width: 100%;
    height: 645px;
    padding-top: 5px;
    background-color: powderblue;
}

.block {
    width: 95%;
    height: 200px;
    display: flex;
    margin: 10px auto;
    justify-content: center;
    align-items: center;
    background-color: silver;
}

footer {
    width: 100%;
    height: 100px;
    background-color: palegoldenrod;
}

準備ができましたら、HTMlファイルをブラウザにて開いてみましょう。
今回は、モバイルファーストでのレイアウト設計を行っていきますので、モバイルの画面で以下のようになっていればOKです！

※ ブラウザの検証(開発者)ツールを用いて、確認してみましょう。

レスポンシブ化 (タブレットサイズ 651px~)

タブレットサイズの場合には、次のようにデザインを変更します。

ヘッダーとフッターの背景色 : ピンクっぽい色

以下のコードをCSSファイルの末尾に追加してください。

/* iPad Pro (タブレットサイズ) */ 
@media screen and (min-width : 651px) {
  header, footer {
      /*   黄色 →  ピンクへ変更  */
      backgtound-color: rgb(216, 191, 216);
  }
}

レスポンシブ化 (PCサイズ 1025px~)

内容を入力してください。

PCサイズの場合には、次のようにデザインを変更します。

1. ヘッダーとフッターの背景色 : 緑っぽい色
2. メインコンテンツ内のブロックを横並びにする
3. 横幅のサイズ: 30% , 垂直/水平方向にて中央寄せ
4. 高さ: 200px → 450px
5. 上下左右を10pxで指定
6. フォントのサイズ: 30px

以下のコードをCSSファイルの末尾に追加してください。

/* PCサイズ */
@media screen and (min-width : 1025px) {
  header, footer {
      /*  1  */
      backgtound-color: rgb(207, 255, 207);
  }

  main {
      /*  2  */
      display:flex;
      /*  水平方向にて中央寄せ  */
      justify-content:center;
      /*  垂直方向にて中央寄せ  */
      align-items:center;
  }
 
  .block {
      /*  3  */
      width: 30%;
      /*  4  */
      height:450px;
      /*  5  */
      margin:10px;
      /*  6  */
      font-size:30px;
  }
}