🐼

CSS ”Responsive design and Media Queries”

2023/08/07に公開

レスポンシブ

メディアクエリー

tech

Responsive designとは？

機種サイズ（ブラウザサイズ）にあわせてWEBデザインが変わることです。
機種サイズとはPC,Tablet,mobileがあって、それぞれWEBを開いたとき各機種のサイズにあわせてデザインが変わることをレスポンスㅈWEBデザインといいます。

なぜResponsive design？

🥽マーケティング戦略に良いです。

PCのWEBデザインをSPで開いたらフォントサイズが小さく見えて情報が見にくくなり、USERの利用が不便となります。
マーケティング、USERアクセシビリティにデメリットの大きくなります。なので機種によって最適化されたWEBデザインを見せた方が良いです。

🥽SEOに最適化

PCとSPが別である時機種サイズにあわせて最適なデザインをみせることには良いかもしれませんが、
住所が二つになってしまい同一の内容でも検索エンジンが判断するときどれが正しい情報が判らなくなって検索結果から除きます。

Media Queriesとは？

画面の解像度、機種サイズなどの条件でHTMLに適用するスタイルを転換することができます。

⛱️基本文法

メディアクエリーはCSSでスタイルを選択的に適用したいとき使います。 ifとにってる概念です。

@media (条件) {
  スタイル
}

スタイルには一般的なCSSコードが入ります。条件部分に合う時スタイルコードが適用され、合わない時は適用されないです。

⛱️break point

🚿4つのレスポンシブbreak point
. PC, Tablet: ~1024px
. Tabletの横: 768px ~ 1023px
. SPの横, Tablet: 480px ~ 767px
. SP: 480px

　　/* PC, Tablet (768px ~ 1023px)*/ 
      @media all and (min-width:768px) and (max-width:1023px) { 
        ...
      } 

      /* Tabletの横 (768px ~ 1023px)*/ 
      @media all and (min-width:768px) and (max-width:1023px) { 
        ...
      } 

      /* SPの横, Tablet (480px ~ 767px)*/ 
      @media all and (min-width:480px) and (max-width:767px) {
        ...
      } 

      /* SP (~ 479px)*/ 
      @media all and (max-width:479px) {
        ...
      }

🚿3つのレスポンシブbreak point
. PC, Tablet: ~1024px
. Tabletの横, Tabletの縦: 768px ~ 1023px
. SPの横, SPの縦: ~ 767px

　　　/* PC (1024px)*/ 
      @media all and (min-width:1024px) {
        ...
      } 

      /* Tabletの横, Tabletの縦 (768px ~ 1023px)*/ 
      @media all and (min-width:768px) and (max-width:1023px) {
        ...
      } 

      /* SPの横, SPの縦 (480px ~ 767px)*/ 
      @media all and (max-width:767px) {
        ...
      }