コーディング例
- 「update.js」の内容は、JavaScriptの授業内で記述します
- レイアウトは、「display: grid;」で設定
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>●●の課題サイト</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/update.js" defer></script>
</head>
<body>
<header class="header">
<h1>●●の課題サイト</h1>
</header>
<main class="main">
<div class="container">
<section class="web_site">
<h2>Webサイト制作課題</h2>
<ul class="works">
<li>
<a href="01_spain/index.html">
<h3>01 スペイン観光ガイド</h3>
<img src="img/01.webp" alt="01 スペイン観光ガイド">
</a>
</li>
<li>
<a href="02_portfolio/index.html">
<h3>02 ポートフォリオ</h3>
<img src="img/02.webp" alt="02 ポートフォリオ">
</a>
</li>
<li>
<a href="03_recipe/index.html">
<h3>03 Recipe</h3>
<img src="img/03.webp" alt="03 Recipe">
</a>
</li>
<li>
<a href="04_news/index.html">
<h3>04 NEWS</h3>
<img src="img/04.webp" alt="04 NEWS">
</a>
</li>
<li>
<a href="05_sightseeing/index.html">
<h3>05 スペインの魅力</h3>
<img src="img/05.webp" alt="05 スペインの魅力">
</a>
</li>
<li>
<a href="06_vegetables/index.html">
<h3>06 旬の野菜便</h3>
<img src="img/06.webp" alt="06 旬の野菜便">
</a>
</li>
<li>
<a href="07_girly/index.html">
<h3>07 GIRLY STYLE</h3>
<img src="img/07.webp" alt="07 GIRLY STYLE">
</a>
</li>
<li>
<a href="08_foodie/index.html">
<h3>08 宅配料理</h3>
<img src="img/08.webp" alt="08 宅配料理">
</a>
</li>
<li>
<a href="09_design/index.html">
<h3>09 The Web Design</h3>
<img src="img/09.webp" alt="09 The Web Design">
</a>
</li>
<li>
<a href="09_design/index.html">
<h3>10 MyStyle</h3>
<img src="img/10.webp" alt="10 MyStyle">
</a>
</li>
<li>
<a href="11_flowerCefe/index.html">
<h3>11 Flower Coffee</h3>
<img src="img/11.webp" alt="11 Flower Coffee">
</a>
</li>
<li>
<a href="xxx/index.html">
<h3>12 xxxx</h3>
<img src="https://placehold.jp/800x800.png" alt="10 MyStyle">
</a>
</li>
</ul>
</section>
</div>
</main>
<footer class="footer">
<p id="update">更新日：xxxx年x月x日</p>
</footer>
</body>
</html>
@charset "UTF-8";
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
body {
background-color: #fff;
color: #333;
font-size: 16px;
font-family: "Montserrat", "Noto Sans JP", sans-serif;
line-height: 1.7;
}
.container {
width: min(90%, 1240px);
margin: 0 auto;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
padding: 20px 0;
background-color: #5880a3;
color: #fff;
}
h1 {
font-size: 24px;
}
.web_site h2 {
position: relative;
margin-bottom: 10px;
padding-left: 50px;
}
.web_site h2::before {
content: "";
position: absolute;
left: 0;
top: 24px;
height: 2px;
width: 40px;
display: inline-block;
background-color: #5880a3;
}
.works {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.works li {
padding: 10px 20px 20px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ccc;
}
.works h3 {
margin-bottom: 10px;
}
.footer {
padding: 10px;
background-color: #000;
color: #fff;
text-align: center;
}
