CSS 位置レイアウトを使用して Web ページのカードレイアウトをデザインする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS 位置レイアウトを使用して Web ページのカードレイアウトをデザインする方法

王林

Sep 28, 2023 am 08:17 AM

ウェブデザインCSS 位置レイアウトカードレイアウト

如何使用CSS Positions布局设计网页的卡片布局

CSS 位置レイアウトを使用して Web ページのカードレイアウトをデザインする方法

Web デザインでは、カードレイアウトは一般的で人気のあるデザイン方法です。コンテンツを独立したカードに分割し、各カードには特定の情報が含まれており、きちんとした階層化されたページ効果を簡単に作成できます。この記事では、CSS Positions レイアウトを使用して Web ページのカードレイアウトをデザインする方法を紹介し、具体的なコード例を添付します。

HTML 構造の作成

まず、カードレイアウトを表す HTML 構造を作成する必要があります。以下は簡単な例です:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h2 id="卡片标题">卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2 id="卡片标题">卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2 id="卡片标题">卡片标题</h2>
      <p>卡片内容...</p>
    </div>
  </div>
</body>
</html>

上記のコードでは、複数のカードを含むコンテナ div (class="card-container") を使用しており、各カードは独立した div 要素 ( class="card ")、タイトルと内容が含まれます。

CSS スタイル

次に、CSS スタイルを使用してカードレイアウトを制御する必要があります。 CSS Positions プロパティを使用してカードを配置します。

.card-container {
  display: flex;
  justify-content: center;
}

.card {
  width: 300px;
  height: 200px;
  background-color: #F2F2F2;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

上記のコードでは、フレックスレイアウト (表示: フレックス) を使用して、カードを水平方向の中央に配置します (justify-content: center)。

カードスタイルには、幅と高さ (width と height)、背景色 (background-color)、外側の余白 (margin) と内側の余白 (padding)、境界線の半径 (border-radius) とシャドウ (ボックスシャドウ)など。

相対位置を使用する

カードをコンテナ内のさまざまな位置に自由に配置したい場合は、相対位置 (位置:相対) を使用してこれを実現できます。。

.card {
  position: relative;
}

.card:first-child {
  top: -100px;
  left: -100px;
}

.card:nth-child(2) {
  top: 50px;
  left: 50px;
}

.card:nth-child(3) {
  top: 200px;
  left: 200px;
}

上記のコードでは、各カードの位置属性を相対に設定します。次に、top プロパティと left プロパティを使用して、コンテナに対する各カードの位置を指定します。

たとえば、最初のカードは :first-child 擬似クラスセレクターを使用して、コンテナーに対する相対位置を上 (上: -100px) と左 (左: -100px) に設定します。 2 番目のカードは、:nth-child(2) 擬似クラスセレクターを使用して、コンテナーに対する相対的な位置を下 (上: 50 ピクセル) と右 (左: 50 ピクセル) に設定します。 3 番目のカードは、:nth-child(3) 擬似クラスセレクターを使用して、コンテナーに対する相対的な位置を下 (上: 200 ピクセル) と右 (左: 200 ピクセル) に設定します。

絶対配置を使用する

カードを他の要素の影響を受けずにコンテナ内の固定位置に配置したい場合は、絶対配置 (位置) を使用できます。：絶対）を満たすために。

.card-container {
  position: relative;
}

.card {
  position: absolute;
}

.card:nth-child(1) {
  top: 0;
  left: 0;
}

.card:nth-child(2) {
  top: 0;
  right: 0;
}

.card:nth-child(3) {
  bottom: 0;
  right: 0;
}

上記のコードでは、コンテナの位置プロパティを相対に設定します。そして、各カードの位置プロパティを絶対に設定します。次に、top、right、bottom、left プロパティを使用して、コンテナに対する各カードの位置を指定します。

たとえば、最初のカードは、:nth-child(1) 擬似クラスセレクターを使用して、コンテナーに対する相対的な位置を左上隅 (上: 0、左: 0) に設定します。 2 番目のカードは、:nth-child(2) 擬似クラスセレクターを使用して、コンテナーに対する相対位置を右上隅 (上: 0、右: 0) に設定します。 3 番目のカードは、:nth-child(3) 疑似クラスセレクターを使用し、コンテナーに対する相対位置を右下隅 (下: 0、右: 0) に設定します。

概要:

CSS 位置レイアウトを使用して Web ページのカードレイアウトをデザインすることは、シンプルで強力な方法です。さまざまな配置方法を使用することで、ページ上でカードを自由または固定で配置できます。合理的なレイアウト構造とスタイル設定により、美しく階層的なカードレイアウトを簡単に作成できます。

この記事のコード例が、CSS 位置レイアウトをより深く理解し、カードレイアウトのデザインに適用するのに役立ち、Web デザインにより多くのインスピレーションと創造性をもたらすことを願っています。

以上がCSS 位置レイアウトを使用して Web ページのカードレイアウトをデザインする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

「CSS4」アップデートApr 11, 2025 pm 12:05 PM

私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある

3種類のコードApr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

HTTPSは簡単です！Apr 11, 2025 am 11:51 AM

私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました

HTMLデータ属性ガイドApr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AM

JavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。

最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません

脚注文字Apr 11, 2025 am 11:34 AM

脚注に最適な特別なスーパーセット番号の文字があります。ここにあります：

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。