CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。

構文（Syntax）

@mediaルールの基本的な構文は以下の通りです。

@media not | only mediatype and (expressions) {
    CSS-Code;
}

「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デバイスの状態に応じて柔軟にスタイルを切り替えられます。

例1：画面幅に応じてレイアウトと背景色を変更する

まずは、@mediaルールを使った具体的な例を見てみましょう。画面幅に応じてカラムの幅と背景色が変化します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}
.col {
    float: left;
    width: 20%;
    padding: 40px;
}
body {
    background-color: lemonchiffon;
    margin: 20px;
}
@media screen and (max-width: 850px) {
    .col {
        width: 50%;
    }
    body {
        background-color: mediumseagreen;
    }
}
@media screen and (max-width: 550px) {
    .col {
        width: 100%;
    }
    body {
        background-color: powderblue;
    }
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div>
</body>
</html>

出力結果

このコードを実行すると、画面幅に応じて以下のように表示が変化します。

画面サイズが850pxより大きい場合

5つのカラムが横一列に並び、背景色はレモンシフォン色（lemonchiffon）で表示されます。

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

画面サイズが550px〜850pxの場合

カラムは2列表示になり、背景色はミディアムシーグリーン（mediumseagreen）に変わります。

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

画面サイズが550px未満の場合

カラムは縦に全幅（100%）で積み重なり、背景色はパウダーブルー（powderblue）になります。

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

例2：画面幅に応じて背景画像と文字色を切り替える

次に、別の例を見てみましょう。こちらは画面幅に応じて段落の背景画像と文字色を変更するサンプルです。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 3px black;
    padding: 20px;
    background-origin: border-box;
}
@media screen and (max-width: 900px) {
    p{
        background: url("https://www.tutorialspoint.com/swing/images/swing.jpg");
        color: #c303c3;
    }
}
@media screen and (max-width: 500px) {
    p {
        color: black;
        background: url("https://www.tutorialspoint.com/cplusplus/images/cplusplus.jpg");
    }
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. </p>
</body>
</html>

出力結果

このコードを実行すると、画面幅に応じて以下のように表示が変化します。

画面サイズが500pxより大きい場合

通常のスタイルが適用され、背景画像は表示されません。

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

画面サイズが500px未満の場合

文字色が黒になり、C++のロゴ画像が背景として表示されます。

CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

まとめ

@mediaルール（メディアクエリ）を使いこなすことで、デバイスや画面サイズに応じたレスポンシブデザインを簡単に実現できます。特にスマートフォンやタブレットなど多様な画面幅に対応する現代のWeb制作において、必須のテクニックといえるでしょう。

  1. CSSの@importルールとは？メディアタイプ別にスタイルシートを読み込む方法

    CSSの@importルールは、外部スタイルシートを読み込むための@ルールです。インポートするCSSファイルのURLの後にメディアタイプを指定することで、「画面表示用」「印刷用」など、対象となるメディアごとに異なるスタイル情報を適用できます。@importの基本構文@importルールの基本的な書き方は以下のとおりです。@import url(/* ファイルパス */) メディアタイプ {     CSSコード; }それでは、実際のコード例を見ていきましょう。例1：screen（画面）とprint（印刷）でスタイルを切り替えるHTMLドキュメント<

  2. CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

    CSSの::first-line疑似要素は、要素内のコンテンツの「最初の1行」だけにスタイルを適用するためのセレクターです。段落の冒頭部分を目立たせたい場合などに活用できます。ただし注意点として、テキストを含む要素の幅が固定されていない場合、最初の行の長さはウィンドウサイズによって変化します。そのため、::first-lineで装飾される範囲も画面幅に応じて変わるという点を理解しておく必要があります。それでは、CSSの::first-line疑似要素の具体的な使い方を、サンプルコードとともに見ていきましょう。例1：最初の行に背景色と文字色を適用する<!DOCTYPE html> &