Skip to content

Commit ffaa16e

Browse files
mega-kilomega-kilo
authored
Initial commit
0 parents  commit ffaa16e

File tree

4 files changed

+445
-0
lines changed

4 files changed

+445
-0
lines changed

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# MinWeb2025 Webページテンプレート
2+
3+
HTML, CSS, JavaScriptを使った基本的なWebページテンプレートです。
4+
5+
## ファイル構成
6+
7+
- `index.html` - メインのHTMLファイル
8+
- `css/styles.css` - スタイルシート
9+
- `js/script.js` - JavaScriptファイル
10+
11+
## 使い方
12+
13+
このテンプレートをベースにして、自分のプロジェクトをカスタマイズしてください。
14+

‎css/styles.css‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
/* ベース設定 */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
}
13+
14+
.container {
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
padding: 0 20px;
18+
}
19+
20+
a {
21+
text-decoration: none;
22+
color: inherit;
23+
}
24+
25+
/* ナビゲーション */
26+
header {
27+
background-color: #fff;
28+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
29+
position: sticky;
30+
top: 0;
31+
z-index: 100;
32+
}
33+
34+
nav {
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
padding: 20px;
39+
}
40+
41+
.logo {
42+
font-size: 24px;
43+
font-weight: bold;
44+
color: #2c3e50;
45+
}
46+
47+
.nav-links {
48+
display: flex;
49+
list-style: none;
50+
}
51+
52+
.nav-links li {
53+
margin-left: 30px;
54+
}
55+
56+
.nav-links a {
57+
color: #2c3e50;
58+
font-weight: 500;
59+
transition: color 0.3s;
60+
}
61+
62+
.nav-links a:hover {
63+
color: #3498db;
64+
}
65+
66+
/* ヒーローセクション */
67+
.hero {
68+
background-color: #3498db;
69+
color: white;
70+
text-align: center;
71+
padding: 100px 0;
72+
}
73+
74+
.hero h1 {
75+
font-size: 48px;
76+
margin-bottom: 20px;
77+
}
78+
79+
.hero p {
80+
font-size: 24px;
81+
margin-bottom: 30px;
82+
}
83+
84+
.cta-button {
85+
background-color: white;
86+
color: #3498db;
87+
border: none;
88+
padding: 12px 30px;
89+
font-size: 18px;
90+
border-radius: 5px;
91+
cursor: pointer;
92+
transition: background-color 0.3s, color 0.3s;
93+
}
94+
95+
.cta-button:hover {
96+
background-color: #2c3e50;
97+
color: white;
98+
}
99+
100+
/* セクション共通スタイル */
101+
section {
102+
padding: 80px 0;
103+
}
104+
105+
section h2 {
106+
font-size: 36px;
107+
text-align: center;
108+
margin-bottom: 50px;
109+
}
110+
111+
/* アバウトセクション */
112+
.about .content {
113+
display: flex;
114+
justify-content: space-between;
115+
align-items: center;
116+
}
117+
118+
.about .text {
119+
flex: 1;
120+
padding-right: 30px;
121+
}
122+
123+
.about .image {
124+
flex: 1;
125+
min-height: 300px;
126+
background-color: #f0f0f0;
127+
border-radius: 5px;
128+
}
129+
130+
/* サービスセクション */
131+
.services {
132+
background-color: #f9f9f9;
133+
}
134+
135+
.service-cards {
136+
display: flex;
137+
justify-content: space-between;
138+
flex-wrap: wrap;
139+
}
140+
141+
.card {
142+
background-color: white;
143+
border-radius: 5px;
144+
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
145+
padding: 30px;
146+
margin: 10px;
147+
flex: 1 1 300px;
148+
transition: transform 0.3s;
149+
}
150+
151+
.card:hover {
152+
transform: translateY(-10px);
153+
}
154+
155+
.card h3 {
156+
margin-bottom: 15px;
157+
color: #2c3e50;
158+
}
159+
160+
/* コンタクトフォーム */
161+
.contact {
162+
background-color: #2c3e50;
163+
color: white;
164+
}
165+
166+
form {
167+
max-width: 600px;
168+
margin: 0 auto;
169+
}
170+
171+
.form-group {
172+
margin-bottom: 20px;
173+
}
174+
175+
label {
176+
display: block;
177+
margin-bottom: 8px;
178+
}
179+
180+
input, textarea {
181+
width: 100%;
182+
padding: 12px;
183+
border-radius: 4px;
184+
border: none;
185+
}
186+
187+
.submit-button {
188+
background-color: #3498db;
189+
color: white;
190+
border: none;
191+
padding: 12px 30px;
192+
font-size: 18px;
193+
border-radius: 5px;
194+
cursor: pointer;
195+
transition: background-color 0.3s;
196+
}
197+
198+
.submit-button:hover {
199+
background-color: #2980b9;
200+
}
201+
202+
/* フッター */
203+
footer {
204+
background-color: #2c3e50;
205+
color: white;
206+
padding: 30px 0;
207+
text-align: center;
208+
}
209+
210+
.social-links {
211+
margin-top: 15px;
212+
}
213+
214+
.social-icon {
215+
margin: 0 10px;
216+
color: white;
217+
transition: color 0.3s;
218+
}
219+
220+
.social-icon:hover {
221+
color: #3498db;
222+
}
223+
224+
/* レスポンシブ設定 */
225+
@media (max-width: 768px) {
226+
.nav-links {
227+
display: none; /* モバイルメニュー実装時は変更 */
228+
}
229+
230+
.about .content {
231+
flex-direction: column;
232+
}
233+
234+
.about .text {
235+
padding-right: 0;
236+
margin-bottom: 30px;
237+
}
238+
}

‎index.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MinWeb2025 - Webページテンプレート</title>
7+
<link rel="stylesheet" href="css/styles.css">
8+
</head>
9+
<body>
10+
<header>
11+
<nav>
12+
<div class="logo">MinWeb2025</div>
13+
<ul class="nav-links">
14+
<li><a href="#home">ホーム</a></li>
15+
<li><a href="#about">概要</a></li>
16+
<li><a href="#services">サービス</a></li>
17+
<li><a href="#contact">お問い合わせ</a></li>
18+
</ul>
19+
</nav>
20+
</header>
21+
22+
<main>
23+
<section id="home" class="hero">
24+
<div class="container">
25+
<h1>MinWeb2025</h1>
26+
<p>Webページのテンプレート</p>
27+
<button class="cta-button">詳細を見る</button>
28+
</div>
29+
</section>
30+
31+
<section id="about" class="about">
32+
<div class="container">
33+
<h2>私たちについて</h2>
34+
<div class="content">
35+
<div class="text">
36+
<p>ここにあなたのプロジェクトや会社についての説明文を入れてください。ユーザーに価値を提供するコンテンツを作成しましょう。</p>
37+
<p>このテンプレートは HTML、CSS、JavaScript の基本的な使い方を示しています。</p>
38+
</div>
39+
<div class="image">
40+
<!-- ここに画像を追加 -->
41+
</div>
42+
</div>
43+
</div>
44+
</section>
45+
46+
<section id="services" class="services">
47+
<div class="container">
48+
<h2>サービス</h2>
49+
<div class="service-cards">
50+
<div class="card">
51+
<h3>サービス 1</h3>
52+
<p>サービスの詳細説明をここに記述します。</p>
53+
</div>
54+
<div class="card">
55+
<h3>サービス 2</h3>
56+
<p>サービスの詳細説明をここに記述します。</p>
57+
</div>
58+
<div class="card">
59+
<h3>サービス 3</h3>
60+
<p>サービスの詳細説明をここに記述します。</p>
61+
</div>
62+
</div>
63+
</div>
64+
</section>
65+
66+
<section id="contact" class="contact">
67+
<div class="container">
68+
<h2>お問い合わせ</h2>
69+
<form id="contact-form">
70+
<div class="form-group">
71+
<label for="name">お名前</label>
72+
<input type="text" id="name" required>
73+
</div>
74+
<div class="form-group">
75+
<label for="email">メールアドレス</label>
76+
<input type="email" id="email" required>
77+
</div>
78+
<div class="form-group">
79+
<label for="message">メッセージ</label>
80+
<textarea id="message" rows="5" required></textarea>
81+
</div>
82+
<button type="submit" class="submit-button">送信</button>
83+
</form>
84+
</div>
85+
</section>
86+
</main>
87+
88+
<footer>
89+
<div class="container">
90+
<p>&copy; 2025 MinWeb2025. All Rights Reserved.</p>
91+
<div class="social-links">
92+
<a href="#" class="social-icon">Twitter</a>
93+
<a href="#" class="social-icon">Facebook</a>
94+
<a href="#" class="social-icon">Instagram</a>
95+
</div>
96+
</div>
97+
</footer>
98+
99+
<script src="js/script.js"></script>
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)