TechAcademyが無料公開している「レスポンシブWebデザイン入門講座」を受講する～第3回～

# アジェンダ
* メディアクエリ
    * メディアクエリとは
    * 書き方
    * メディアタイプの例
    * メディア特性の例
* スマートフォンの「フィット」機能への対応
* 高解像度ディスプレイへの対応
* 実践

# メディアクエリ
## メディアクエリとは
PCのモニター(横長)やスマートフォンの画面(縦長)など、表示させるデバイスに適した表示方法を選択する手法。

## 書き方
メディアクエリは、HTMLのlinkタグで指定する方法と、CSSで指定する方法がある。

```html:html
<!-- 条件を満たすデバイスで閲覧する場合、CSSファイルの記述が適応される. -->
<link rel="stylesheet" href="./style.css" media="メディアクエリの条件文">
```

```css:css
/* 条件を満たすデバイスで閲覧する場合、CSSの記述が適応される */
@media (メディアクエリの条件文) {
  /* CSSの記述 */
}
```

「メディアクエリの条件文」は、メディアタイプやメディア特性を指定することができる。

## メディアタイプの例
メディアタイプには以下のようなものがある。

<dl>
  <dt>all</dt>
  <dd>全てのデバイス</dd>
  <dt>screen</dt>
  <dd>一般的なディスプレイ(モニター、スマートフォン、など)</dd>
  <dt>projection</dt>
  <dd>プロジェクター</dd>
  <dt>print</dt>
  <dd>印刷</dd>
</dl>

## メディア特性の例
メディア特性には以下のようなものがある。

<dl>
  <dt>width</dt>
  <dd>表示領域の横幅</dd>
  <dt>height</dt>
  <dd>表示領域の縦幅</dd>
  <dt>max-width</dt>
  <dd>CSSが適応される、最大の表示領域の横幅</dd>
  <dt>min-width</dt>
  <dd>CSSが適応される、最小の表示領域の横幅</dd>
  <dt>device-width</dt>
  <dd>デバイスの横幅</dd>
  <dt>device-height</dt>
  <dd>デバイスの縦幅</dd>
  <dt>orientation</dt>
  <dd>デバイスの向き(縦: <b>portrait</b> 横: <b>landscape</b>)</dd>
</dl>

# スマートフォンの「フィット」機能への対応
スマートフォンのブラウザには、画面の解像度をページに合わせる「フィット」という機能がある。
この機能が働くと、メディアクエリが正常に働かない場合がある。

フィット機能に対応するために、以下の通りに__「デバイスの解像度を、デバイスの画面サイズに設定する」__記述をする必要がある。

```html
<meta mame="viewport" content="width=device-width">
```

## 高解像度ディスプレイへの対応
ディスプレイの中には、1pxの表示に2つのピクセルを使用する「高解像度ディスプレイ」が存在する。
この高解像度ディスプレイでは、1ピクセルの大きさが通常のディスプレイと異なるため、表示が崩れてしまう場合がある。

高解像度ディスプレイに対応するために、メディア特性に以下の記述を追記する必要がある。

```css
/* 通常のディスプレイ. */
-webkit-device-pixel-ratio: 1

/* 高解像度ディスプレイ. */
-webkit-device-pixel-ratio: 2
```

# 実践
上記の内容を用いて以下のindex.html、style_pc.css、style_phone.cssを作成した。

```html:index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta mame="viewport" content="width=device-width">
    
    <!-- 一般的なPCモニター用のCSS. -->
    <link rel="stylesheet" href="./style_pc.css" media="screen and (min-width: 1024px)">
    <!-- 一般的なスマートフォン用のCSS. -->
    <link rel="stylesheet" href="./style_phone.css" media="(min-width: 768px) and (max-width: 1023px)">
    
    <title>レスポンシブなサイト</title>
  </head>
  <body>
    <div class="title">レスポンシブなサイト</div>
    <img src="./makoto.jpg" alt="上目遣いの天使" class="profile_icon">
    <div class="content">
      <p>標準的なPCのモニターでは、画像の右側に文字が配置されているはずです。スマートフォンサイズでは、画像の下に文字が配置されているはずです。</p>
      <p>表示させるデバイスによって適した表示方法になるサイトを、<span class="strong">レスポンシブなサイト</span>といいます。</p>

      <!-- 使用しているCSSファイルによって、表示を変化させる. -->
      <p class="device_content">現在、<span class="device"></span>用のWebページが表示されています。</p>
    </div>
  </body>
</html>
```

```css:style_pc.css
.title {
  font-size: 3em;
  font-weight: bold;
  color: brown;
  text-shadow: 7px 7px 2px burlywood;
  margin: 1em;
  padding: 0.2em;
  border-style: dotted;
  border-color: chocolate;
  border-radius: 1em;
}

.profile_icon {
  margin: 2em;
  width: 500px;
  height: 500px;
  float: left;
}

.content {
  margin: 5%;
}

.strong {
  font-weight: bold;
  text-decoration: underline;
}

.device_content {
  font-size: 2em;
  line-height: 2em;
}

/* PC用のCSSで表示していることをWebページに表示する. */
.device::before {
  content: "PC";
  font-weight: bold;
  color: orange;
}
```

```css:style_phone.css
.title {
  font-size: 3em;
  font-weight: bold;
  color: brown;
  text-shadow: 7px 7px 2px burlywood;
  margin: 1em;
  padding: 0.2em;
  border-style: dotted;
  border-color: chocolate;
  border-radius: 1em;
}

.profile_icon {
  margin: 0em 25%;
  width: 300px;
  height: 300px;
}

.content {
  margin: 5%;
}

.strong {
  font-weight: bold;
  text-decoration: underline;
}

.device_content {
  font-size: 2em;
  line-height: 2em;
}

/* スマートフォン用のCSSで表示していることをWebページに表示する. */
.device::before {
  content: "スマートフォン";
  font-weight: bold;
  color: orange;
}
```
これをWebブラウザに表示させるとこんな感じ。
GoogleChromeのデベロッパーツールで、PCで閲覧した場合とスマートフォン(iPhone6)で閲覧した場合を確認。

●PC
![index_pc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/345dd570-93bd-545e-b359-329cd665864f.png)

●iPhone6
![index_phone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648214/55ac3562-db1a-19a1-2f4a-488f782daff7.png)

このように、今どのデバイスによって、文書の構造や表示させる文章を変化させることもできる。
(CSSで文書を表示させる手法についての是非は、また別の話)

# おわりに
今回は、ついにレスポンシブな内容だった。
デバイスごとに複数のCSSファイルを用意するか、一つのCSSファイルを作成してその中でデバイスを指定するか・・・。
より良い設計を心がけるために、調べよう。

## 参考
[3-1 メディアクエリとは（メディアクエリ）](https://www.youtube.com/watch?v=CkYcd_XvqvY&list=PLjw-30bsJNVVUTdM-KUqkiVy3uj4fTfLD&index=11)
[3-2 メディアタイプ（メディアクエリ）](https://www.youtube.com/watch?v=qaz2GHGYE68&list=PLjw-30bsJNVVUTdM-KUqkiVy3uj4fTfLD&index=12)
[3-3 メディア特性（メディアクエリ）](https://www.youtube.com/watch?v=z9aHZRA6_8E&list=PLjw-30bsJNVVUTdM-KUqkiVy3uj4fTfLD&index=13)
[3-4 環境に合わせた指定の追加（メディアクエリ）](https://www.youtube.com/watch?v=D1s5h0g1DBM&list=PLjw-30bsJNVVUTdM-KUqkiVy3uj4fTfLD&index=14)
[3-5 ページの印刷（メディアクエリ）](https://www.youtube.com/watch?v=KqNQB2Sx4ck&list=PLjw-30bsJNVVUTdM-KUqkiVy3uj4fTfLD&index=15)