プログラミング

【超初心者向け】レスポンシブ対応を簡単に習得する方法【デベロッパーツールを使おう】

レスポンシブ対応とは、PCでもスマホでも1つのURL(ページ)で最適化して表示させる技術です。

今回はレスポンシブ対応を簡単に習得できる方法をご紹介します。

この記事は、

この記事のおすすめ読者
  • CSSをある程度理解している
  • レスポンシブ対応をこれから勉強したい
  • レスポンシブ対応の勉強を始めたばかり

こんな人におすすめです。

 

また今回はCSSの書き方やHTMLのマークアップなどについては触れません。

すでに実用的にレスポンシブ対応を行なっている人には物足りないかもですね。

結論:レスポンシブ対応にはデベロッパーツールを使おう

です。

デベロッパーツールはWEB開発にとってとにかく便利なツールで、変更がすぐに目で見えるので、使い慣れれば開発が圧倒的に楽しくなりますよ。

WEB開発に必須なデベロッパーツール

デベロッパーツールの主な使い方は以下の記事で解説していますので、まずはこちらをご覧ください▼

【超初心者向け】CSSコーディングの効率が爆上がりする方法【デベロッパーツールを使おう】今回はCSSコーディングの効率が爆上がりする方法をご紹介します。 この記事は、 こんな人におすすめです。 ...

上記の記事で述べているように、デベロッパーツールでは以下のようなことができます。

  1. CSSの確認・修正
  2. コンソールログの確認
  3. JavaScriptのデバック
  4. HTMLタグの確認・修正
  5. レスポンシブ対応の確認

 

この中で今回は、

  1. CSSの確認・修正
  2. HTMLタグの確認・修正
  3. レスポンシブ対応の確認

の3つを活用していきます。

デベロッパーツールでレスポンシブ対応を確認する

デベロッパーツールの使い方がわかってきたところで、レスポンシブ対応にも挑戦してみましょう。

デベロッパーツールで下記のアイコンをクリックすると、簡単にレスポンシブ対応の確認ができます。

すると表示しているページが画像のように変わります。

上部の「Responsive」をクリックするとたくさん選択肢が出てくるので、好みのデバイスを選びます。

iPhoneXをクリックすると、以下のようにiPhoneXの画面サイズで表示してくれます。

あとは先ほど紹介したように、「element.style」などにスマホ向けのプロパティを追加していけば、最適なレスポンシブ対応がリアルタイムで確認できます。

最適化できたら、実際のソースコードにも同じように書き込めば完了です。

 

というわけで今回は以上です。