PCサイトをレスポンシブ化する時に気をつけたいポイント３つ - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

こんにちは、花岡です。
夏が近づいてきましたね！今年の夏こそはロードバイクのイベントに参加したいと思っています。それと、もちろんビールも楽しみたいです！さて、今回のテーマはPCサイトをレスポンシブ化した際に起こりがちなCSSのトラブルとその解決策についてです。

Webサイトのレスポンシブ化には気をつけるべきポイントがいくつかあります。

スマホ向けにサイト幅を指定

スマートフォンでの閲覧を快適にするためには、まずmetaタグでviewportを指定することが重要です。これを設定していないと、大きなサイトがそのまま表示され、画面が崩れてしまう可能性があります。

例えば、以下のmetaタグの指定は、画面幅1400pxのサイトをスマホに適したサイズに縮小し、ピンチイン・ピンチアウト操作が可能になります。

meta name="viewport" content="width=1400, user-scalable=yes"

• width
  デフォルトは980pxで、範囲は[200, 10,000]。指定がないと、表示コンテンツが小さくなり見づらくなります。
• height
  デフォルトの高さはwidthと縦横比から計算され、範囲は[223, 10,000]です。
• initial-scale
  最初の読み込み時の拡大率。デフォルトは画面に合わせて表示されます。
• minimum-scale
  ユーザーが操作可能な拡大率の下限で、デフォルトは0.25です。
• maximum-scale
  ユーザーが操作可能な拡大率の上限で、デフォルトは1.6です。
• user-scalable
  ユーザーが拡大縮小できるかをyesかnoで設定します。デフォルトはyesです。

iOS向けに文字サイズをリセット

次に、iPhoneでは自動的にフォントサイズを調整する機能があり、これが問題の原因になることがあります。

この対策として、CSSでbodyなどに以下を追加します。

-webkit-text-size-adjust: 100%;

デフォルトではこの設定がautoになっているため、上書きが必要です。

なぜnoneではだめなのか？

noneに設定すると、フォントサイズ調整機能が無効になってしまうため、100%に設定するのがベストです。
noneにすると、PCで同じ画面を見た際にブラウザの拡大で文字が拡大されなくなってしまいます。

もしAndroidだけで文字サイズが大きくなる場合は、以下の指定を行ってみてください。改善されることが多いです。

max-height: 9999999px;

Androidでpタグの横幅が狭まるバグ対策

こちらは一部のAndroid端末で発生するバグです。
ページの自動調整機能が原因と考えられていますが、詳細は不明です。

私が調べたところ、以下のCSSで解決できることが分かりました。

p {background-image:url(image);}

こちらはpタグに空の背景スタイルを指定する方法です。詳しくは参考サイトをご覧ください。

これらのポイントを押さえることで、PCサイトがスマートフォンでも快適に表示されるようになります。

まとめ

PCサイトをレスポンシブ化するのは、なかなか手間がかかりますが、スマホ特有のバグに対処することもまた大切です。
結局、スマホサイトをしっかり設計することが一番の解決策かもしれませんね。