HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

  1. ホーム
  2. レスポンシブサイト制作
  3. 5章. レスポンシブサイトの設計方法

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

  1. 公開日:2017年01月05日
  2. 最終更新日:2022年08月10日

レスポンシブサイト制作

この記事をシェアする:

設計に関して

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

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

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

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

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

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

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

ケース1の場合

メリット
既存のPCサイトのCSSを活かしながら、スマホサイトに展開することができる。

デメリット
PCサイトの設計次第でスマホサイトの設計が難しくなる場合がある。


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

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

ケース2の場合

メリット
スマホサイトからCSSの設計を行うので、PCサイトへの展開が容易。新規サイト向き。

デメリット
スマホサイトの設計にある程度慣れていないと、時間がかかる。


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

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

ケース3の場合

メリット
別々で設計を行うので、継承を意識せず設計ができる。

デメリット
別々で設計を行うので、コードの量が増える。


/* 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のコードが複雑になりがちなので、どれをベースにするかしっかり決めてから作業したほうが良いでしょう。