レスポンシブ対応とは
タブレット画面やスマホ画面で大きさが違うとき、デバイスによって見やすい表示に自動的に切り替わる仕組みを持つデザインをレスポンシブといいます。
メリット
1 見やすい
現在webサイトはスマートフォンで見られることが遥かに多くなったのではないでしょうか。
その時に文字が切れてしまったりと見づらくなってしまいます。
2 SEOで上位表示される（googleが推奨しているため）
SEO(検索エンジン最適化)とは、検索結果にて狙ったキーワードで自社サイトを上位表示させる対策のことです。
書き方
①Viewポートの設定
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この一行を付け加えます。
②メディアクエリの設定
メディアクエリとは、指定した画面のサイズの時にのみ使われるCSSの要素などを決めるものです。
@media (max-width: px / min-width: px)
{
適応させるCSS
}
max-widthが最大幅、min-widthが最小幅を表します。
また、パソコンは1001px以上、タブレットは671px~1000px、スマホは670px以下が画面のpxです。
この値をブレイクポイントといいます。
③CSSの変更（％を使う）
%（パーセント）とは、親要素のサイズが100%としたとき子要素のサイズを親要素に対して何%で設定するか？を決められる指定方法です。
レスポンシブの時の要素の値は％で示します。
レスポンシブによって画面のサイズが変わった時、pxのまま値を固定していると画面の大きさに対応しないからです。
初めから意識していないと、後から直すのに苦労します、、（個人アプリの作成で今も苦労しています、、）