(実験)Webサイトを制作してもらう
猫用のおもちゃの販売サイトを作りたいと思っています。それにあたって商品の魅力を伝えるwebページを作成してください。期待するコードはHTML、CSS、JavaScriptです。
猫用のおもちゃの販売サイトを作りたいと思っています。それにあたって商品の魅力を伝えるwebページを作成してください。期待するコードはHTML、CSS、JavaScriptです。
・サイト全体のテーマカラーはアメリカンショートヘアの茶色とグレーをイメージしたヵラーでお願いします。
・サイトは3つのセクションがあります。(１つ目は「ファーストビュー」、２つ目は「店舗情報」、３つ目は「お問合せフォームです」)
・ファーストビューは左右に次の要素を配置してください
– ファーストビューの左には「癒やし」「安心」「喜び」をテーマにした見出しとその下にキャッチーなテキストを2行ほどの作成してください。
– ファーストビューの右には画像のスライダーを配置したいと思います。(スライダーの作成は「swiper.js」でお願いします。)画像は猫をテーマにして5つでお願いします。
・店舗情報は以下の文章を左に配置して、左には右にはGoogle MAPを配置してください。
「店舗情報」
– 住所:東京都大田区蒲田1-1-1
– 営業時間: 平日9:00 ~ 18:00
– 電話番号: 000-000-0000
・お問合せフォームの入力欄は次の構成でお願いします。
– メールアドレス: 1行の入力欄
– 電話番号: 1行の入力欄
– 件名: 1行の入力欄
– 本文: 複数のテキスト欄
– 送信ボタン
・お問い合わせフォームは左右中央揃えで配置してください
・フッターに©nyannyan.comを追加してください
以下にHTML、CSS、JavaScriptを使用して、あなたの要望に基づいて猫用のおもちゃの販売サイトのテンプレートを提供します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猫用のおもちゃの販売サイト</title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<style>
body {
font-family: Arial, sans-serif;
color: #4a4a4a;
}
header {
background-color: #9d8b70;
padding: 1rem 0;
text-align: center;
font-size: 2rem;
color: white;
}
.container {
display: flex;
justify-content: space-between;
padding: 2rem;
}
.left {
width: 50%;
}
.right {
width: 50%;
}
h2 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #636363;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.store-info {
display: flex;
justify-content: space-between;
padding: 2rem;
}
.map {
width: 50%;
height: 400px;
border: 1px solid #4a4a4a;
}
.contact-form {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
input,
textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #4a4a4a;
}
button {
background-color: #9d8b70;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
font-size: 1rem;
}
footer {
text-align: center;
padding: 1rem 0;
background-color: #9d8b70;
color: white;
}
</style>
</head>
<body>
<header>
猫用のおもちゃの販売サイト
</header>
<section class="container">
<div class="left">
<h2>癒やし・安心・喜び</h2>
<p>猫ちゃんの幸せのために、最高のおもちゃを提供します。</p>
<p>喜びいっぱいの猫用おもちゃで、毎日を楽しく過ごしましょう。</p>
</div>
<div class="right">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="cat1.jpg" alt="猫の画像1" style="width: 100%; height: auto;"/>
</div>
<div class="swiper-slide">
<img src="cat2.jpg" alt="猫の画像2" style="width: 100%; height: auto;"/>
</div>
<div class="swiper-slide">
<img src="cat3.jpg" alt="猫の画像3" style="width: 100%; height: auto;"/>
</div>
<div class="swiper-slide">
<img src="cat4.jpg" alt="猫の画像4" style="width: 100%; height: auto;"/>
</div>
<div class="swiper-slide">
<img src="cat5.jpg" alt="猫の画像5" style="width: 100%; height: auto;"/>
</div>
</div>
</div>
</div>
</section>
<section class="store-info">
<div class="left">
<h2>店舗情報</h2>
<p>住所: 東京都大田区蒲田1-1-1</p>
<p>営業時間: 平日9:00 ~ 18:00</p>
<p>電話番号: 000-000-0000</p>
</div>
<div class="right">
<div id="map" class="map"></div>
</div>
</section>
<section class="contact-form">
<h2>お問い合わせフォーム</h2>
<form>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<label for="phone">電話番号:</label>
<input type="tel" id="phone" name="phone">
<label for="subject">件名:</label>
<input type="text" id="subject" name="subject">
<label for="message">本文:</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">送信</button>
</form>
</section>
<footer>
© nyannyan.com
</footer>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
// Swiper
const swiper = new Swiper(".swiper-container", {
slidesPerView: 1,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
// Google Maps
function initMap() {
const location = { lat: 35.561214, lng: 139.71667 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: location,
});
const marker = new google.maps.Marker({
position: location,
map: map,
});
}
</script>
</body>
</html>このコードは、あなたの要求に基づいて猫用のおもちゃの販売サイトのテンプレートを提供します。各セクションが正しく配置され、テーマカラーとしてアメリカンショートヘアの茶色とグレーが使用されています。ファーストビューには左右に見出しとスライダーが配置され、店舗情報とお問い合わせフォームも含まれています。
ただし、Googleマップを表示するには、YOUR_API_KEYを実際のAPIキーに置き換える必要があります。また、猫の画像はcat1.jpg、cat2.jpg、cat3.jpg、cat4.jpg、cat5.jpgという名前で、プロジェクトフォルダに配置してください。適切な画像がない場合は、代替の画像URLに置き換えてください。
おおお！
すごい！swiperが動いてなかったり、デザインが崩れてるけど、これはプロンプトをチューニングすれば治ります？
すみません、swiper.jsの初期化が正しく行われていなかったため、スライダーが動作していませんでした。また、デザインの崩れについても修正します。以下の修正版のコードをお試しください。
(またソースを書いてくれてる)
swiperはドラッグで動くようになりました。おそらくautoplayなど、細かく指示すれば可能かも。また、デザイン崩れはレスポンシブ非対応なのでそこもプロンプトのチューニングが必要かも。また試すね。
