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

方法は大きく分けて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（メディアクエリ）」を使ってウィンドウ幅で切り分けていくという方法があります。ぱっとわからないかもしれませんが、だれもが見たことがあるこの形です。

<!-- すべてに対して -->
<link rel="stylesheet" href="○.css" media="all">
<!-- 印刷の時のみ -->
<link rel="stylesheet" href="○.css" media="print">

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

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

<!-- ウィンドウ幅 480px以下で読み込む -->
<link rel="stylesheet" href="○.css" media="only screen and (max-width: 480px)" >
<!-- ウィンドウ幅 320px以下で読み込む -->
<link rel="stylesheet" href="○.css" media="only screen and (max-width: 320px)" >

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

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

/* ウィンドウ幅 480px以下で読み込む */
@media screen and (max-width: 480px){
}
/* ウィンドウ幅 320px以下で読み込む */
@media screen and (max-width: 320px){
}

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

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

メリット

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

デメリット

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