<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のブログ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
color: #fff;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
color: #fff;
text-decoration: none;
padding: 0 15px;
}
.navbar a:hover {
text-decoration: underline;
}
.navbar .menu-toggle {
display: none;
}
.navbar .menu {
display: flex;
}
.navbar .menu .dropdown {
position: relative;
display: inline-block;
}
.navbar .menu .dropdown-content {
display: none;
position: absolute;
background-color: #444;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.navbar .menu .dropdown-content a {
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.navbar .menu .dropdown-content a:hover {
background-color: #555;
}
.navbar .menu .dropdown:hover .dropdown-content {
display: block;
}
.custom-banner {
background-color: #f0f0f0;
text-align: center;
padding: 60px 20px;
}
.custom-banner h1 {
color: #333;
margin: 0;
font-size: 2.5em;
}
.content {
padding: 20px;
}
.post {
border-bottom: 1px solid #ddd;
padding: 20px 0;
transition: background-color 0.3s;
}
.post:hover {
background-color: #f9f9f9;
}
.post h2 {
margin: 0;
color: #333;
}
.post p {
margin: 10px 0 0;
color: #666;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
.contact-form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
}
.contact-form label {
display: block;
margin-bottom: 5px;
color: #333;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
.contact-form button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
.contact-form button:hover {
background-color: #555;
}
@media (max-width: 600px) {
.navbar .menu-toggle {
display: block;
cursor: pointer;
}
.navbar .menu {
display: none;
flex-direction: column;
width: 100%;
}
.navbar .menu a {
padding: 10px;
border-top: 1px solid #444;
}
.navbar .menu.open {
display: flex;
}
}
</style>
</head>
<body>
<div class="navbar">
<div>私のブログ</div>
<div class="menu-toggle">メニュー</div>
<div class="menu">
<a href="#home">ホーム</a>
<a href="#about">紹介</a>
<a href="#posts">記事</a>
<a href="#contact">お問い合わせ</a>
<div class="dropdown">
<a href="#more">もっと</a>
<div class="dropdown-content">
<a href="#link1">リンク 1</a>
<a href="#link2">リンク 2</a>
<a href="#link3">リンク 3</a>
</div>
</div>
</div>
</div>
<div class="custom-banner">
<h1>私のブログへようこそ</h1>
</div>
<div class="content" id="home">
<h2>ホーム</h2>
<p>ここはホームセクションです。</p>
</div>
<div class="content" id="about">
<h2>紹介</h2>
<p>ここは紹介セクションです。</p>
</div>
<div class="content" id="posts">
<h2>記事</h2>
<div class="post">
<h2>記事タイトル 1</h2>
<p>この記事の概要や内容がここに表示されます。</p>
</div>
<div class="post">
<h2>記事タイトル 2</h2>
<p>この記事の概要や内容がここに表示されます。</p>
</div>
<!-- 追加の記事をここに追加 -->
</div>
<div class="content" id="contact">
<h2>お問い合わせ</h2>
<form class="contact-form">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">送信</button>
</form>
</div>
<div class="footer">
© 2024 私のブログ. All rights reserved.
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
const contactForm = document.querySelector('.contact-form');
menuToggle.addEventListener('click', function() {
menu.classList.toggle('open');
});
contactForm.addEventListener('submit', function(event) {
event.preventDefault();
alert('フォームが送信されました！');
// ここでフォームのデータを送信する処理を追加できます
});
alert('ブログへようこそ！');
});
</script>
</body>
</html>
