<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTube - 動画共有プラットフォーム</title>
<style>
/* 共通スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #ff0000;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
header .logo {
font-size: 24px;
cursor: pointer;
}
header .search-bar input {
width: 300px;
padding: 8px;
border: none;
border-radius: 4px;
}
header .search-bar button {
padding: 8px 12px;
margin-left: 5px;
background-color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
header .user-menu img {
border-radius: 50%;
}
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: white;
}
main {
padding: 20px;
}
.video-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.video-card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 15px;
overflow: hidden;
width: 320px;
}
.video-card img {
width: 100%;
}
.video-card h3, .video-card p {
margin: 10px;
}
.video-player-page {
display: none;
}
.video-player {
max-width: 800px;
margin: 0 auto;
}
.video-player video {
width: 100%;
margin-bottom: 10px;
}
.recommendations ul {
list-style: none;
padding: 0;
}
.recommendations ul li {
display: flex;
margin-bottom: 10px;
}
.recommendations ul li img {
margin-right: 10px;
border-radius: 4px;
}
.comments textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.comments button {
padding: 10px 15px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<div class="logo" onclick="showPage('home')">MyTube</div>
<div class="search-bar">
<input type="text" placeholder="動画を検索">
<button>検索</button>
</div>
<div class="user-menu">
<img src="https://via.placeholder.com/40" alt="ユーザーアイコン">
</div>
</header>
<nav>
<ul>
<li><a href="#" onclick="showPage('home')">ホーム</a></li>
<li><a href="#">トレンド</a></li>
<li><a href="#">音楽</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</nav>
<!-- ホームページ -->
<main class="video-grid" id="home-page">
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル1</h3>
<p>チャンネル名: ユーザーA</p>
<p>再生回数: 10,000回</p>
</article>
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル2</h3>
<p>チャンネル名: ユーザーB</p>
<p>再生回数: 8,500回</p>
</article>
</main>
<!-- 動画再生ページ -->
<main class="video-player-page" id="video-player-page">
<section class="video-player">
<video controls>
<source src="sample-video.mp4" type="video/mp4">
お使いのブラウザでは動画を再生できません。
</video>
<h1>動画タイトル1</h1>
<p>再生回数: 10,000回 | 投稿日: 2024年11月19日</p>
<p>チャンネル名: ユーザーA</p>
<p>動画の説明文: これは動画の説明文です。概要やリンク、関連情報をここに記載します。</p>
</section>
<aside class="recommendations">
<h2>おすすめ動画</h2>
<ul>
<li>
<a href="#" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/150x100" alt="Video Thumbnail">
<p>動画タイトル2</p>
</a>
</li>
</ul>
</aside>
<section class="comments">
<h2>コメント</h2>
<form>
<textarea placeholder="コメントを追加"></textarea>
<button>送信</button>
</form>
<ul>
<li>ユーザーA: 素晴らしい動画です！</li>
<li>ユーザーB: もっと見たい！</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 MyTube - 動画共有プラットフォーム</p>
</footer>
<script>
function showPage(page) {
document.getElementById('home-page').style.display = page === 'home' ? 'block' : 'none';
document.getElementById('video-player-page').style.display = page === 'video-player' ? 'block' : 'none';
}
</script>
</body>
</html>
