1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

cssで記述する基本的なレスポンシブ(メディアクエリ)

Posted at

###この記事で説明していること

  • メディアクエリについて
  • メディアクエリの書き方
  • その他

###メディアクエリについて

メディアクエリとは、Webページの見栄えを記述するCSS3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替えることが出来る機能のこと。

画面サイズに応じてcssを変更することが出来る。


###メディアクエリの書き方


<link rel="stylesheet" href="css/style.css" media="screen">

上記コードをhtmlに記載


@media screen and (min-width:299px){
  /*299px以下で適用する内容*/
}

@media screen and (min-width:300px){
  /*300px以上で適用する内容*/
}

@media screen and (min-width:600px){
  /*600px以上で適用する内容*/
}

上記コードをcssに記載
これで各画面サイズごとにcssを変更することが出来ます。

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?