CSSメディアクエリ-例

CSSメディアクエリ-その他の例

メディアクエリの使用例をいくつか見てみましょう。

メディアクエリは、カスタマイズされたスタイルシートをさまざまなデバイスに配信するための一般的な手法です。
簡単な例を示すために、さまざまなデバイスの背景色を変更できます。

例

/* Set the background color of body to tan */
body {
    background-color: tan;
}
    
/* On   screens that are 992px or less, set the background color to blue */
@media   screen and (max-width: 992px) {
  body {
      background-color: blue;
  }
}
    
/* On screens that are 600px or less,   set the   background color to olive */
@media screen and (max-width: 600px) {
    body {
    background-color: olive;
  }
}

自分で試してみる»

なぜ正確に992pxと600pxを使用するのか疑問に思いますか?これらは、デバイスの「典型的なブレークポイント」と呼ばれるものです。典型的なブレークポイントについて詳しくは、レスポンシブWebデザインのチュートリアル.

メニューのメディアクエリ

この例では、メディアクエリを使用して、画面サイズごとにデザインが異なるレスポンシブナビゲーションメニューを作成します。

大画面:

HOME リンク 1 リンク 2 リンク 3

小さい画面:

家リンク 1 リンク 2 リンク 3

例

/* The navbar container */
.topnav {
  overflow: hidden;
     background-color: #333;
}
    
/* Navbar links */
.topnav a {
  float:    left;
  display: block;
  color:    white;
  text-align: center;
  padding: 14px 16px;
     text-decoration: none;
}
    
   /* On screens that are 600px wide or less, make the menu links stack on top    of each other instead of next to each other */
@media screen and (max-width: 600px) {
        .topnav a {
    float: none;
    width:    100%;
  }
}

自分で試してみる»

列のメディアクエリ

メディアクエリの一般的な用途は、柔軟なレイアウトを作成することです。
この例では、さまざまな画面サイズに応じて、4列、2列、または全幅列の間で変化するレイアウトを作成します。

大画面:

中画面:

小さい画面:

例

/* Create four equal columns that floats next to each other */
.column {
    float: left;
  width: 25%;
}
    
/* On screens that are 992px   wide or less, go from   four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
    width: 50%;
  }
}
    
/* On screens that are   600px wide or less, make   the columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
  .column {
    width:   100%;
  }
}

自分で試してみる»

ヒント：列のレイアウトを作成するより現代的な方法は、CSSFlexboxを使用することです(以下の例を参照)。ただし、InternetExplorer10以前のバージョンではサポートされていません。IE6-10のサポートが必要な場合は、floatを使用します(上記を参照)。

フレキシブルボックスレイアウトモジュールの詳細については、CSSフレックスボックスの章を読む.

レスポンシブウェブデザインの詳細については、レスポンシブWebデザインのチュートリアルを読む.

例

/* Container for flexboxes */
.row {
  display: flex;
    flex-wrap: wrap;
}
    
/* Create four equal columns */
.column {
  flex: 25%;
    padding: 20px;
}
    
/* On screens that are 992px wide or less, go from   four columns to two columns */
@media screen and (max-width: 992px) {
    .column {
    flex: 50%;
  }
}
    
/* On screens that are 600px wide or less, make   the columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
  .row {
      flex-direction: column;
  }
}

自分で試してみる»

メディアクエリで要素を非表示にする

メディアクエリのもう1つの一般的な用途は、さまざまな画面サイズで要素を非表示にすることです。

私は小さな画面に隠れます。

例

/* If the screen size is 600px wide or less, hide the element */
@media   screen and (max-width: 600px) {
  div.example {
      display: none;
  }
}

自分で試してみる»

メディアクエリでフォントサイズを変更する

メディアクエリを使用して、さまざまな画面サイズで要素のフォントサイズを変更することもできます。

可変フォントサイズ。

例

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width:   600px) {
  div.example {
      font-size: 80px;
  }
}
    
/* If screen size is 600px wide, or less,   set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
      font-size: 30px;
  }
}

自分で試してみる»

柔軟な画像ギャラリー

この例では、メディアクエリをフレックスボックスと共に使用して、レスポンシブイメージギャラリーを作成します。

例

自分で試してみる»

柔軟なウェブサイト

この例では、メディアクエリをフレックスボックスと共に使用して、柔軟なナビゲーションバーと柔軟なコンテンツを含むレスポンシブWebサイトを作成します。

例

自分で試してみる»

向き:縦/横

メディアクエリを使用して、ブラウザーの向きに応じてページのレイアウトを変更することもできます。

ブラウザーウィンドウが高さよりも広い場合にのみ適用される一連のCSSプロパティを使用できます。これは、いわゆる「横向き」の向きです。

例

横向きモードの場合は水色の背景色を使用します。

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

自分で試してみる»

最小幅から最大幅

また、(max-width: ..) and (min-width: ..)最小幅と最大幅を設定する値。

たとえば、ブラウザーの幅が600～900ピクセルの場合、<div>要素の外観を変更します。

例

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
      font-size: 50px;
    padding: 50px;
      border: 8px solid black;
    background: yellow;
  }
}

自分で試してみる»

追加の値を使用する:以下の例では、カンマを使用して既存のメディアクエリに追加のメディアクエリを追加します(これはOR演算子のように動作します)。

例

/* When the width is between 600px and 900px <strong>OR</strong> above 1100px   - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width:   600px), (min-width: 1100px) {
  div.example {
      font-size: 50px;
    padding: 50px;
      border: 8px solid black;
    background: yellow;
  }
}

自分で試してみる»

CSS@mediaリファレンス

すべてのメディアタイプと機能/表現の完全な概要については、CSS リファレンスの @media ルール.

ヒント：レスポンシブWebデザイン(さまざまなデバイスや画面をターゲットにする方法)の詳細については、メディアクエリブレークポイントを使用して、こちらをお読みください。レスポンシブWebデザインのチュートリアル.

実績多数！おすすめのプログラミングスクール９選

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

HTML and CSS

Javascript

Backend

プロンプトエンジニアリング

CSSメディアクエリ-例

CSSメディアクエリ-その他の例

例

メニューのメディアクエリ

例

列のメディアクエリ

例

例

メディアクエリで要素を非表示にする

例

メディアクエリでフォントサイズを変更する

可変フォントサイズ。

例

柔軟な画像ギャラリー

例

柔軟なウェブサイト

例

向き:縦/横

例

最小幅から最大幅

例

例

CSS@mediaリファレンス

プログラミング学習を加速させる

チュートリアル

CSSメディアクエリ-例

CSSメディアクエリ-その他の例

例

メニューのメディア クエリ

例

列のメディア クエリ

例

例

メディアクエリで要素を非表示にする

例

メディアクエリでフォントサイズを変更する

可変フォントサイズ。

例

柔軟な画像ギャラリー

例

柔軟なウェブサイト

例

向き:縦/横

例

最小幅から最大幅

例

例

CSS@mediaリファレンス

プログラミング学習を加速させる

チュートリアル

メニューのメディアクエリ

列のメディアクエリ