PCサイトをスマホから閲覧した時にスマホ対応のサイトが表示されると、ユーザーに便が良いです。
レスポンシブウェブデザインの方法を紹介します。
レスポンシブウェブデザインの必要性
デバイスによって、サイトの表示が変わるレスポンシブウェブデザインは、スマホ・タブレットの使用がPCを上回っている現状では必要です。
ユーザーの利便性の向上に役立ちます。
もちろん、ビジネスとしての成果にも貢献します。
私が運営する主なサイトのアクセス数を調べたところ、PCとスマホは同数、そしてタブレットはPCの10分の1でした。
一方、サイトからの収益はスマホサイトはPCサイトの約2分の1でした。
アクセス数が変わらないにも関わらず、収益は半分。
この差の大きな原因は、大半のPCサイトをスマホ対応のレスポンシブウェブデザインにしていなかったことが考えられます。
時代は確実に変わっています。
スマホユーザー数はPCユーザー数を上回ってると言われますが、ビジネスへの波及はまだまだ先だと思っていました。
しかし、これは大きな間違いです。
一刻も早く対応しないと時代に取り残されるでしょう。
レスポンシブウェブデザインの方法
PCサイトをスマホやタブレット対応にする方法は色々ありますが、最も簡単でGoogleが推奨するのがレスポンシブウェブデザインです。
これはCSS（スタイルシート）でデバイスごとに表示を変えます。
一度設定すれば、後は自動でユーザーがアクセスしたデバイスごとに表示が変わるのでとても便利です。
メタタグの挿入
内に下記のメタタグを挿入します。
このメタタグが挿入されていないと、PCサイトをスマホで見た場合、小さく表示されてしまいます。
このメタタグを挿入し、CSSを編集することで、そのデバイスで見易いサイズにサイトをリサイズしてくれます。
メディアクエリー
CSSに記述する内容（メディアクエリー）は、下記（例）のようになります。
※記述する場所は元々ある「style.css」等のスタイルシートに下記のソースを挿入します。
@media screen and (min-width: 978px) {
/*パソコン及び大型タブレット*/
#contents{ width:800px;}
}
@media screen and (min-width: 600px) {
/*タブレット*/
#contents{ width:500px;}
}
@media screen and (min-width: 480px) {
/*大きめのスマートフォン*/
#contents{ width:350px;}
}
@media screen and (min-width: 320px) {
/*スマートフォン*/
#contents{ width:320px;}
}
「#contents」は「HTMLソース」では、「<div id=”contents”>～</div>」
と指定した部分のデザインで、通常はサイトの全体（一番外のブロック）を意味します。
人によっては「”contents”」を「”container”」と指定している場合もあるでしょう。
さて、上のソース（下記）の意味は次のようになります。
@media screen and (min-width: 978px) {
/*パソコン及び大型タブレット*/
#contents{ width:800px;}
}
「デバイスの大きさが978px以上の場合は、「”contents”」（サイト）の横幅を800pxに指定する。
以下同様です。
上の例では、4種類のデバイスを想定していますが、私の場合、PCとスマホからのアクセスが同数なので、PCとスマホの2種類だけ設定しました。
@media screen and (max-width:640px){
#contents{
width:100%;
background-color:#ffffff;
font-size:13px;
text-align:left;
line-height:1.2em;
padding:0px;
margin:0px auto;
}
}
@media screen and (min-width:641px){
#contents {background-color:#ffffff;
width:728px;
font-size:13px;
text-align:left;
line-height:1.2em;
padding:0px;
margin:0px auto;
}
}
デバイスの横幅が最大640pxの場合は、「”contents”」（サイト）の幅は100％（横幅一杯）に、デバイスの横幅が641px以上の場合は「”contents”」の幅は729pxで表示する、と言った意味です。
上の例では「”contents”」しか記述していませんが、PCサイトとスマホサイトで表示を変える部分は全て表示します。
横幅は基本的にスマホでは「width:100%;」、PCでは任意の数字で指定しました。
フローティングの解除
後、スマホは1カラムですが、PCサイトでは2カラムか3カラムの場合が多いと思います。
この場合はフローティングを解除し、横に並んでいるブロックを下に持って行きます。
「float」で配置しているブロックのcssを下記に修正します。
#side{
display:block;
float:none;
width:100%;
}
