yuta_eng_prg’s diary

筆者がプログラミング学習の内容を綴るだけのブログです。

レスポンシブWebデザインの導入方法

レスポンシブWebデザインの導入方法について確認します。

まず、htmlファイルのheadタグ内に

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

を追加し、CSSファイルに

/* タブレット表示時 */
@media (max-width: 1000px) {
  ここにタブレットで表示する際のCSSを記述する。
}

/* スマホ表示時 */
@media (max-width: 500px) {
  ここにスマホで表示する際のCSSを表示する。
}

上記のようにそれぞれのCSSを追加し、記述することで、レスポンシブWebデザインを導入できます。