コンテンツへスキップ

Webサイトをレスポンシブ対応にする方法

responsive

一つのWebサイトをPCやタブレット、スマホなど
デバイスの画面によって表示の仕方を切り替えるデザインを
レスポンシブWebデザインと言います。

今日のスタンダードなサイト構築の手法となっており
Webサイトのレスポンシブ対応は必須と言えます。

今回はWebサイトをレスポンシブに対応させる方法を説明します。

手順

  1. <head>の中にviewportを書く
  2. CSSで@mediaを使う

<head>の中にviewportを書く

HTMLの<head>~</head>内に以下のメタタグを記入します。

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

CSSで@mediaを使う

CSSでは表示画面が一定の横幅になった時に切り替えたい要素を@mediaで囲みます。

表示画面が一定の横幅になり、切り替わるポイントをブレイクポイントと言います。

@mediaにブレイクポイントの位置を指定しておきます。

記述方法

以下に@mediaのあとに(min-width: 520px)とありますが

この部分がブレイクポイントの指定になります。

この場合は表示画面の横幅が520px以上の時に@mediaの内容に切り替えるということになります。

@media (min-width: 520px) {

/* ここに切り替えたい要素を入れる */

}

モバイルファーストを基準にした書き方

主にスマホからのアクセスを見込む場合の書き方になります。

ベースとなるCSSの記述はスマホで表示する前提で行います。

PCやタブレットで表示される要素は@mediaに記述します。

519px未満 → 文字：緑色／サイズ14px
520px以上 → 文字：赤色／サイズ16px

p {
  color: green;
  font-size: 14px;
}
@media (min-width: 520px) { /* 横幅520px以上 */
  p {
    color: red;
    font-size: 16px;
  }
}

@mediaを複数使う場合

519px未満 → 文字：緑色／サイズ14px
520px〜959px → 赤色／サイズが16px
960px以上 → 文字：青色／サイズ18px

p {
  color: green;
  font-size: 14px;
}
@media (min-width: 520px) { /* 横幅520px以上 */
  p {
    color: red;
    font-size: 16px;
  }
}
@media (min-width: 960px) { /* 横幅960px以上 */
  p {
    color: blue;
    font-size: 18px;
  }
}

PCでの表示を基準にした書き方

主にPCからのアクセスを見込む場合の書き方になります。

ベースとなるCSSの記述はPCで表示される前提で行います。

タブレットやスマホで表示される要素を@mediaに記述します。

520px以上 → 文字：緑色／サイズ14px
519px以下 → 文字：赤色／サイズ16px

p {
  color: green;
  font-size: 14px;
}
@media (max-width: 519px) { /* 横幅519px以下 */
  p {
    color: red;
    font-size: 16px;
  }
}

@mediaを複数使う場合

960px以上 → 文字：緑色／サイズ14px
959px〜520px → 文字：赤色／サイズ16px
519px以下 → 文字：青色／サイズ18px

p {
  color: green;
  font-size: 14px;
}
@media (max-width: 959px) { /* 横幅959px以下 */
  p {
    color: red;
    font-size: 16px;
  }
}
@media (max-width: 519px) { /* 横幅519px以下 */
  p {
    color: blue;
    font-size: 18px;
  }
}
タグ: