メディアクエリを使ってPCサイトとSPサイトを分けるには？

NG なコーディング例

head タグ内

  <link rel='stylesheet' href='_style_pc.css'>
  <link rel='stylesheet' href='_style_sp.css'>

_style_pc.css

.test {
  font-size: 14px;
}

_style_sp.css

@media screen and (max-width:767px) {
  .test {
    font-style: italic;
  }
}

こちらのコーディングでは、PCサイトの .test クラスのフォントサイズだけ大きくしたい！という場合に、_style_pc.css を修正すると … SPサイトも影響を受けてしまいます。
ちょっとしたサイトなら問題ないかもしれませんが、複雑なサイトを修正するときには、どのファイルのどの定義が PC / SP それぞれにどのように影響を与えているのか？混乱して上手く改修できなくなってしまう可能性があります。

正しいコーディング例１

  <link rel='stylesheet' href='_style.css'><!--共通定義-->
  <link rel='stylesheet' href='_style_pc.css' media='screen and (min-width:768px)'>
  <link rel='stylesheet' href='_style_sp.css' media='screen and (max-width:767px)'>

このように定義をしておけば、あとから改修する場合に、共通定義だけ / PCサイトだけ / SPサイトだけ…といった具合に、独立して（直接的に）修正することができます。

※ただし、Google は *.html ページを読み込む際に１ファイルでもダウンロードするファイル数が少ないページを「良いサイト」と判断するようですので、例２のようなコーディング手法もあります。

正しいコーディング 例2

  <link rel='stylesheet' href='_style_pc.css' media='screen and (min-width:768px)'>
  <link rel='stylesheet' href='_style_sp.css' media='screen and (max-width:767px)'>

こちらの定義では、共通定義を PC サイト にも SP サイトにも書き込むことで、例１と比較しても さらにダウンロードファイルを少なくすることができ、SEO対策的にも有利なコーディングといえます。
ただし、全く同じ定義を _style_pc.css にも _style_sp.css にも書かなければならないので、コーディング量は増えてしまいます。

SEOを意識したサイト制作では、そのようにコーディングされる場合もあると思いますが、業務用サイト（ログインが必要なサイト）のように SEO対策を意識する必要がないサイトの場合には 例１ のようなコーディングの方がエンジニアにとっては管理しやすいかもしれません。

新しいSNSを開発しませんか？

SNS開発18年で2つのSNSを開発・運用中の当社が、あなたのアイデアを形にするお手伝いをします。詳しくはこちら >>