【スマホ対応】横幅で大きくデザインを変更するCSS

 

先日Googleがスマホ検索ランキングを変更することを発表しましたね。

要するに「今後スマートフォン対応にしたらスマホ検索順位を上げる」ということです。
閲覧者の使い勝手の良さから考えるとスマホに対応すべきでしょうね。

またスマホ対応にすることで受注率・問い合わせ率もアップすることは確実なので、売上をアップするためのホームページならスマホ対応にしなきゃいけません。先日ご紹介したスマホ未対応WordPressサイトでもタップで電話できるようにして、その回数を計測する方法の冒頭で触れたとおり、直接タップで電話するという行為はスマホユーザーに浸透してきたと思われます。

 

さて、今回はスマホ対応するためのレスポンシブデザインで私が好きな技をご紹介します。

以下の参考サイトをご覧ください。
参考サイト　http://toya-norimasa.com/

大きな違いは「とうやの18チャレンジ！！」という画像がウィンドウの横サイズによって変更するという点です。
パソコンサイズのままレスポンシブにすると画像の横サイズが大きいため、字が小さくなってしまい利便性を損ねます。

そこで以下のコードを使います。

	<div class="pc">
	  <h2><img src="http://toya-norimasa.com/wp-content/uploads/2015/03/toya_14.png" width="650" height="62" alt="とうやの18チャレンジ"></h2>
	</div>
	<div class="smf">
	  <h2 style="padding-top:20px;"><img src="http://toya-norimasa.com/wp-content/uploads/2015/03/smf-18_03.jpg" width="380" height="120" alt="とうやの18チャレンジ"></h2>
	</div>

.smf{
  display:none;
}

@media only screen and (max-width: 980px) {
  .pc{
	  display:none;
	}
	.smf{
	display:block;
  }
}

ただ２つhtmlを書いてcssで分岐するだけです。

またcssは流用可能で、他にパソコンとスマホで分岐させたいときは以下をコピーして使うだけ。

	<div class="pc">
	</div>
	<div class="smf">
	</div>

やりすぎは表示速度を遅くしますが、少々なら全く問題ありません。