これをみれば一発！レスポンシブCSSの切り替え・メディアクエリの書き方

レスポンシブCSSの切り替えにはメディアクエリを使います。

今からそのメディアクエリの設定方法を解説します。

＊テキストエディタにatomを使用しています。

ファイル作成

フォルダ内に新しいファイルを作成します。

（そのままCSSの下に書いてもいいのですが、見づらいため専用ファイルを作成します。）

フォルダー（ここではためし書きとかいてあるフォルダー）を右クリックします

新規ファイルをクリック。

ファイル名の入力画面が出てきます

responsive.cssなどいれてエンターキーを押せば　ファイルの作成は完了です。

そのファイルに

@charset “UTF-8”

と

リセットｃｓｓをまず打ち込みます。

htmlファイルのhead部分に

<link rel="stylesheet" href="responsive.css">
  <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

と打ち込んで、このファイルを読み込ませれば準備は完了です。

href部分にはファイル名を記入してください。

レスポンシブｃｓｓのファイルに

@media screen and (max-width:1000px) {


｝

↓

@media screen and (max-width:1000px) {

.box1{
      background-color:blue;
　　　｝

｝

などと書きます。

max-width:○○px;は「最大で○○px」ということです。

@media screen and (max-width:1000px)

というレスポンシブｃｓｓは画面幅が０～１０００pxの間の大きさの場合にこのような挙動をとってください。

と指定していることになります。

言い換えれば画面幅１０００ｐｘ以下の場合、このような挙動（背景を青）でお願いします。

と言ってる感じですね。

反対にmin-widthは「以上」を指定します。

HTML

CSS

レスポンシブCSS

結果