HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法
HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法
概要:
現代社会では、インターネットを通じて買い物をする人がますます増えています。より多くの消費者を引き付けるために、Web サイト開発者は美しく応答性の高い製品表示ページを作成する必要があります。この記事では、HTML と CSS を使用して、シンプルかつ効果的な商品表示レイアウトを実装する方法を紹介します。
ステップ 1: HTML 構造の設定
まず、基本的な HTML 構造を設定する必要があります。この構造では、div 要素を使用して製品のコンテナを作成し、そこに製品の画像、タイトル、価格を挿入します。以下は、基本的な HTML 構造の例です。
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="product">
<img src="/static/imghw/default1.png" data-src="product1.jpg" class="lazy" alt="HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<div class="product">
<img src="/static/imghw/default1.png" data-src="product2.jpg" class="lazy" alt="HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<!-- 添加更多的商品 -->
</div>
</body>
</html>上の例では、すべての製品を含むコンテナ div を設定しました。各プロダクトはクラス名「product」を持つ div として定義されます。製品画像、タイトル、価格がそれぞれ製品 div に挿入されます。
ステップ 2: CSS スタイルを設定する
次に、CSS を使用して製品表示レイアウトのスタイルを設定する必要があります。 CSS メディア クエリを使用してレスポンシブ レイアウトを実装します。以下は、CSS スタイルを設定する例です。
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: lightgray;
}
.product img {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.product {
width: 400px;
}
}
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.product {
width: 100%;
}
}上の例では、まずコンテナをフレックス レイアウトに設定し、flex-wrap プロパティを使用して、コンテナが幅を超えたときに項目を折り返すようにします。次に、製品の幅、マージン、パディングを設定し、テキストを中央揃えにします。最後に、製品コンテナの背景色を設定します。
@media クエリでは、さまざまな画面サイズに応じてさまざまなスタイルを設定します。最大幅が768pxの場合、商品の幅を400pxに設定します。最大幅が 480px の場合、flex-direction 属性を使用して商品を垂直に配置し、商品の幅を 100% に設定します。
ステップ 3: さらに製品を追加する
さらに多くの製品を表示したい場合は、HTML に製品 div を追加するだけです。既存の製品 div をコピーして、新しい製品をすばやく作成できます。製品の画像、タイトル、価格は必要に応じてカスタマイズできます。
概要:
HTML と CSS を使用して、レスポンシブな商品表示レイアウトを作成するのは難しくありません。 HTMLの構造とCSSのスタイルを設定することで、美しい商品表示ページを簡単に実装できます。さまざまなデバイスで製品が最適に表示されるように、メディア クエリを使用してさまざまな画面サイズに適応することを忘れないでください。この記事が、印象的なレスポンシブな商品表示レイアウトの作成に役立つことを願っています。
付録: サンプル ファイル
style.css:
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: lightgray;
}
.product img {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.product {
width: 400px;
}
}
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.product {
width: 100%;
}
}index.html:
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="product">
<img src="/static/imghw/default1.png" data-src="product1.jpg" class="lazy" alt="HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<div class="product">
<img src="/static/imghw/default1.png" data-src="product2.jpg" class="lazy" alt="HTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<!-- 添加更多的商品 -->
</div>
</body>
</html>上記のサンプル ファイルでは、2 つの製品回路図イメージが使用されています。独自の製品画像を使用してください。ファイル名とパスを、index.html 内の対応するものに忘れずに変更してください。
以上がHTML と CSS を使用してレスポンシブな商品表示レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
