コーディング学習をする中 CSS レスポンシブデザイン簡単にまとめてみた

CSS レスポンシブ

ビューポート設定

まずは HTML の head タグ内に以下の meta タグを記述してください。

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,user-scalable=no"
/>

メディアクエリを書く

PC ファースト

@media screen and (max-width: 959px) {
  /* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
  /* 480px以下に適用されるCSS（スマホ用） */
}

モバイルファースト

/* スマホ用のCSSはメディアクエリの外に記述する */

@media screen and (min-width: 481px) {
  /* 481px以上に適用されるCSS（タブレット用） */
}
@media screen and (min-width: 960px) {
  /* 960px以上に適用されるCSS（PC用） */
}

@media screen and (max-width: 1000px) {
  /* スクリーンサイズが1000px以下の場合に適用 */
}

@media screen and (max-width: 767px) {
  /* スクリーンサイズが767px以下の場合に適用 */
}

@media screen and (max-width: 480px) {
  /* スクリーンサイズが480px以下の場合に適用 */
}

@media screen and (max-width: 320px) {
  /* スクリーンサイズが320px以下の場合に適用 */
}

@media screen and (min-width: 768px) {
  /* スクリーンサイズが768px以上の場合に適用 */
}
min-width と max-width を併用すると可読性が低下します。どちらか一方を利用することをおすすめします。

max-width min-width 違いなど

• min-width これ以上小さくならない
• max-width これ以上大きくならない

p {
max-width :200px;
}
= 要素が200pxより大きくならない（200px以下）という意味

p {
max-width :200px;
}
= 要素が200pxより大きくならない（200px以下）という意味

あまり使わないが min-height と max-height もある