実戦形式プログラミング企画

メディアクエリを使って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 それぞれにどのように影響を与えているのか?混乱して上手く改修できなくなってしまう可能性があります。

正しいコーディング例1

  <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 ページを読み込む際に1ファイルでもダウンロードするファイル数が少ないページを「良いサイト」と判断するようですので、例2のようなコーディング手法もあります。

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

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

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら