レスポンシブデザインについて

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

レスポンシブデザイン＝端末によって表示を切り替えられるウェブデザインのこと

デザインする時に意識するべき3つのポイント

1.画面の大きさの違い
→PCの大画面とスマホの画面では表示される量が大きく異なる。
2.操作性の違い
→PCのマウスでのクリックと違いスマホは指先でのタッチやタップ。ボタンなどのサイズへの配慮は重要！
3.体験の違い
→レスポンシブデザインは単にサイズに合わせて表示を変化させるだけではなく、サイトの使いやすさを考えることが大切！

レスポンシブデザインの制作方法

1つのHTMLを使用して、ブラウザの幅によって適用するCSSを切り替える方法が主流！

メディアエクリ

メディアエクリとは表示される画面幅や高さなどの情報から、画面サイズによる別々のデザインを１つのスタイルシートで対応することができる。

style.css

/* 画面サイズ1300px以下に適応させるスタイル */
@media screen and(max-width: 1300px) { 
  .h1 {
    font-size: 14px;
  }
}
/* 画面サイズ600px以下に適応させるスタイル */
@media screen and(max-width: 600px) {
  .h1 {
    font-size: 10px;
  }
}