-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑧
Webページ制作実践
2限目
学科 HTML/CSS基礎⑧
Webページ制作実践
3限目
学科 HTML/CSS基礎⑧
Webページ制作実践
4限目
学科 HTML/CSS基礎⑧
Webページ制作実践
5限目
学科 HTML/CSS基礎⑧
本日の講義のまとめ
本日のテーマ
Webページを完成させましょう
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>子猫カフェ KONEKO</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" href="images/favicon.ico">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">ページトップ</a></li>
<li><a href="#about">カフェ紹介</a></li>
<li><a href="#pricing">料金表</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#info">お店情報</a></li>
<li><a href="#gallery">子猫ギャラリー</a></li>
</ul>
</nav>
</header>
<div class="hero">
<video autoplay muted loop>
<source src="images/hero.mp4" type="video/mp4">
お使いのブラウザは動画をサポートしていません。
</video>
<div class="hero-text">
<h1><img src="images/logo.png" alt="子猫カフェ KONEKO" width="702" height="93"></h1>
<p>やさしい時間が、ここにあります。</p>
</div>
</div>
<main class="container">
<section id="about" class="section about">
<h2>カフェ紹介</h2>
<div class="about-wrapper">
<img src="images/cafe-1.jpg" alt="子猫カフェの店内写真" width="1024" height="768">
<div>
<p>「KONEKO」は、子猫たちとふれあえる癒しの空間です。木のぬくもりとやさしい音楽に包まれて、心ほどけるひとときをお過ごしください。</p>
<p>予約不要です。お一人様でもお気軽ご来店ください。3歳から入場可能で小学生以下の方は保護者の同伴が必要になります。</p>
</div>
</div>
<div class="about-wrapper reverse">
<img src="images/cafe-2.jpg" alt="子猫カフェの店内写真" width="1024" height="768">
<div>
<p>子猫と一緒に遊んだり、おしゃべりを楽しむ空間としてご利用ください。本を読んだり仕事や勉強のスペースとして利用して頂くことも可能です。</p>
<p>1日に2回の「ごはんタイム」には、子猫たちの食事姿を見ることができます。店内では、子猫が大好きな「おやつ」も販売しています。</p>
</div>
</div>
</section>
<section id="pricing" class="section pricing">
<h2>料金表</h2>
<p>（ソフトドリンク飲み放題です）</p>
<table>
<tr><th>時間</th><th>料金（税込み）</th></tr>
<tr><td>30分</td><td>\800</td></tr>
<tr><td>60分</td><td>\1,500</td></tr>
<tr><td>90分</td><td>\2,200</td></tr>
<tr><td>延長（15分）</td><td>\400</td></tr>
</table>
</section>
<section id="access" class="section access">
<h2>アクセス</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2291.517674758747!2d139.75969460626743!3d35.68450210878793!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0822c16a1d%3A0xc0768fc1934384e4!2z44CSMTAwLTAwMDUg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Li444Gu5YaF77yR5LiB55uu77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1756704345565!5m2!1sja!2sjp" style="border:0;" title="地図"></iframe>
<p>〒100-0005 東京都千代田区丸の内１丁目１?１（東京駅から徒歩10分）</p>
</section>
<section id="info" class="section info">
<h2>お店情報</h2>
<ul>
<li>店名：子猫カフェ KONEKO</li>
<li>営業時間：10:00?20:00（最終受付19:00）</li>
<li>定休日：火曜日</li>
<li>電話番号：03-1234-5678</li>
<li>メール：info@koneko.jp</li>
</ul>
</section>
<section id="gallery" class="section gallery">
<h2>子猫ギャラリー</h2>
<div class="gallery-grid">
<div>
<img src="images/cat-01.jpg" alt="ケイゴ" width="1024" height="768">
<p>ケイゴ♂（寂しがりや）</p>
</div>
<div>
<img src="images/cat-02.jpg" alt="ミスト" width="1024" height="768">
<p>ミスト♂（人好き）</p>
</div>
<div>
<img src="images/cat-03.jpg" alt="ラム" width="1024" height="768">
<p>ラム♀（好奇心旺盛）</p>
</div>
<div>
<img src="images/cat-04.jpg" alt="シーラ" width="1024" height="768">
<p>シーラ♀（ツンデレ）</p>
</div>
<div>
<img src="images/cat-05.jpg" alt="チャタオ" width="1024" height="768">
<p>チャタオ♂（人見知り）</p>
</div>
<div>
<img src="images/cat-06.jpg" alt="ミドリ" width="1024" height="768">
<p>ミドリ♂（好奇心旺盛）</p>
</div>
<div>
<img src="images/cat-07.jpg" alt="ナツ" width="1024" height="768">
<p>ナツ♀（人好き）</p>
</div>
<div>
<img src="images/cat-08.jpg" alt="ワンコ" width="1024" height="768">
<p>ワンコ♂（人見知り）</p>
</div>
</div>
</section>
</main>
<footer>
<p><small>© 2025 子猫カフェ KONEKO.</small></p>
</footer>
</body>
</html>
HTML
@charset "utf-8";
body {
background-color: #fffaf5;
color: #333;
}
.navbar {
position: fixed; /* 問題01：要素の配置指定 */
top: 0; /* 問題02：要素の位置指定 */
width: 100%;
background-color: #ffe4e1;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}
.navbar nav ul {
margin: 0;
padding: 10px 0;
display: flex;
justify-content: center;
list-style: none;
}
.navbar nav ul li {
margin: 0 15px;
}
.navbar nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.hero {
position: relative;
height: 100lvh;
overflow: hidden;
}
.hero video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero .hero-text {
max-width: 600px;
position: absolute;
top: 60px;
left: 40px;
color: #fff;
line-height: 1.2;
}
.hero .hero-text h1 {
max-width: 100%;
margin: 40px 0 0 0;
font-size: 4em;
}
.hero .hero-text h1 img {
width: 100%;
height: auto;
}
.hero .hero-text p {
font-size: 2em;
font-weight: bold;
text-align: center;
}
.section {
margin-top: 46px;
padding: 60px 40px;
background: #fff;
border: 1px #ccc solid;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.section img {
max-width: 100%;
border-radius: 8px;
}
.section h2 {
font-size: 1.8em;
margin: 0 0 30px 0;
color: #d08080;
border-bottom: 6px #d08080 dotted;
}
.section h2::before { /* 問題03：コンテンツの挿入 */
content: "◆"; /* 問題04：挿入コンテンツ指定 */
padding-right: 8px;
}
.section.about {
padding: 60px 40px 40px 40px;
}
.section.about .about-wrapper {
padding: 0 0 20px 0;
display: flex; /* 問題05：フレックスレイアウト指定 */
align-items: center;
gap: 40px;
}
.section.about .about-wrapper.reverse {
flex-direction: row-reverse; /* 問題06：フレックスアイテムの並び順指定 */
}
.section.about .about-wrapper img {
width: calc((100% - 40px) * 0.4);
}
.section.about .about-wrapper div {
width: calc((100% - 40px) * 0.6);
}
.section.about .about-wrapper div p {
padding: 5px 0;
font-size: 1.2em;
}
.section.pricing p {
margin-top: 20px;
text-align: right;
}
.section.pricing table {
width: 100%;
border-collapse: collapse;
}
.section.pricing table th, .section.pricing table td {
width: 50%;
border: 1px solid #ddd; /* 問題07：テーブルセルのボーダー指定 */
padding: 12px; /* 問題08：テーブルセルのパディング指定 */
text-align: center; /* 問題09：テーブルセルの文字配置指定 */
}
.section.pricing table th {
background-color: #ffe4e1; /* 問題10：テーブル見出しの背景色指定 */
}
.section.access iframe {
width: 100%;
height: 300px;
}
.section.access p {
text-align: center;
}
.section .gallery-grid {
display: flex;
gap: 20px;
flex-wrap: wrap; /* 問題11：フレックスアイテムの折り返し指定 */
}
.section.info ul {
margin-left: 40px;
}
.section .gallery-grid div {
width: calc((100% - 60px) / 4);
text-align: center;
line-height: 1;
}
.section .gallery-grid div img {
width: 100%;
border-radius: 10px; /* 問題12：ボーダーの角の丸み指定 */
}
.section .gallery-grid div p {
margin-top: 8px;
color: #666;
}
footer {
padding: 40px 0;
margin-top: 80px;
text-align: center;
background-color: #ffe4e1;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
コメントを残す