Nagashima Laboratory

レスポンシブデザイン1

フォルダ：responsive_sample_01

HTML+CSSを書き換え、画面サイズに応じて、レイアウトが変化するようします。

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

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

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

準備

  • responsive_sample_01という名前でフォルダを作成します。
  • layout_sample_03の完成時のHTML・CSSをそのまま使い、追記・修正します
  • 欠席などにより、layout_sample_03 の完成データがない場合は、授業進行の都合上、下記からデータをダウンロードの上、進めてください。後日、自身でlayout_sample_03を作るようにしてください
  • https://github.com/ngsm-syr/layout_sample_03c

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

▼index.html

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

②基本の表示方法をスマートフォンサイズの記述にします

▼style.cssへの追記・修正

main {
  grid-template-columns: 1fr;
・・・

1fr 1fr だった部分を、1frにし、グリッドの列を減らします

/*
.sec01 {
}
.sec02 {
}
.sec03 {
}
*/

.sec01 〜 .sec03 の grid の設定をコメントアウトします

.container {
  grid-template-columns: 1fr;
・・・

1fr 1fr 1fr だった部分を、1fr にし、グリッドの列を減らします

③タブレット（小さめのコンピュータ含む）サイズになったときの記述を追加します。

▼style.cssへの追記（最終行に追加）

/*タブレット用*/
@media all and (min-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

④コンピュータサイズになったときの記述を追加します。

▼style.cssへの追記（最終行に追加）

/*コンピュータ用*/
@media all and (min-width: 1025px) {
  main {
    grid-template-columns: 1fr 1fr;
  }

  .sec01 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .sec02 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .sec03 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

ブレイクポイント

画面の切り替わるポイントです。

コンピュータを基準にした場合、下記のような数値設定になります（数値は例です）

  • コンピュータ　設定なし（1025px以上）
  • タブレット　1024px
  • スマートフォン　599px

メディアクエリ

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

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

全てのmediaタイプ（media all）に対して、min-widthに設定したサイズ以上の場合に { } 内のCSSを適用する、という意味です。

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

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

全てのmediaタイプ（media all）に対して、max-widthに設定したサイズ以下の場合に { } 内のCSSを適用する、という意味です。

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

【補足】高解像度ディスプレイ（Retinaディスプレイなど）への対応

高解像度ディスプレイでは、表示サイズ分のピクセル数の画像を表示する、例えば、600px×600pxの画像を、画面上のサイズで600pxで表示すると、画像が粗く見えます。

鮮明な画像を表示するには、2倍以上のピクセル数が必要になります。例えば、600px×600pxの画像であれば、300px×300px 以下のサイズでは、鮮明に表示できます。

不必要に大きい画像は、通信を圧迫し、閲覧者に負担をかけます。画像の種類別にデータの形式を使い分け（JPEG、PNGなどの使い分け）、適切なサイズにリサイズし、可能な限り圧縮してデータを軽くすることが望ましいです。

【補足】レスポンシブ画像

img に width: 100%; を指定すれば、画面幅に応じたサイズ変更は可能ですが、小さな画面上で、必要以上に大きな画像を読み込むことになる場合もあります。また、単純な変形だけでは画面幅が狭くなったときに、見づらい画像になってしまう場合もあります。

画面幅に合わせて、別のファイルを読み込むなど、より細かな設定をすることも可能です。下記は、画面幅に合わせてメインビジュアルを差し替える例です。

▼index.htmlへの追記・修正　※main-visualのimgタグの差し替え

<picture>
  <source media="(max-width: 599px)" srcset="images/square.png">
  <source media="(min-width: 600px)" srcset="images/main-visual.png">
  <img src="images/main-visual.png" alt="メインビジュアル">
</picture>

<picture>：画面サイズに応じた画像を表示させるときに使うタグです

【応用】レスポンシブタイポグラフィ

文字サイズの設定に、pxではなく、remを使って、画面サイズに応じて、文字サイズを変更しやすくします。

rem：HTMLファイル自体の文字サイズを基準にする単位。HTMLの文字サイズは、デフォルトでは16pxのため、2rem = 32px相当です。

header h1 {
  font-size: 2rem;
/*中略*/
}

@media all and (min-width: 1025px) {
  header h1 {
    font-size: 4rem;
  }

/*中略*/

全ての文字サイズをremで設定していると、基準となるhtmlの文字サイズが変わったときに、全体的に文字サイズを変更できます。

html {
  font-size: 10px;
}

上記のようにhtmlの文字サイズを変更すると、remで設定した部分全てに影響します。1rem = 10px になれば、2rem = 20pxになります。

参考リンク

() Category: 資料 Tags: