HP・サイトのスマホ対応の方法で、PCのホームページ等Webサイトをスマートフォン対応にする方法をご紹介しましたが、今回はスタイルシートの編集についてです。
レスポンシブWebデザインとは？
PCサイトをスマホ対応にする方法はいくつかありますが、検索大手のGoogleが推奨しており、最も簡単にできるのがレスポンシブWebデザインです。
これはサイトを閲覧するデバイスのサイズによってCSS（スタイルシート）を切り替えることで、違ったデザインを表示するというものです。
デザインの最も大きな違いはカラムです。
PCサイトは通常2カラム及び3カラムです。
それに対して、スマホサイトは1カラムです。
レスポンシブWebデザインの場合、既存サイトのHTMLとCSSを少し修正するだけで、デバイスによって違ったデザインを表示させることができます。
CSS編集は、デバイスの幅によって異なるスタイルを記述するので、共通のスタイルについては、デバイスの幅を指定しなければどのデバイスにも適用されます。
［例］
下記は横幅が769px以上の場合はPC用デザイン、641px～768pxの場合はタブレット用デザイン、640px以下の場合はスマートフォンデザインを表示する場合のCSSの記述です。
@media screen and (min-width: 769px){
*ここにPC用のスタイルを記述する*
}
@media screen and (max-width: 768px){
*ここにタブレット用スタイルを記述する*
}
@media screen and (max-width:640px){
*ここにスマートフォン用スタイルを記述する*
}
*ここに共通のスタイルを記述する*
レイアウト編集
2カラムのPCサイトをスマホで閲覧した時、1カラムで表示する方法です。2カラムは「main」と「side」という「id」でboxを指定してあるとします。
※ここではタブレット用は設定しないことにします。
@media screen and (max-width:640px){
#main{display:block;float:none;width:100%;}
#side{display:block;float:none;width:100%;}
}
これ以外に幅（width）を指定しているidやclassには、「width:100%;」を記述します。
これでスマホ画面の横幅一杯にコンテンツが表示されます。
例えば、PCサイトの横幅を「id=”contents”」で指定していた場合、
#contents{width:100%;}となります。
これを上記のCSSに追加します。
※上記の最後の「;」は記述しなくても影響はありません。
リンクの高さの編集
スマホの場合、画面を指でタッチして操作します。
この場合、指の太さにもよりますが、リンクの高さが短いと希望のリンクをタップできない場合があります。
そこでリンクの「height」を調整する必要があります。
さらに文字の大きさも大きくするとより操作し易いです。
ul{font-size:1.1em;line-height:1.5em;}
フォントや行間の値の大きさの指定は「％」「px」でも行えます。
