完成例
コーディング例
- レイアウトは、「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">
</head>
<body>
<header class="header">
<h1>●●の課題サイト</h1>
</header>
<main class="main">
<div class="container">
<section id="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="10_style/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="12_form/index.html">
<h3>12 お問い合わせ</h3>
<img src="img/12.webp" alt="12 Form">
</a>
</li>
</ul>
</section>
<section id="js_jq">
<h2>JavaScript / jQuery 課題</h2>
<ul class="js_works">
<li>
<a href="js/dark/index.html">
<h3>01 ダークモード</h3>
<img src="img/dark.webp" alt="01 ダークモードに対応">
</a>
</li>
<li>
<a href="js/input_text/index.html">
<h3>02 入力された文字</h3>
<img src="img/input_text.webp" alt="02 入力された文字を表示">
</a>
</li>
<li>
<a href="js/arithmetic/index.html">
<h3>03 四則演算</h3>
<img src="img/arithmetic.webp" alt="03 四則演算の結果を表示">
</a>
</li>
<li>
<a href="js/even_odd/index.html">
<h3>04 偶数奇数</h3>
<img src="img/even_odd.webp" alt="04 偶数奇数の判別">
</a>
</li>
<li>
<a href="js/payment/index.html">
<h3>05 消費税合算後の支払金額</h3>
<img src="img/tax.webp" alt="05 消費税合算後の支払金額">
</a>
</li>
<li>
<a href="js/birthday/index.html">
<h3>06 誕生日までの残数</h3>
<img src="img/birthday.webp" alt="06 誕生日までの残数">
</a>
</li>
<li>
<a href="js/for_total/index.html">
<h3>07 整数の合計を計算</h3>
<img src="img/for_total.webp" alt="07 整数の合計を計算">
</a>
</li>
<li>
<a href="js/luck/index.html">
<h3>08 おみくじ</h3>
<img src="img/luck.webp" alt="08 おみくじ">
</a>
</li>
<li>
<a href="js/dice/index.html">
<h3>09 サイコロ</h3>
<img src="img/dice.webp" alt="09 サイコロ">
</a>
</li>
<li>
<a href="js/swap_image/index.html">
<h3>10 画像置換</h3>
<img src="img/swap_img.webp" alt="10 画像置換">
</a>
</li>
<li>
<a href="js/accordion/index.html">
<h3>11 アコーディオンパネル</h3>
<img src="img/accordion.webp" alt="11 アコーディオンパネル">
</a>
</li>
<li>
<a href="">
<h3>12 </h3>
<img src="img/jq.webp" alt="06 ">
</a>
</li>
</ul>
</section>
<section id="ai_ps">
<h2>Illustrator / Photoshop 課題</h2>
<ul class="ps_works">
<li>
<a href="aips/pop/index.html">
<h3>01 POP-UP SHOP</h3>
<img src="img/pop.webp" alt="01 POP-UP SHOP">
</a>
</li>
<li>
<a href="aips/autumn/index.html">
<h3>02 季節の味覚</h3>
<img src="img/autumn.webp" alt="02 季節の味覚">
</a>
</li>
<li>
<a href="aips/kiku/index.html">
<h3>03 聞くキリン</h3>
<img src="img/kiku.webp" alt="03 聞くキリン">
</a>
</li>
<li>
<a href="">
<h3>04 </h3>
<img src="img/ps.webp" alt="04 ">
</a>
</li>
<li>
<a href="">
<h3>05 </h3>
<img src="img/ps.webp" alt="05 ">
</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;
}
h2 {
position: relative;
margin-bottom: 10px;
padding-left: 50px;
}
h2::before {
content: "";
position: absolute;
left: 0;
top: 20px;
height: 2px;
width: 40px;
display: inline-block;
background-color: #5880a3;
}
h3 {
font-size: 1.1rem;
}
.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;
}
.js_works {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.js_works li {
text-align: center;
}
.js_works h3 {
text-align: left;
}
.ps_works {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.footer {
padding: 10px;
background-color: #000;
color: #fff;
text-align: center;
}
