以下は、2つの基本的なページ（ホームページと製品ページ）のコーディングの例です。1日でのコーディングを前提としています。デザインや要件によりますが、以下のコードは基本的な構造とスタイルを提供しています。
ホームページ (index.html)
<!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="style.css">
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">製品</a></li>
</ul>
</nav>
</header>
<section class="main-section">
<p>ウェブサイトのメインコンテンツがここに入ります。</p>
</section>
<footer>
<p>© 2023 ウェブサイト</p>
</footer>
<script src="script.js"></script>
</body>
</html>
製品ページ (product.html）
<!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="style.css">
</head>
<body>
<header>
<h1>製品ページ</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">製品</a></li>
</ul>
</nav>
</header>
<section class="product-section">
<h2>製品の特徴</h2>
<p>製品の説明がここに入ります。</p>
</section>
<footer>
<p>© 2023 ウェブサイト</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
.main-section,
.product-section {
text-align: center;
padding: 50px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
このコードは基本的な構造とスタイルを提供しますが、具体的な要件やデザインによっては調整が必要です。
JavaScript (script.js)
// script.js
// ホームページ用のJavaScript
document.addEventListener('DOMContentLoaded', function() {
// ページが読み込まれたときに実行されるコード
// ボタンがクリックされたときの処理
var homeButton = document.getElementById('homeButton');
homeButton.addEventListener('click', function() {
console.log('ホームボタンがクリックされました！');
});
});
// 製品ページ用のJavaScript
document.addEventListener('DOMContentLoaded', function() {
// ページが読み込まれたときに実行されるコード
// ボタンがクリックされたときの処理
var productButton = document.getElementById('productButton');
productButton.addEventListener('click', function() {
console.log('製品ボタンがクリックされました！');
});
});
上記のコードでは、ホームページと製品ページそれぞれで異なるボタンがクリックされたときに異なるメッセージがコンソールに表示されるようになっています。
これはウェブサイトに動的な挙動を追加する一例であり、実際のプロジェクトではさまざまな機能が必要になるかもしれません。ウェブサイトに特有の要件に合わせてJavaScriptコードを拡張して作成します。