レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ

メディアクエリの指定方法

小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。

/* デフォルト：1024px以上用（PC用）の記述 */
@media screen and (max-width: 1023px) {
/* 1023px以下用（タブレット用）の記述 */
}
@media screen and (max-width: 767px) {
/* 767px以下用（タブレット／スマートフォン用）の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用（スマートフォン用）の記述 */
}

この場合1024px、768px、480pxの3つブレークポイントを設定するわけですが、2カラムの場合は768px、480pxだけでいい気もします。次は小さいディスプレイから指定します。

/* デフォルト：479px以下用（スマートフォン用）の記述 */
@media screen and (min-width: 480px) {
/* 480px以上用（タブレット／スマートフォン用）の記述 */
}
@media screen and (min-width: 768px) {
/* 768px以上用（タブレット用）の記述 */
}
@media screen and (min-width: 1024px) {
/* 1024px以上用（PC用）の記述 */
}

モバイルファーストで考えると前者ですが、メディアクエリに対応していないIE8以下の場合の対応も必要になります。これは次で紹介します。

個人的にはモバイル用から作った経験はまだないですが、今後主流になりそうですし慣れていかないといけないなと感じています。

メディアクエリのIE対策

IE8以下はメディアクエリに対応していません。メディアクエリに対応していないブラウザのためにcss3-mediaqueries-jsが提供されています。

以下のコードを追加すると対応してくれます。

モバイルファーストでスマホ用からデザインするする場合でIE8以下も考慮する場合はこれは追加してやればいいわけです。

海外のサイトだとIE8なんか気にせずモバイルファーストで設計されているサイトも結構ありますが、日本だとまだまだ無視できなさそうです。

画像を横幅全体に表示

画像が納まるボックスのサイズに合わせて伸縮するようにしたいときに使えます。

img{
  max-width: 100%;
  height: auto;
}

これで画像が横いっぱいになるわけですが、スマホやタブレットを横にしたときに画像が大きくなりすぎることもあるので、数値で指定してもよいかもしれません。

Retina ディスプレイ用メディアクエリ

Retina ディスプレイは解像度が2倍になるので、ちょうどの画像を用意すると荒く表示されます。例えば、縦横500pxのボックスに背景画像を指定する場合、縦横1000px以上の画像を用意しないと荒くなります。

ということで、Retina ディスプレイ用に2倍の大きさの画像を用意する場合などに使えるメディアクエリです。

@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){
/* Retina ディスプレイ用の記述 */
}

主にスマホなどで使われているRetina ディスプレイですが、一般的に回線速度が遅い環境にあるスマホ用に大きな画像を用意するのも変な感じです。

私は面倒くさがりやさんなので、最初からRetina ディスプレイに対応できる大き目のサイズ画像だけ用意することが多いです。一応、TinyPNGで軽くします。

Like Boxを幅可変にする

様々なサイトで使われているFacebookのLike Boxを、設置されているボックスの幅に合わせて伸縮させる方法です。HTML5版の場合、以下のコードをCSSに追加するとうまくいきます。

.fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fbcomments iframe[style], .fb_iframe_widget span{ width: 100%! important; }

ちなみに、横幅に何も指定しないと300pxになります。100%を指定してみてもデフォルトの300pxになります。IFRAME版はコードに直接書き込んでも大丈夫でした。

Google Mapを横幅100%にしたときのナビゲーションコントロール

Google Mapを横幅を100%にしたときに左にあるナビゲーションコントロールがつぶれて表示されて変になります。

以下のコードを追加すると解決します。

#map-canvas label { width: auto; display:inline; }
#map-canvas img { max-width: none; }

また、スマホで見たときに、地図が画面いっぱいになってしまうと、下を移動しようとしてもGoogle mapが反応してしまい、下のコンテンツを見ることができなくなるので注意が必要です。

スマホを想定する場合のCSSで縦の長さを小さめに指定しておきましょう。

数字を電話番号と認識しないようにする

スマホは数字を見るとすぐに電話番号だと思ってしまうようで、勝手にリンクになりクリックすれば発信してしまいます。

見た目にもあまりよくないので、以下のコードを追加してこの機能を無効にします。

で、本当に電話番号だというところには以下のようにしてやるのがよいです。

連絡先：073-xxx-xxxx

これでクリックしたときに発信するようになります。

送信ボタンが変なので何とかしたい

送信ボタンはスマホで見たとき送信ボタンが変になるので対応します。

iPhone5で見た場合のデフォルトの送信ボタンはこんな感じです。かなり大きくしています。

で、以下のコードを追加してボタンのデザインを変えてみます。

input[type="submit"] { 
  padding: 7px 20px 5px;
  border: 0;
  border-bottom: 2px solid #45a0a0;
  border-radius: 0;
  background: #5EBABA;
  color: #fff;
}

するとこんな感じになります。

そんなつもりもないのにグラデーションかかっているし、どうも思い通りになりません。こんなときはCSSに以下のコードを追加します。

-webkit-appearance: none;

すると思い通りになります。

ちなみに、「-webkit-appearance: none;」だけ指定するとこんな感じになります。

リンクをタップしたときの色を変える

スマホの場合、マウスを乗せるという動作がありません。その代わりというわけではないですが、タップしたときの色を変えるという方法もあります。

タップしたときの動作ということでピンとこない方もいるかもしれませんが、下の画像でいう「テクノロジー」の部分です。

通常は黒系の半透明で覆われますが、元の背景が黒い場合は変化に気付きにくいので変更することもできます。以下のコードをリンク部分に追加すると白の半透明になります。

-webkit-tap-highlight-color: rgba(255,255,255,.2)

元の要素の上に覆いかぶさるように表示されるため、半透明のRGBaカラーで指定しないと、元の内容が見えなくなります。

横向きにしたときにフォントサイズが大きくなるのを防ぐ

縦で見ていたスマホを横にするとフォントサイズが大きくなります。別にそれでもいいという方もいると思いますが、縦でも横でも画面の大きさは同じなのでフォントサイズも同じにしておきたいです。

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

長い単語やURLを途中で折り返す

スマホは1行に表示される文字数が少ないので、URLなどは右にはみ出してしまうこともよくあると思います。長い英単語の場合は次の行に折り返してしまうので見えにくいという場合もあると思います。

折り返して表示したい要素に追加するだけで単語の途中でも折り返してくれます。

word-wrap: break-word;

URLなんか別に最後まで表示する必要もない、という方はこちらも使えます。

white-spce: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

これをテキストが納まるボックスに追加するとはみ出す部分が「…」で省略されます。

さいごに

というとこでレスポンシブにデザインする際に役立ちそうなことをスマホ対応を中心にまとめてみました。

よくある内容も多いですが、ひとつでも新しい発見があればうれしいです。