Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

最近は、PCでサイトを見るよりもスマートフォンでサイトを見るほうが多くなり、スマートフォンで見られる対応は、もはや必須であるといえます。

Webサイトをスマートフォンで表示させるには色々な方法がありますが、メディアクエリーは、CSSスタイルに適用できるシンプルなフィルタです。メディアクエリーを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをデバイスの特性に基づいてスタイルを簡単に変更できるようになります。

viewportを設定する

Webページをさまざまなデバイス向けに対応するには、 head タグ内にmetaタグでviewport設定を記述する必要があります。
このmetaタグをhead内に入れていないとGoogleのモバイルフレンドリーテストにモバイルフレンドリーに対応されていませんと言われます。

そこで、下記の記述をヘッド内に記述することで、モバイルフレンドリー対応になります。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

しかし、スマフォ向けの対応をしていないWebサイトではこのように拡大されて表示されてしまいます。

Webサイトをビューポートに対応するようにCSSを書き換えなければいけません。
その中で比較的カンタンに設定出来るのがメディアクエリです。

メディアクエリを記述をする

.contents{
  width: 1080px;
  margin: 0 auto;
}

@media (max-width: 1079px;){
  .contents{
    width: 88%;
}

上記のような書き方をすると、ウィンドゥサイズ1080px以上は、1080pxの要素を作りますが、1079px以下になるとクラスcontentsはwidthが88%の要素に上書きされます。
ウィンドウサイズが1079px以下のcontentsクラスのCSSのは以下のように設定されています。

.contents{
  width: 88%;
  margin: 0 auto;
}

下記の例は、ウィンドゥの幅を狭くすると背景色が変更するCSSです。

.box_model{
  height: 100px;
  width: 100%;
  background: #2ecc71;
}

@media (max-width: 1000px){
  .box_model{
    background: #2980b9;  
  }
}

@media (max-width: 800px){
  .box_model{
    background: #8e44ad;
  }
}
@media(max-width: 400px){
  box_model{
    background: #d35400;
  }
}

.box_model{
  height: 100px;
  width: 100%;
  background: #2ecc71;
  margin: 0 !important;
}

@media (max-width: 1000px){
  .box_model{
    margin: 40px;
  }
}

また下記のように、CSSのポイントが上回っていない場合も適用されません。
変更されなかった場合は、適用するクラスにIDが付いていないか、適用するクラスのネストの数も確認してみましょう。

.box_model .box_text{
  color: #fff;
  background: #2ecc71;
  display: inline-block;
}

@media (max-width: 1000px){
  .box_text{
    background: #2ecc71;
  }
}

終わりに

PC版を基準としてメディアクエリーを作っていくタイプと、スマートフォン版を基準としてメディアクエリーを作るパターンが想定されます。
IE８以下はメディアクエリーが適用されないので、メディアクエリー内のCSSがすべて読み込まれません。

IE8以下をメディアクエリーに対応していませんが、css3-mediaqueryies.jsを追加すれば、メディアクエリー対応になります。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Tweet

Pocket

Related posts:

マージンとパディングの違いについておさらいしてみよう WEBサイトで扱う画像ファイルの種類 サイトにYouTubeの動画を埋め込んでみましょう バックグラウンドプロパティについて-前編-