サイトのスマホ対応について

方法は大きく分けて2通りです

サイトをスマホでも見れるようにするには、大きく分けて2通りの方法があると言われています。

  1. スマホ用の構造を用意し、PCとは別で作成する
  2. レスポンシブ化し、1つの構造でPCとスマホの両方に対応する

上記の2つがスマホ対応と呼ばれるものになると思いますが、簡単に解説をします。

スマホ用の構造を用意し、PCとは別で作成する

数年前は多くのサイトでこの方法を見かけました。単純にサイトを2コつくると思ってもらえると分かりやすいです。

メリット

  • PCとスマホで完全に分離しているので、HTML構造・CSS的に融通をきかせ易い。
  • サイトの内容に齟齬が出ないようにすればPC用とスマホ用で内容を分けることもできる。

デメリット

  • PCのURLとスマホのURLで完全に分かれているのでSEO的に不利(とGoogleさんが言ってた気がする)
  • PCのURLに来た人をスマホのURLに飛ばす処理を書く、など不便さもある。
  • 同一ページが2コ出来てしまうので、修正も2倍になってしまうことが多い。

レスポンシブ化し、1つの構造でPCとスマホの両方に対応する

「Media Queries(メディアクエリ)」を使ってウィンドウ幅で切り分けていくという方法があります。ぱっとわからないかもしれませんが、だれもが見たことがあるこの形です。

「print」は最近ぜんぜん見なくなり、ほとんど「all」の指定だと思います。上記のものは、「すべて」と「印刷」する場合の書き方です。すべてに適応させるCSSを読み込んだ後に、印刷時にCSSを上書きしてごちゃごちゃする、みたいな感じです。

では、実際にレスポンシブ化の時にどんな感じに指定するかというと

調べるとこんな感じに書くみたいです。おそらく、基本となるCSSを書いておいて、それぞれの画面幅で読み込むCSSを振り分けて上書きするようです。

他にも、CSSのコードに直接書く方法があって

それぞれ「{ }」内に書いたものが適用されるようです。私はこれが便利かなーって思います。

では、メディアクエリを使ったメリット・デメリットです。

メリット

  • HTML構造が1つなので、修正がカンタン。
  • URLが1つなのでページの評価が分散しない。

デメリット

  • HTML構造がひとつなので、スマホ版だけテキストを変更するというのが難しい。
  • PC版・スマホ版の両方を考慮したHTML構造にしていないと手間が大きくかかってしまう。