CSS を使用してレスポンシブグリッドレイアウトを実装する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS を使用してレスポンシブグリッドレイアウトを実装する方法

PHPz

Nov 21, 2023 pm 01:56 PM

cssレスポンシブグリッドレイアウト

CSS を使用してレスポンシブグリッドレイアウトを実装する方法

モバイルデバイスの人気と複数の画面サイズの登場により、レスポンシブグリッドレイアウトは重要な部分になりました。デザインと開発者に焦点を当てます。 CSS を使用してレスポンシブグリッドレイアウトを実装すると、Web ページをさまざまな画面サイズやデバイスに柔軟に適応させることができます。この記事では、CSS を使用してレスポンシブグリッドレイアウトを実装する方法を紹介し、具体的なコード例を示します。

CSS グリッドレイアウトの使用

CSS グリッドレイアウトは、ページのレイアウトをグリッドの形式で整理できる強力なレイアウトシステムです。グリッドレイアウトを使用してレスポンシブグリッドレイアウトを実装すると非常に便利で、適切なグリッドスタイルとアダプティブプロパティを設定するだけで済みます。

まず、Web ページのスタイルシートでグリッドコンテナーを定義する必要があります。 display:grid を使用してグリッドコンテナーを作成できます。例:

.grid-container {
  display: grid;
}

次に、grid-template-columns プロパティを使用して、グリッドコンテナーの数と列幅を定義します。パーセンテージ、em、rem などの単位を使用して列の幅を設定でき、繰り返し関数 (repeat()) を使用して繰り返し列を作成できます。例:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

このコードは、各列の幅が等しい 3 つの列を持つグリッドを作成します。

次に、grid-template-rows プロパティを使用して、列を定義するのと同じ方法で、グリッドコンテナーの行数と行の高さを定義できます。例:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
}

このコードは、3 列 4 行のグリッドを作成します。各行の高さは 100 ピクセルです。

メディアクエリ

グリッドレイアウトをさまざまな画面サイズに適応させるには、メディアクエリを使用して、さまざまな画面サイズでグリッドスタイルを設定する必要があります。

まず、@media キーワードを使用してメディアクエリを定義できます。画面の幅に基づいて、さまざまなグリッドスタイルを設定できます。例:

@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 100px);
  }
}

このコードは、画面幅が 600 ピクセル以下の場合、グリッドコンテナーが 2 列と 6 行を含み、各行の高さが 100 ピクセルになるように設定されることを示します。

複数のメディアクエリを使用して、必要に応じてグリッドスタイルをさまざまなサイズに設定できます。

レスポンシブグリッドレイアウトのコード例

以下は、CSS を使用してレスポンシブグリッドレイアウトを実装する方法を示す完全なコード例です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }

    @media screen and (max-width: 600px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 100px);
      }
    }

    .grid-item {
      background-color: #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
  </div>
</body>
</html>

この例では、グリッドコンテナーには 3 列と 4 行が含まれており、各グリッド項目は同じスタイルを持ち、画面幅が 600px 以下の場合にメディアクエリを使用してグリッドスタイルを変更します。

CSS グリッドレイアウトとメディアクエリを使用すると、柔軟で強力な応答性の高いグリッドレイアウトを実現できます。これらのテクニックを Web ページに適用して、さまざまなデバイスで見栄えが良くなるようにしてください。

以上がCSS を使用してレスポンシブグリッドレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、