読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Media Queries(メディアクエリ)

レスポンシブWebデザイン

Media Queries(メディアクエリ)

  • CSS3
  • htmlドキュメントのコンテンツをマルチデバイス最適化した表示を実現する手法
  • ユーザーエージェント判別によるCSS切り換え
ブレイクポイント
  • ブレイクポイントを480px、768px、980pxとした場合
PCのスタイルから記述していく方法
  • デフォルトでPC用のスタイルを定義し、タブレットスマートフォン用のスタイルはMedia Queriesを使って上書きしていく「PCファースト」的な方法
/* デフォルト:980px以上用(PC用)の記述 */

@media screen and (max-width: 979px) {
    /* 979px以下用(タブレット用)の記述 */
}

@media screen and (max-width: 767px) {
    /* 767px以下用(タブレット/スマートフォン用)の記述 */
}

@media screen and (max-width: 479px) {
    /* 479px以下用(スマートフォン用)の記述 */
}
スマートフォン用のスタイルから記述していく方法
/* デフォルト:479px以下用(スマートフォン用)の記述 */

@media screen and (min-width: 480px) {
    /* 480px以上用(タブレット/スマートフォン用)の記述 */
}

@media screen and (min-width: 768px) {
    /* 768px以上用(タブレット用)の記述 */
}

@media screen and (min-width: 980px) {
    /* 980px以上用(PC用)の記述 */
}
それぞれの画面幅個別に指定する方法
  • それぞれの画面幅毎に全く別のスタイルを定義する方法
@media screen and (min-width: 980px) {
    /* 980px以上用(PC用)の記述 */

@media screen and (min-width: 768px) and (max-width: 979px) {
    /* 768px - 979px用(タブレット用)の記述 */
}

@media screen and (min-width: 480px) and (max-width: 767px)  {
    /* 480px - 767px用(タブレット/スマートフォン用)の記述 */
}

@media screen and (max-width: 479px) {
    /* 479px以下用(スマートフォン用)の記述 */
}
IE対応
  • Respond.jscss3-mediaqueries-jsを使って、IE8以下もレスポンシブ対応を行う
  • IE8以下はPCでの表示はサポートするが、レスポンシブ対応はしない
  • IE8以下は完全除外!

メディアクエリを使った指定

  • CSSの指定を行う際、条件を付加できる機能
メディアクエリの記述方法
@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: middle;
  }

@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>