本記事では、HTMLとCSSの基礎知識を活用して、映画紹介网站を構築する実践的な方法を解説する。特に、初心者がweb制作の理解を深めるための代表的な事例として、複数ページで構成される映画情報ポータル网站的作成手順を段階的に紹介していく。
网站の基本構成
映画紹介网站を構築する際には、以下の要素を含む構成が一般的である。まず、ページ上部に配置されるヘッダー部分には、网站的タイトルロゴ、ナビゲーションメニュー、および背景音乐を再生するオーディオ要素を配置する。次に、メインビジュアルと映画の推薦情報が表示されるコンテンツ領域、そしてページ最下部に配置されるフッター部分这三つの主要な構成要素から成り立っている。
ナビゲーション構造としては、首页（ホーム页面）に加えて、個々の映画の詳细页面へのリンクを設けることが重要である。本例では「君の名は」「こんにちは、世界」「天気の子」という三つの映画主题页面を用意し、用户が任意的电影信息に効率的にアクセスできるように設計している。
HTML構造の実装
以下は、网站的基盤となるHTML構造のコード例である。このコードでは、セマンティックな要素を活用し、网站的論理構造を明確に表現している。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>映画紹介ポータル</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<header class="site-header">
<div class="header-container">
<h1 class="logo">映画レビュー館</h1>
<audio class="bgm-player" loop autoplay>
<source src="audio/theme.mp3" type="audio/mpeg">
</audio>
<nav class="main-nav">
- [ホーム](index.html)
- [君の名は](movie1.html)
- [こんにちは、世界](movie2.html)
- [天気の子](movie3.html)
- [お問い合わせ](contact.html)
</nav>
</div>
</header>
<main class="main-content">
<section class="featured-movies">
<h2>おすすめ映画</h2>
<article class="movie-card">
<div class="movie-poster">
</div>
<div class="movie-info">
<h3>君の名は</h3>
<p>新海誠監督によるアニメーション映画。入れ替わり体験を通じて相遇う男女、高校生の恋物語。2016年公開。</p>
<a href="movie1.html" class="detail-btn">詳細を見る</a>
</div>
</article>
<article class="movie-card">
<div class="movie-poster">
</div>
<div class="movie-info">
<h3>こんにちは、世界</h3>
<p>伊藤智彦監督によるSFアニメーション映画。2027年の京都を舞台に、記憶と現実が交錯する物語。</p>
<a href="movie2.html" class="detail-btn">詳細を見る</a>
</div>
</article>
<article class="movie-card">
<div class="movie-poster">
</div>
<div class="movie-info">
<h3>天気の子</h3>
<p>新海誠監督最新作。少年と天気を操る能力を持つ少女の冒険を通じて、真実の愛を描く。</p>
<a href="movie3.html" class="detail-btn">詳細を見る</a>
</div>
</article>
</section>
</main>
<footer class="site-footer">
<p>© 映画紹介ポータル</p>
</footer>
</body>
</html>
CSSスタイリングの実装
CSSによるスタイリングでは、网站的視覚的な一貫性と用户体験を向上させるための样式を定義する。以下に、主要なスタイル规则の一例を示す。
/* 基本設定 */
body {
background-image: url('../images/background.jpg');
color: #ffffff;
font-family: 'Noto Sans JP', sans-serif;
margin: 0;
padding: 0;
}
/* コンテンツ領域 */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 映画カードセクション */
.featured-movies {
margin-top: 40px;
}
.featured-movies h2 {
font-size: 28px;
margin-bottom: 30px;
border-left: 4px solid #4a90d9;
padding-left: 15px;
}
.movie-card {
display: flex;
margin-bottom: 40px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s ease;
}
.movie-card:hover {
transform: translateY(-5px);
}
.movie-poster {
width: 400px;
height: 250px;
overflow: hidden;
position: relative;
}
.movie-poster img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.movie-info {
flex: 1;
padding: 25px 40px;
}
.movie-info h3 {
font-size: 24px;
margin-top: 0;
margin-bottom: 15px;
}
.movie-info p {
line-height: 1.8;
font-size: 16px;
text-indent: 1em;
margin-bottom: 20px;
}
.detail-btn {
display: inline-block;
padding: 10px 30px;
background-color: #4a90d9;
color: #ffffff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.detail-btn:hover {
background-color: #357abd;
}
/* フッター */
.site-footer {
background-color: #2c2c2c;
text-align: center;
padding: 20px;
margin-top: 60px;
}
.site-footer p {
margin: 0;
line-height: 1.6;
}
制作における重要なポイント
高质量なweb页面を構築する際には、いくつかの重要な原則を意識する必要がある。まず、页面的構造を論理的に划分し、ヘッダー、ナビゲーション、メインコンテンツ、フッターといった各セクションを明確に分離することが重要である。これにより、代码の保守性とアクセシビリティが向上する。
また、CSSにおいては、FlexboxやCSS Gridといった現代のレイアウト技术を活用することで、より柔軟でレスポンシブな页面設計が可能になる。本例ではFlexboxを使用して、映画カードのレイアウトと画像サイズの調整を行っている。
多媒体要素として、オーディオタグを活用したbgm再生機能や、画像、视频埋め込み機能を页面に組み込むことで、用户のエンゲージメントを高めることができる。ただし、自動的に再生されるオーディオ元素素については、用户的体験を妨げないよう、適切な配慮が必要である。
页面間リンクの構築
複数の页面で構成される网站では、各页面间的导航链接を適切に设置することが用户体验の観点から極めて重要である。メインページから個別电影的详情页面へのリンク、各详情页面から関連电影への Crosspromoリンク、あるいはホーム页面への復帰リンクなど、用户が迷うことなく网站を巡回できるよう、导航構造を设计する必要がある。
三级页面まで含めた階層構造を持つ网站では、パンくずリスト（現在位置表示）を導入することで、用户在网站内の現在位置を把握しやすくすることも推奨される。これらの工夫により、直感的で使いやすい网站構築が実現できる。