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

CSSのメディアクエリを使って画面サイズに応じてレイアウトを切り替える方法

CSSで画面サイズに基づいてレイアウトを動的に変更したい場合、メディアクエリ（@media）を使用します。メディアクエリを使うことで、デバイスの画面幅に応じて要素の幅や配置を柔軟に切り替えられ、レスポンシブデザインを実現できます。

以下は、4つのカラムを持つレイアウトが、画面サイズに応じて自動的に変化するサンプルコードです。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
    box-sizing: border-box;
}
.col {
    color: white;
    float: left;
    width: 25%;
    padding: 10px;
}
.colContainer:after {
    content: "";
    display: table;
    clear: both;
}
@media screen and (max-width: 900px) {
    .col {
        width: 50%;
    }
}
@media screen and (max-width: 600px) {
    .col {
        width: 100%;
    }
}
</style>
</head>
<body>
<h1>CSSで画面サイズに合わせてレイアウトを変更する</h1>
<h2>画面幅をリサイズすると、下のdiv要素の幅が自動的に調整されます</h2>
<div class="colContainer">
<div class="col" style="background-color: rgb(153, 29, 224);">
<h2>1つ目のカラム</h2>
</div>
<div class="col" style="background-color: rgb(12, 126, 120);">
<h2>2つ目のカラム</h2>
</div>
<div class="col" style="background-color: rgb(207, 41, 91);">
<h2>3つ目のカラム</h2>
</div>
<div class="col" style="background-color: rgb(204, 91, 39);">
<h2>4つ目のカラム</h2>
</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSのメディアクエリを使って画面サイズに応じてレイアウトを切り替える方法

コードの解説

このサンプルのポイントは、以下の3つのブレークポイント設定です。

  • 初期状態： 各カラム（.col）は width: 25% に設定されており、4つのカラムが横一列に並びます。
  • 画面幅900px以下： @media screen and (max-width: 900px) の条件により、各カラムの幅が 50% に変わり、2列×2行のレイアウトに切り替わります。
  • 画面幅600px以下： @media screen and (max-width: 600px) の条件により、各カラムの幅が 100% になり、縦に1列ずつ積み重なるスマートフォン向けのレイアウトになります。

また、.colContainer:after によるクリアフィックス（clear: both）を指定することで、floatによるカラムの回り込みを解除し、親要素の高さ崩れを防いでいます。

さらに、<meta name="viewport"> タグを設定することで、モバイルデバイスでも画面幅に応じた正しい表示が可能になります。ブラウザのウィンドウ幅を変更しながら確認すると、レイアウトが段階的に変化する様子を実際に体感できます。

  1. CSSのメディアクエリで画面サイズに応じて列幅を変更する方法

    画面サイズに応じて列幅を動的に変更したい場合、CSSのメディアクエリ（@media）を使用するのが最も一般的で効果的な方法です。メディアクエリを活用すれば、ブラウザの幅に応じて異なるスタイルを適用でき、レスポンシブデザインを簡単に実現できます。 実装例 以下のコードでは、画面幅が700px以下になったタイミングで、列の幅を50%から100%へと変更しています。 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Ge

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ