100日後くらいに個人開発するぞ！day033

今日はレスポンシブデザインとメディアクエリを学んだ！

今日の学び

レスポンシブデザインとは

• レスポンシブデザインは画面のサイズに合わせて最適なレイアウトを組む仕組み
• レスポンシブデザインを適用してないとスマートフォンやタブレットの画面でコンテンツの一部が隠れてしまう

メディアクエリ

• メディアクエリ…ブラウザの画面サイズに応じてCSSのスタイルを設定する方法
• メディアクエリの書き方
  • @media(条件){…}で記述し指定した条件下で{}内のCSSが適用される
    • 例：画面幅が500px以下の場合にh1の文字の色を青にする
      • @media(max-width:500px;){h1{color:blie}}

メディアクエリの条件

• 画面幅が〇〇px以下の場合を条件で指定する方法
  • @media(max-width:〇〇px;){…}
• 画面幅が〇〇px以上の場合を条件で指定する方法
  • @media(min-width:〇〇px;){…}

ブレイクポイントとは

• max-width:〇〇pxやmin-width:〇〇pxで指定するとき〇〇pxの部分をブレイクポイントと呼ぶ

画面幅によってコンテンツの幅を変えたい場合

• 例：1000px以下の時に「item」の幅を画面の半分にする
  • @media(max-width:1000px;){.item{width:50%;}}

paddingやborderでレイアウトの崩れを直す方法

• 全要素のCSSに*{box-sizing:border-box;}を指定することでpaddingやborderによるレイアウトの崩れをなくすことができる
  • *は全ての要素を指定できる
    *box-sizing:border-box;はpaddingやborderも含めたwidhtを要素の幅として認識させるCSS