C-12. レスポンシブWebデザイン

HTML/CSSコース
2021

PCなのかスマホなのか、Webサイトを利用するブラウザや端末によってディスプレイの大きさが変わるため、サイズによってもわかりやすい画面表示が必要です。

viewportの設定を知っておこう

meta viewport（ビューポート）は、スマホやタブレットのモバイル端末で最適にWeb表示させるため（Google推奨のレスポンシブWebデザイン適用時）に必要なhtmlタグです。

以下の記述を忘れないようにしておこう。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="UTF-8" />
      <!-- Google推奨の記述例 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>レスポンシブルWebデザイン</title>
      <link rel="stylesheet" href="css/styles.css"/>
    </head>
    <body>
 
    </body>
  </html>

meta viewportを使うことで「width=device-width」「user-scalable」「initial-scale」の属性値が追加できます。

XHTML
1
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  • width=device-widthmeta 表示領域の幅で、端末画面の幅に合わせる指定ができる。
  • user-scalablemeta ズームの操作で、許可する（yes）・許可しない（no）の指定ができる。
  • initial-scalemeta 初期のズーム倍率で、倍率（minimum-scale～maximum-scale の範囲）指定ができる、
    「minimum-scale」は、倍率 （0～10 の範囲、初期値は 0.25）。「maximum-scale」は、倍率 （0～10 の範囲、初期値は 1.6）

メディアクエリを知っておこう

※メディアクエリとは、media タイプを発展させたCSS3の新しい要素です。

XHTML
1
2
3
4
<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">
 
</head>

「画面サイズが480pxまではstyle.cssを読み込み」画面サイズ480pxまではstyle.cssに記述されているCSSが適用されます。

以下のように複数記載も可能です。

XHTML
1
2
3
4
5
6
7
8
/*　画面サイズが480pxまでこのファイルのスタイルが適用される。*/
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
 
/* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)">
 
/* 画面サイズ10 */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">

上の内容を、CSS内に記載する場合、以下の記述ができます。

以下の内容を実際に記述して画面サイズを確認してみてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*　@media以外の所は全てのサイズで読み込まれます。*/
p {
color:red;
}
@media screen and (min-width:480px) {
  /*　画面サイズが480pxからはここを読み込む　*/
  p{
     color:#000000;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  /*　画面サイズが768pxから1024pxまではここを読み込む　*/
  p{
     color:#00ff00;
  }
}
@media screen and (min-width:1024px) {
   /*　画面サイズが1024pxからはここを読み込む　*/
  p{
     color:#0000ff;
  }
}

ブラウザ実行結果

Google chromeのデベロッパーツールで、スマホサイズを確認する。

Google Chromeでデベロッパーツールを起動し、webサイトの表示エリアをスマートフォンサイズに変更してみる。

参考資料

スマートフォン、PC/ノートPC、iPad、iPhone、大きなディスプレイ、縦方向と横方向の区別、またはその両方に対応したスタイルを区別して適用するためのテンプレートファイルをご紹介します。なにかの参考に利用してください。下記のようなタブ切り替え機能を作成してください。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* スマートフォン (縦向き、横向き両対応) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
/* スマートフォン (横向き) ----------- */
@media only screen and (min-width : 321px) {
}
/* スマートフォン (縦向き) ----------- */
@media only screen and (max-width : 320px) {
}
/* iPads (縦向き、横向き両対応) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/* iPads (横向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPads (縦向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/* デスクトップとノートPC ----------- */
@media only screen and (min-width : 1224px) {
}
/* 大きなディスプレイ ----------- */
@media only screen and (min-width : 1824px) {
}
/* iPhone 4および解像度密度の高いデバイス ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}

課題

モバイルファースの才知の作成

※モバイルファーストとは、スマホの小さいビューポートサイズ用のCSSを書き始め、次にCSSメディアクエリを使用して大きいビューポートサイズ（タブレットやデスクトップ）用にエクスペリエンスデザインに変更することをいいます。

以下のサイズ変換で、文字サイズの変わるサイトを作成してください。

  1. 480pxまでの幅の場合に適応されるサイズ幅で、フォントサイズ15pxになる。
  2. 768pxまでの幅の場合に適応されるサイズ幅で、フォントサイズ20pxになる。
  3. 1024pxまでの幅の場合に適応されるサイズ幅で、フォントサイズ25pxになる。
  4. 1024px以上の幅の場合に適応されるサイズ幅で、フォントサイズ30pxになる。

作成したファイル名をindex_c_12.htmlにして送ってください。

ヒント

以下の3通りのコードを使用していきます。課題で指定されているように画面の値を入れて、フォントサイズも指定のピクセルになるように値を入れてください。

サンプルコード
1
2
3
4
5
6
@media screen and (min-width:) {
}
@media screen and (min-width:) and ( max-width:) {
}
@media screen and (min-width:) {
}

課題・復習用検索キーワード

検索例
🔍CSS　レスポンシブデザイン
🔍CSS　スマホ　画面の大きさ
🔍CSS　フォントサイズの指定