オンラインPC館

レスポンシブ

レスポンシブデザイン

レスポンシブデザインは異なる端末に対して個々に専用ページを作成するのではなく、既存のファイルを利用して対応させる手法です。
また、この方法はGoogleも推奨しており、様々なデバイスが混在する現在では非常に効果的な手法とされています。
レスポンシブデザインとは?
レスポンシブデザイン
レスポンシブ・ウェブデザインの簡単な作り方
WebページをRetina対応させるテクニック

レスポンシブレイアウトチェック

レスポンシブデザインを作成する際に、ローカル環境で簡単にレイアウトチェックを行う方法です。
チェック方法は色々ありますが、最も効果的なのは各ブラウザのレスポンシブモードを利用する方法です。
また、マルチレイアウトブラウザもあるので、それを利用しても可能です。
PageSpeed Insights、モバイルフレンドリーテスト

  1. Firefox:Firefoxのレスポンシブツール
  2. Chrome:右上のその他のツール→デベロッパーツール→Toggle device toolbar(左から二番目のアイコン)→端末を選択
  3. マルチレイアウトブラウザ