5章. レスポンシブサイトの設計方法

設計に関して

レスポンシブサイトは、PC、スマホともHTMLの内容をできるだけ同じにすることが前提になります。
そこで問題になるのが、情報量とレイアウトです。
スマホは、サイズの関係上、複雑なレイアウトができません。情報量も増えると縦スクロールさせる距離が長くなってしまいます。
横スクロールに関しては、スマホでの操作性が悪くなるので避けるべきです。
そのため、設計はスマホをベースにしていくことがベストです。

メディアクエリに使用方法に関して

メディアクエリでCSSを切り替える方法は、主に3つの設計方法があります。

ケース1
PCサイトのCSSをベースに、そのCSSを継承してメディアクエリでスマホサイトの設計をする方法。
PCのCSS → SPのCSSの順になり、大きいサイズから小さいサイズを記述します。

ケース2
スマホサイトのCSSをベースに、そのCSSを継承してメディアクエリでPCサイトの設計をする方法。
SPのCSS → PCのCSSの順になり、小さいサイズから大きいサイズを記述します。

ケース3
メディアクエリで、PCサイト、スマホサイトを別々に設計する方法

それぞれのメリットとデメリットを見ていきましょう。

/* pc用 */
.main{
  width: 960px;
  margin: 50px auto;
  background-color: #ddd;
}

/* sp用 */
@media only screen and (max-width: 767px){
  .main{
    width: 90%;
  }
}

/* sp用 */
.main{
  width: 90%;
  margin: 50px auto;
  background-color: #ddd;
}

/* pc用 */
@media only screen and (min-width: 768px){
  .main{
    width: 960px;
  }
}

/* sp用 */
@media only screen and (max-width: 767px){
  .main{
    width: 90%;
    margin: 50px auto;
    background-color: #ddd;
  }
}

/* pc用 */
@media only screen and (min-width: 768px){
  .main{
    width: 960px;
    margin: 50px auto;
    background-color: #ddd;
  }
}

どれが一番良いかは、案件によって変わります。また、1、2、3を混在させて設計する場合もあります。
レスポンシブサイトは、CSSのコードが複雑になりがちなので、どれをベースにするかしっかり決めてから作業したほうが良いでしょう。