レスポンシブデザイン簡単導入法02 – よく使うcssまとめ編
レスポンシブデザイン簡単導入法として全3回に分けレスポンシブ対応方法をご紹介していますが、前回の記事「レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編」を参考に、レスポンシブデザインの導入のためにビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していきます。
本記事ではレスポンシブ対応によく使うcssのポイントをご紹介したいと思います。
レスポンシブデザインに対応するには各デバイス用のcssを設定し表示します。
対応に必要なcssは、本記事でご説明するcssでほぼ完成してしまいます。
対応するにあたり、しっかりとバックアップを取りながらスマホ対応を進めましょう。
目次
画像を可変にするCSS
レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にする事でレスポンシブ対応します。
下記のCSSで、画像の横幅が可変となります。最大でも実寸サイズとなるので画面サイズから画像がはみ出すことを防ぐことができます。
それ以下のサイズの場合は画面幅に合わせて縮小されます。
img {max-width:100%;}
スマホを横にしても文字サイズを変えないCSS
デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。
これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用に設定するcssに次の記述を追記します。
body {-webkit-text-size-adjust:100%;}
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
padding、borderの幅をwidthに含めないCSS
このcssはかなり便利です。
一昔前はpaddingの幅がwidthに含まれていたため、その分を引いた幅をwidthに指定するなどしていましたが、横幅100%の使用率の高いレスポンシブデザインでは、100%+paddingの横幅と解釈され、横スクロールが出てしまいます。
しかし、回避策として次の1行を追加するだけで、細かい計算を考えずにcssの調整を進めることができます。
レスポンシブデザイン対応の際には、ぜひこのcssを記述してください。
html {box-sizing: border-box;}
デバイスによっては部分的に非表示にしたい時のCSS
レスポンシブデザインに対応していくと、たまにどうしてもcssだけでは表現できない箇所もでてきます。そんな時の対応策の一つとして、
スマホ用とpc用のコンテンツをhtmlの方に記述し、cssによって、スマホの場合はpc用コンテンツを非表示にするといった対応でhtmlの一部を非表示にする場合があります。
cssでスマホ用、pc用にコンテンツの表示／非表示に対応する場合は次のcssを参考にしてください（※class名は任意）。
@media screen and (min-width: 641px) {
.screensize_sp {display:none;} /*PCで閲覧したら非表示にするスマホ用コンテンツ*/
}
@media screen and (max-width: 640px) {
.screensize_pc {display:none;} /*スマホで閲覧したら非表示にするPC用コンテンツ*/
}
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
意図しない番号リンク防止のmetaタグ
スマホは、電話番号ではない数字なども、自動的に電話番号リンクと認識してリンクが付いてしまいます。
これを防ぐにはhtmlのヘッダー部分に下記のメタタグを追加します。
<meta name="format-detection" content="telephone=no">
電話番号にリンクしたい場合は個別に上記のように書いてあげると間違いありません。
また、a要素にtel:電話番号とすると、電話番号をタップすると発信されるようにする記述となります。
<a href="tel:0301234567">03-0123-4567</a>
レスポンシブデザイン対応時の確認方法
レスポンシブデザインがサイトに対応されているかを確認する方法ですが、ブラウザでチェックできるツールが数多くあります。中でも、作業しながら確認していくのにお勧めなのが「Chrome デベロッパーツール」です。
ブラウザのChromeで確認したいサイトを表示し、デベロッパーツールを起動します。
デベロッパーツールの起動方法は、「Ctrl + Shift + i」（Macの場合は「option + command + i」）で起動してください。
起動後、画像内の赤枠部分のアイコンをクリックするとスマホ表示が確認できます。
デバイス毎のレスポンシブ対応状況も確認できますので便利です。
可能であれば実機で確認しながらの作業が一番なのですが、「Chrome デベロッパーツール」のようなツールも利用するとレスポンシブ対応がしやすくなります。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
レスポンシブ対応によく使うcssのポイントまとめ
現状のサイトをスマホにも対応させるレスポンシブデザインは難しくありません。
レスポンシブ対応は簡単に言うと、ビューポートを設定して、メディアクエリでcssを振り分けて調整するということです。
調整のポイントは以下3点を修正します。
- コンテンツの横幅をauto、または100%にする
- floatで振られた箇所をfloat:none;にする
- フォントサイズ、行間などの微調整
上記の修正ポイント3点と併せて、本記事でご紹介したcssを設定してみてください。
また、要素を指定するcssのdisplayもレスポンシブ対応デザインを作る際に非常に便利です。
レスポンシブ対応は、スマホが普及したとはいえ、タブレットユーザーの割合がまだ少ないように思われるようでしたら、スマホ用だけの対応でも良いかと思われます。
wordpressでサイトを運営している場合でしたら、レスポンシブデザインに対応したテンプレートやプラグインを適応する方法もひとつの手段です。
また、スマホユーザーの割合が多いサイトに関して早めの対応をおすすめする理由に、クローラーによるインデックスの頻度が挙げられます。
クローラーは元々インデックスされているページや、被リンクから辿ってページを発見・インデックスします。このことから、素早いスマホ対応にも外部リンク対策を含むSEO Packの導入をお勧めいたします。
SEO対策にも色々と種類がありますが、外部と内部の両方から対策して上位表示を目指しましょう。
レスポンシブデザインの作り方については記事「簡単！レスポンシブデザインの作り方のすべて」もご参考ください。
