More than 3 years have passed since last update.

[HTML] レスポンシブデザインのためのmetaタグ viewport

Posted at 2020-12-15

###metaタグ viewport

HTML 自分用の覚え書きです。

レスポンシブデザイン（タブレット、スマホの場合に表示を変えたい場合）には、metaタグ viewport を指定します。

CSSのメディアクエリにて、ウインドウ幅の指定により表示が変わるように記述します。

index.html

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

stylesheet.css

/* PC向けのCSS */
/* menuクラスに適用されるCSS */
.menu{
  background-color: #00FFFF;
}

/* ウインドウ幅が1000px以下のとき */
@media (max-width : 1000px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #00FF00;
  }
}

/* ウインドウ幅が500px以下のとき */
@media (max-width : 500px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #FF0000;
  }
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up