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

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

      2017/01/10   hatano

設計に関して

レスポンシブサイトは、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サイトの設計次第でスマホサイトの設計が難しくなる場合がある。

ケース2の場合

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

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

ケース3の場合

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

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

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

広告

 - レスポンシブサイト制作