CSSで華やかなサイトにしたい⑤～レスポンシブに対応させよう～

#レスポンシブとは
今回はCSSの**レスポンシブ**についての記事です:relaxed:
**レスポンシブデザイン**、**レスポンシブwebデザイン**とも言います。
簡単に言うと**レスポンシブ化**というのは、サイトを**いろんな画面サイズ**に対応させる事です。
例えば、**スマートフォン**:iphone:とかでWebサイトを見ることがありますよね:question:
スマートフォン用の小さい画面でも見られるようにCSSを調整することを**レスポンシブに対応させる**といいます


今回の記事:arrow_down:

- レスポンシブWebデザインとは
- レスポンシブに対応させる手順
    - 「viewport」の設定
    - メディアクエリーの基本
- ブレークポイントについて考える
- Webページをレスポンシブに対応にする～実践編～
    - 文字サイズと余白の調整
    - コンテンツを縦並びにしよう
- デベロッパーツールを利用して見た目を調整しよう


#レスポンシブWebデザインとは
**レスポンシブWebデザイン**とは、**表示領域の幅によって見え方が変わる**ようにデザインされたWebサイトのことです。
先程例に出したスマートフォンの画面:iphone:とパソコンの画面:computer:の横幅は違います。レスポンシブWebデザインを使えば、Webサイトに掲載するコンテンツは変えずに、デバイスのサイズに合わせて、CSSだけで見た目を変更することができます。
Webサイトを違うデバイスで見てみるとわかりやすいでしょう。


#レスポンシブに対応させる手順
早速、レスポンシブに対応の手順を見ていきましょう。
####「viewport」の設定
viewportとは、様々なデバイスにおける表示領域のことです。特に何も指定しないと、スマートフォン:iphone:で表示したときに、デスクトップサイトの横幅に合わせてすべてそのままの大きさに表示するので、文字が小さくなり、読みにくくなってしまいます。
そこで**HTMLの「head」内**に下記の<meta>タグを記述して表示領域の横幅を合わせます。

```html:HTML「head」内
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
```

しかし、これだけではレイアウトが崩れてしまうのでさらに調整していきます。

####メディアクエリーの基本
そこで、**メディアクエリー**を利用していきます。メディアクエリーは、**Webページが表示された画面サイズに合わせて適応する、CSSを切り替える機能**です。
例えば、「画面のサイズが600pxより、小さければ文字の大きさを小さくする」といったように、ユーザーの見ている環境に合わせてスタイルを変更できます。

メディアクエリーCSSの記述方法についてです。
「@media」と書いて「メディアクエリーを書く」といいます。
丸かっこの中に画面サイズの範囲を指定します。上記のように「max-width:600px」と書くと「最大の幅がが600pxの時」という意味になります。

```css:メディアクエリーCSS
@media screen and (max-width:600px){
  /*画面幅が600pxまでの時*/
}
```


この中に、以下のようにコーディングしていく事で、指定した画面幅内でのみその内容が適用されます。この場合、0~600pxの範囲の画面サイズの時＜p＞タグの文字色が水色になります。

```css:メディアクエリーCSS
@media screen and (max-width:600px){
  p {
    color: blue;
  }
}
```
#ブレークポイントについて考える
メディアクエリーを使えば、デバイスの画面サイズによってスタイルを変更できることを学びました。その切り替わるポイントとなる画面サイズを**「ブレークポイント」**といいます。
これまでの例では、「@media (max-width:600px)」と指定していたので、ブレークポイントは600pxです。モバイルデバイスは縦に持って使うことが多いので、**縦にした時の画面幅＝デバイスの短い方の幅**を基準にブレークポイントを考えると良いでしょう。
多くの場合、小さい画面サイズは450pxあたり、大きい画面サイズは760pxあたりを起点に設定されています。ですので、その中間の600px前後にブレークポイントを設定しておくのが無難でしょう。

**主なiOSデバイスの画面幅**

|  デバイス      |       横にした画面幅|    縦にした画面幅  |
|:-----------------|:------------------:|:------------------:|
| iPad Pro(10.5")           |   1112            |       834        |
| iPad(9.7")/iPad mini          |     1024        |     768       |
| iPhone Xs Max             |     896         |       414         |
| iPhone X/iPhone Xs              |       812        |       375        |
| iPhone 6~8 Plus             |      736       |       414      |
| iphone 6~8         |      667     |        375    |

#Webページをレスポンシブに対応にする～実践編～
実際私が制作したWebページをレスポンシブに対応にして見え方のイメージを付けていきましょう。カフェのホームページをイメージして作ってみました。こちらをレスポンシブに対応していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/cf09706a-dccd-df4c-a6dc-0ea88e7fda8f.png)



すべてのコードはに[github](https://github.com/Yuriko-Y/cafe_webpage.git)に載せてますので、そちらを参考にしてください。
####文字サイズと余白の調整
ここでは600px以下の画像で、キャッチコピーやナビゲーションメニューの文字サイズ、ホームページのコンテンツ部分の余白などを小さくして小さい画面でも見やすく調整しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/5aae1f46-e70e-0ff0-6f4d-044f3a45a5a1.png)


:arrow_down:
[モバイル版コード例](https://github.com/Yuriko-Y/cafe_webpage/commit/8609d2f90d1bc62b5a4efaedace773316180dc3d
)

####コンテンツを縦並びにしよう
ロゴとナビゲーションメニューを横並びになっていますが、スマートフォン版で縦に並べてみるのもいいでしょう。
Flexのプロパティである「flex-direction」を使えば、どの方向に並べるかを指定できます。
このプロパティの値を「column」にすることで要素を縦並びにできます。
「align-items: center;」で画面中央に指定できます。

コード一部の例です:arrow_down:

```css:一部抜粋
.page-header{
    display: flex;
    justify-content: space-between;
}
```
```css:モバイル版
@media screen and (max-width:600px){
    .page-header{
        flex-direction: column;
        align-items: center;
    }
}
```
<img width="845" alt="コメント 2020-05-09 221829.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/7a10bbdf-541e-08b7-4768-fea7665472d0.png">

ヘッダーの部分が縦に並びました。
いろんなデバイスで以下のページを見比べて見てみてください:relaxed::point_down_tone2:
[カフェホームページのサンプル](https://yuriko-y.github.io/cafe_webpage/
)

CSSのすべてのコードはこちら:point_down_tone2:
[github](https://github.com/Yuriko-Y/cafe_webpage.git)

#デベロッパーツールを利用して見た目を調整しよう
CSSの確認用などで使用されるChromeデベロッパーツールの使い方を紹介します。
Chromeデベロッパーツールとは、Chromeブラウザに付属している検証ツールです。
レスポンシブに対応した際のサイズの確認ができる便利機能です:bangbang:

Chromeで確認したいページで右クリック→検証
<img width="960" alt="コメント 2020-05-09 223225.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/434f62d9-8141-ff36-3c53-ba61a62ec2e8.png">

検証用のページの携帯のマーク？をクリック
<img width="960" alt="コメント 2020-05-09 223438.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/e4901bd6-c372-038a-59bd-da203a50d0b6.png">

様々なデバイスの大きさで画面を見ることができます
<img width="959" alt="レスポンシブに対応.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/2d87e36d-50d7-4253-e98a-2fe673b8374f.png">

この便利なのでぜひ使ってみてください:clap_tone1:

#参考文献
Mana著、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」、SBクリエイティブ株式会社、2019年