CSS3メディアクエリ

CSS3メディアクエリ

  • メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されています
メディアクエリの記述方法と書式

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20161231/20161231003244.png

メディアクエリの記述方法
@media メディアタイプ and(条件){
  セレクタ(プロパティ:値; プロパティ:値;・・・・・)
}
  • メディアタイプは「screen(画面)」「print(印刷時)」「projection(プロジェクター)」「all(すべて)」などを指定できます
  • 条件を幅で指定するときは「max-width」または「min-width」を指定し、「:コロン」の後に「単位付きの数値」で条件を記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアクエリ</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
}
h1{
  margin-bottom: 16px;
  padding-top: 20px;
  border-bottom: solid 3px #F00;
}

@media screen and (max-width:480px) {
  #container {
    width: 100%;
  }
  h1{
    font-size: 2.0rem;
    background: #63A484;
    color: #FFF;
    padding: 5px 0 4px 0;
    border: none;
    text-align: center;
  }
  p{
    margin: 0 1.6rem;
    color: #947F44;
  }
}
</style>
</head>
<body>
<div id="container">
<h1>メディアクエリ</h1>
<p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素の書式を変更できるようになります。なお、スマートフォンでは、端末画面の幅(ピクセル数)が「ブラウザのウィンドウ幅」に相当します。</p>
</div><!-- /#container -->
</body>
</html>

画像をレスポンシブに

  • ブレイクポイント「640px」までが「スマートフォン用の指定」
  • それを超えると、PC用の指定が適用されます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メディアクエリ:画像</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 20px; font-size: 2.0rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
body {
  padding: 20px;
}
  img {
  width: 320px;
  vertical-align: bottom;
  }

@media (max-width:640px) {
  body{ padding: 0; }
  h1 {
    font-size: 2.0rem;
    padding: 10px;
    background: #333;
    color: #FFF;
  }
  img{
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>メディアクエリ:画像</h1>
<p><img src="img/01.png"><img src="img/02.png"></p>
</body>
</html>


求職者支援訓練 フェリカテクニカルアカデミー