• 表示端末毎に表示スタイルを変える仕組み

• HTMLとCSSの組合せ
• CSSのみの切り替えと画面サイズに合わせてレイアウト変更 (RWD)

• 1つのHTMLで多くのデバイスに対応できるため, 情報の変更なので間違いが減る
• 画面幅の狭いデバイスから広いデバイスまで, 柔軟に対応できる

• デバイスごとのレイアウトを大幅に変更することは難しいため, 無理が出てくる場合がある
• PCからのアクセスの場合, Webブラウザーの画面幅によってレイアウトが変わってしまうため, 利用者が戸惑うことがある
• スマホ用WebサイトでもPC専用の情報が残ってしまう可能性がある

• レイアウトが切り替わる横幅のこと
• iPad Miniのサイズに合わせて768pxに設定することが多い.

style.css

@media only screen and (条件) and (条件) {
  .プロパティ タグ {
     css: value;
     ...
   }
{

や

@media (max-width: 768px) {
  ...
}

• メディアクエリーが重要
• メディアクエリーの中に記述したCSSには, PC向けの条件をいれてはならない.
• 基本的使い方は, PC用の幅広い向けにCSSを記述して, モバイル対応をメディアクエリーで上書きする方法をとる.

• 広い画面幅での表示のみを変えたい(グレーから赤)ときに有効

index.html

<div>
  <p>HTML</p>
</dev>

style.css

div {
  color: #666; /* グレー */
}

div p {
  color: # f00 /* 赤 */
}

@media only screen (max-width: 600px) {
  div p {
    color: # 666; /* グレー */
  }
}

• これでは, 元の(メディアクエリーでない部分の)<div>要素で定義している文字の色プロパティが変更になった際に, メディアクエリー内部も変更しなければならない.
• 手間がかかる
• inherit値で親のプロパティ値を引き継ぐ

~
@media only screen (max-width: 600px) {
  div p {
    color: inherit; /* 親(<div>)のcolorプロパティ値を継承する */
  }
}

style.css

.container {
  /* width: 800px; */
  max-width: 800px; /* 最大800pxまで, 800px未満は, その幅で可変になる */
}