中級Lesson01 – レスポンシブWebデザイン
目次
レスポンシブWebデザインとは
大きさの異なるデバイス毎（PC、タブレット、スマートフォンなど）に、Webページのレイアウトを可変させるデザインをレスポンシブWebデザインと言います。
一つのHTMLファイルに対してCSSでデバイスごとのレイアウトを指示するものとなります。
PC用のレイアウトから指示する場合、まずは通常通りCSSの記述を行います。
PC用のレイアウトが完成した後スマートフォン（またはタブレット）用のレイアウトをメディアクエリ内に記述します。
レスポンシブWebデザインまとめ
https://responsive-jp.com/
メディアクエリについて
CSSに「メディアクエリ」と呼ばれる条件のようなものを記述して、複数のデバイスに対するレイアウトの指定を行います。
メディアクエリは「幅〇〇px以下の場合このようにする」といった形で命令を記述します。幅〇〇px以下を表す基準点を「ブレークポイント」と呼びます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
@mediaから始まる記述でデバイスの横幅を指定します。
上の例では480px以下（max-width:480px）と指定しています。
デバイスの幅を指定した後の{}内に480px以下の際のスタイルを記述します。
上の例では、PC表示のときに背景色を薄いブルーで設定しており、480px以下の場合濃いブルーに変わります。
メディアクエリの基準について
https://pengi-n.co.jp/blog/responsive/
レスポンシブWebデザインの考え方
基本的な考え方は以下のようになります。
PC時に横に並んでいるものをスマホ時に上下に並べる
display:flexの指示をdisplay:block（またはflex-direction:column）で上書きをする。
下記の例では、画面幅を小さくすると、ulとpが縦に並びます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
PC時にpxで幅指定しているものをスマホ時に%で幅指定をする
width:○○pxの指示をwidth:○○%で上書きをする。
下記の例では、画面幅を小さくすると、pの横幅が50%になります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
いずれもPCと比べてスマホのウィンドウサイズが狭くなるために必要な考え方となります。
また上記以外にもこういった記述を行うこともあります。
PC時のpositionによるレイアウトをスマホ時に否定する
position:relative（またはabsolute）の指示をposition:staticで否定する
下記の例では、画面幅を小さくすると、pがposition:staticに切り替わります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
viewportの指定
タブレットやスマートフォンなどで正しく表示を行うために必ずviewportの指定を行いましょう。
meta要素の記述になるので、記述箇所はhead要素内に記述します。
複数のメディアクエリを記述することで、PC時とタブレット時とスマートフォン時の３段階のレイアウトを作ることも可能です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
