レスポンシブデザインとは、
様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整する仕組みを持つデザインのこと。
1.ビューポートの設定
ビューポート(viewport)とは、表示領域(ページの横幅）のこと。
HTMLのmeta要素を使用する。
HTMLの<head>に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width でデバイスの幅に合わせる
initial-scale=1.0で初期ズームレベルの設定
2.メディアクエリ
メディアクエリとは、
PC・タブレット・スマートフォンなどの各モバイルごとのCSSを記述する方法。
HTMLの<head>に
<link rel="stylesheet" href="cssファイル名">
CSSに
@media screen and (min-width: 768px) and (max-width: 1000px ) {
/*スタイルを記述}*/
}
メディアタイプとは、
スタイルシートが適用されるデバイスの種類を指定する。
「all」「print」「screen」「speech」など。
☀︎ブレイクポイント(表示切替の境界線)の目安☀︎
3.サイズの指定方法
固定幅（px）ではなく、
パーセンテージ（％）やViewport Height (vh）で指定する。
vh：1vhはビューポートの高さの1%のこと
vw：1vwはビューポートの幅の1%のこと
rem：フォントサイズ（16px）の何倍。2remなら32px
em：親要素のフォントサイズの何倍。親が16pxで2remなら32px
5.flexboxやGrid Layout の活用
フレックスボックスではパソコン画面では横並び、スマホ画面では縦並びにするなど簡単にできる。
justify-content や align-items で上下左右中央に配置できる。（省略型place-items: center;）
格子状のグリッドに好きな順番に配置したり結合したりすることができる。display: grid;
5.autoの活用
高さや幅をautoに設定することで、自動的に高さが調整される。
marginに使用することで、要素を上下中央に設定できる。margin: 0 auto;
