🗂
映画とドラマ紹介のWebサイトを作ってみた
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="../css/style.css">
</head>
<body>
<header>
<h1>映画とドラマ紹介</h1>
<nav class="nav">
<ul>
<li><a href="movies.html">映画</a></li>
<li><a href="dramas.html">ドラマ</a></li>
<li><a href="about.html">サイト管理者について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="filter">
<label for="ratingFilter">評価で絞り込み：</label>
<select id="ratingFilter" onchange="filterMovies()">
<option value="all">すべて</option>
<option value="5">★★★★★</option>
<option value="4">★★★★</option>
<option value="3">★★★</option>
<option value="2">★★</option>
<option value="1">★</option>
</select>
</section>
<section id="movies">
<h2>映画</h2>
<div class="card">
<h2>ハリーポッターと賢者の石</h2>
<p class="rating">評価：★★★★★</p>
<p><a href="https://www.youtube.com/watch?v=VyHV0BRtdxo" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>インセプション</h2>
<p class="rating">評価：★★★★</p>
<p><a href="https://www.youtube.com/watch?v=YoHD9XEInc0" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>ダークナイト</h2>
<p class="rating">評価：★★★★★</p>
<p><a href="https://www.youtube.com/watch?v=EXeTwQWrcwY" target="_blank">予告編を見る</a></p>
</div>
<!-- 他の映画も同様に追加 -->
<div class="card">
<h2>アバター</h2>
<p class="rating">評価：★★★★</p>
<p><a href="https://www.youtube.com/watch?v=5PSNL1qE6VY" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>タイタニック</h2>
<p class="rating">評価：★★★★</p>
<p><a href="https://www.youtube.com/watch?v=kVrqfYjkTdQ" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>スター・ウォーズ</h2>
<p class="rating">評価：★★★</p>
<p><a href="https://www.youtube.com/watch?v=8Qn_spdM5Zg" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>ジュラシック・パーク</h2>
<p class="rating">評価：★★★</p>
<p><a href="https://www.youtube.com/watch?v=lc0UehYemQA" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>パイレーツ・オブ・カリビアン</h2>
<p class="rating">評価：★★★</p>
<p><a href="https://www.youtube.com/watch?v=KrGyD7uSlL8" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>トランスフォーマー</h2>
<p class="rating">評価：★★</p>
<p><a href="https://www.youtube.com/watch?v=dYDGqmxMZFI" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>インデペンデンス・デイ</h2>
<p class="rating">評価：★★</p>
<p><a href="https://www.youtube.com/watch?v=Z1eFdUSnaQM" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>ミッション：インポッシブル</h2>
<p class="rating">評価：★★</p>
<p><a href="https://www.youtube.com/watch?v=wb49-oV0F78" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>グリーン・ホーネット</h2>
<p class="rating">評価：★</p>
<p><a href="https://www.youtube.com/watch?v=PSlkV_C9UwI" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>キャットウーマン</h2>
<p class="rating">評価：★</p>
<p><a href="https://www.youtube.com/watch?v=RhFxXKFCXiE" target="_blank">予告編を見る</a></p>
</div>
<div class="card">
<h2>バトルフィールド・アース</h2>
<p class="rating">評価：★</p>
<p><a href="https://www.youtube.com/watch?v=c8J_5bERn-4" target="_blank">予告編を見る</a></p>
</div>
</section>
</main>
<footer>
<p>©Copyright 映画とドラマ紹介. All rights reserved.</p>
</footer>
<script src="../js/script.js"></script>
</body>
</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="../css/style.css">
</head>
<body>
<header>
<h1>映画とドラマ紹介</h1>
<nav class="nav">
<ul>
<li><a href="movies.html">映画</a></li>
<li><a href="dramas.html">ドラマ</a></li>
<li><a href="about.html">サイト管理者について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section id="about-me">
<h2>管理者について</h2>
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/09/12/17/potter.jpg" alt="管理者の写真" width="275" height="200"class="profile-photo">
<p>こんにちは！私は映画とドラマが大好きな管理者の田中です。このサイトでは、私が観た映画やドラマのレビューやおすすめ情報を共有しています。趣味は映画鑑賞とドラマの一気見です。皆さんと一緒に素晴らしい作品を発見し、楽しむことができれば嬉しいです。</p>
<p>私のSNSでも情報を発信していますので、ぜひフォローしてください！</p>
<ul class="social-links">
<li><a href="https://x.com/yourusername" target="_blank">X（旧Twitter）</a></li>
<li><a href="https://instagram.com/yourusername" target="_blank">インスタグラム</a></li>
<li><a href="https://youtube.com/yourchannel" target="_blank">YouTube</a></li>
</ul>
</section>
</main>
<footer>
<p>©Copyright 映画とドラマ紹介. All rights reserved.</p>
</footer>
</body>
</html>
お問い合わせ
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お問い合わせ</title>
<link rel="stylesheet" href="../css/style.css">
<script src="../js/script.js"></script>
</head>
<body>
<div class = "wrapper">
<!--ヘッダー情報-->
<header class = "header">
<h1>映画とドラマ紹介</h1>
<nav class = "nav">
<ul>
<li><a href="movies.html">映画</a></li>
<li><a href="dramas.html">ドラマ</a></li>
<li><a href="about.html">サイト管理者について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!--メイン情報-->
<main>
<h2>お問い合わせ</h2>
<form method="GET" name="contact" action="result.html"><!--JS動作させる為にname属性追加-->
<div>
<label for ="kind>"お問い合わせの種類</label><br><!--brは改行-->
<select id="kind" name="kind">
<option value="event">当サイトについて</option>
<option value="contact">その他のお問い合わせ</option>
</select>
</div>
<div>
当サイトをお知りになったきっかけは？<br>
<label><input type="checkbox" name="how" value="friends">友人の紹介</label>
<label><input type="checkbox" name="how" value="magazine">雑誌やWEBサイト</label>
<label><input type="checkbox" name="how" value="engine">検索エンジン</label>
</div>
<div>
<label>メールアドレス<br>
<input type="text" name="mail_address" placeholder="example@gmail.com"></label>
</div>
<div>
<label>お問い合わせの件名<br>
<input type="text" name="subject" placeholder="お問い合わせ"></label>
</div>
<div>
<label>お問い合せの具体的な内容<br>
<textarea name="message"></textarea></label>
</div>
<div>
<input type="submit" name="submit" value="送信" onClick="return check();"><!--送信押したらJSのcheck関数実行-->
</div>
</form>
</main>
<!--フッター情報-->
<footer>
<p>©Copyright 映画とドラマ紹介. All rights reserved.</p>
</footer>
</div>
</body>
</html>
CSS
@charset "UTF-8";
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: relative;
}
header h1 {
margin: 0;
}
#slideshow {
margin: 10px 0;
}
#slideshow img {
width: 100%;
height: auto;
max-height: 300px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 10px 0 0 0;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h2 {
margin: 0;
padding: 10px 0;
}
section {
margin-bottom: 20px;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
}
.card h3 {
margin: 0 0 10px;
}
.card a {
color: blue;
text-decoration: underline;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
Java Script
'use strict';
// 映画の絞り込み関数
function filterMovies() {
const filter = document.getElementById('ratingFilter').value;
const cards = document.querySelectorAll('#movies .card');
cards.forEach(card => {
const ratingText = card.querySelector('.rating').textContent;
const rating = ratingText.split('：')[1].trim(); // 評価を抽出してトリムする
if (filter === 'all' || rating === '★'.repeat(parseInt(filter))) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
// ドラマの絞り込み関数
function filterDramas() {
const filter = document.getElementById('ratingFilter').value;
const cards = document.querySelectorAll('#dramas .card');
cards.forEach(card => {
const ratingText = card.querySelector('.rating').textContent;
const rating = ratingText.split('：')[1].trim(); // 評価を抽出してトリムする
if (filter === 'all' || rating === '★'.repeat(parseInt(filter))) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
Discussion