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

SEOならSEOパック
ご利用実績9077件 (2017/05/28現在)
2016年04月13日 2016年09月08日

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

只今タイムセールを実施中です。

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

レスポンシブデザインは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まとめ

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

調整とは具体的に…

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

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

また、要素を指定するcssのdisplayもレスポンシブデザインを作る際に非常に便利です。

【css】displayの値オススメ5つ!レスポンシブデザインにも便利
コーディング作業で使用頻度の高いcssのうちのひとつ、「display」は指定できる値が色々とあります。基本は、要素の表示を指定するもので、spanのようなインライン要素をブロック要素として扱うことができたり、コンテンツの中身を非表示にしたりと、レスポンシブデ...

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

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

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

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

レスポンシブデザインの作り方については下記の記事もご参考ください。
レスポンシブデザインの作り方すべて

SEO内部対策 トップに戻る
コンテンツSEOの強い味方「ezorisu-seo」
順位が上がるページには必ず評価されるコンテンツがあります。
その評価されるコンテンツとは何か?本ツールが解析します!
上位表示を目指すキーワードを入力してください
ezorisu-seoについて
SEOツールseodoor(せおどあ)に無料版が登場しました