レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編

ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、その際によく使う、cssのポイントをご紹介します。

画像を可変にする

レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にします。

下記の設定で、最大でも実寸サイズとなり、画面サイズからはみ出すことを防ぐことができます。それ以下のサイズの場合は画面幅に合わせて縮小されます。

img {max-width:100%;}

スマホを横にしても文字サイズを変えない

デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用cssに下記タグを追記します。

body {-webkit-text-size-adjust:100%;}

padding、borderの幅をwidthに含めない

この設定はかなり便利です。一昔前はpaddingの幅がwidthに含まれていたため、その分を引いた幅をwidthに指定したりしていましたが、横幅100%の使用率の高いレスポンシブデザインでは、100%+paddingの横幅と解釈され、横スクロールが出てしまいます。

ですが、この1行を追加するだけで、そんな計算を考えずに進めることができます。レスポンシブデザイン導入の際には、ぜひこのタグを記述してください。

html {box-sizing: border-box;}

デバイスによっては部分的に非表示にしたい

レスポンシブデザインにしていくと、たまにどうしてもcssだけでは表現できない箇所もでてきます。そんな時は例えば、スマホ用とpc用のコンテンツをhtmlの方に記述して、cssでスマホの場合はpc用コンテンツを非表示にする。といった設定をします。

クラス名は任意でこのようなcssを用意して構築します。

@media screen and (min-width: 641px) {
.screensize_sp {display:none;} /*pcで閲覧したら非表示にするスマホ用コンテンツ*/
}

@media screen and (max-width: 640px) {
.screensize_pc {display:none;} /*スマホで閲覧したら非表示にするpc用コンテンツ*/
}

意図しない番号リンクは設置しない

スマホは、電話番号ではない数字などを自動的に電話番号リンクと認識してリンクが付きます。
これを防ぐにはヘッダーに下記メタタグを追加します。

<meta name="format-detection" content="telephone=no">

電話番号にリンクしたい場合は個別にこのように書いてあげると間違いありません。

<a href="tel:0301234567">03-0123-4567</a>

レスポンシブデザインの確認方法

レスポンシブデザインを確認する方法ですが、下記サイトのようなブラウザでチェックできるツールが数多くあります。

http://www.jamus.co.uk/demos/rwd-demonstrations/

ただ、使ってみると多少重たく、実機で検証した時と比べると100%正しくレンダリングされていないように思われます。ということで、可能であれば実機で確認しながらの作業をおすすめします。

レスポンシブデザインにする方法まとめ

現状のサイトをスマホ対応するレスポンシブデザインは難しくありません。
簡単に言うと、ビューポートを設定して、メディアクエリでcssを振り分けて調整する。

調整とは具体的に…

• コンテンツの横幅をauto、または100%にする
• floatで振られた箇所をfloat:none;にする
• フォントサイズ、行間などの微調整

といった修正になります。

スマホが普及したとはいえ、タブレットユーザーの割合がまだ少ないように思われるようでしたら、スマホ用だけの対応でも良いかと思われます。
wordpressでサイトを運営している場合でしたら、レスポンシブデザインに対応したテンプレートやプラグインを適応する方法もひとつの手段かもしれません。

また、スマホユーザーの割合が多いサイトに関して早めの対応をおすすめする理由に、クローラーによるインデックスの頻度が挙げられます。

モバイルフレンドリーテストに合格したページがウェブマスターツールのモバイルユーザビリティのエラーにまだ残っているように、正しくクローラーが巡ってこない限り、スマホ対応ラベルが付かないということになります。

クローラーは元々インデックスされているページや、被リンクから辿ってきます。このことから、素早いスマホ対応にもSEO Packは効果が期待できると思われます。
SEO対策にも色々と種類がありますが、外部と内部の両方から対策して上位表示を目指しましょう。