ここまで学んだHTML、CSS、JavaScriptを1つの制作物へまとめます。新しい文法を増やすのではなく、各ファイルがどの役割を担当しているかを確認する統合課題です。
プロフィールと学習内容を掲載し、ボタンで詳細を開閉できるミニサイトを作ります。
制作フォルダーを準備する
mini-site/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── main.js
└── images/
└── profile.jpgVisual Studio Codeでmini-siteフォルダー全体を開きます。ファイル名とパスの大文字・小文字をそろえてください。
次の画像は、「制作フォルダーを準備する」で扱うコードや構成をブラウザで表示した結果です。
HTMLで内容と操作を作る
次の図では、「HTMLで内容と操作を作る」の仕組みや関係を確認できます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web制作の学習記録</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
</head>
<body>
<main class="profile">
<h1>Web制作の学習記録</h1>
<img src="images/profile.jpg" alt="制作者のプロフィール写真" width="640" height="480">
<p>HTML、CSS、JavaScriptを学んでいます。</p>
<button class="details-button" type="button" aria-expanded="false" aria-controls="details">詳細を見る</button>
<div class="details" id="details" hidden>
<h2>学習していること</h2>
<ul>
<li>意味の通るHTML</li>
<li>レスポンシブなCSS</li>
<li>DOMを操作するJavaScript</li>
</ul>
</div>
</main>
</body>
</html>CSSで読みやすく整える
次の図では、「CSSで読みやすく整える」の仕組みや関係を確認できます。
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #1f2937;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
.profile {
width: min(100% - 32px, 720px);
margin-inline: auto;
padding-block: 64px;
}
.profile img {
max-width: 100%;
height: auto;
border-radius: 16px;
}
.details-button {
min-height: 48px;
padding: 8px 20px;
}
.details-button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}JavaScriptで詳細を開閉する
const button = document.querySelector(".details-button");
const details = document.querySelector(".details");
if (button && details) {
button.addEventListener("click", () => {
const isOpen = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!isOpen));
button.textContent = isOpen ? "詳細を見る" : "詳細を閉じる";
details.hidden = isOpen;
});
}完成状態を確認する
HTMLで内容を作り、CSSでカードを整え、JavaScriptで開閉できるミニサイトです。
詳細を開いた後も、ほかのカードやレイアウトが崩れていないか確認します。
- ページを再読み込みして画像とCSSが反映されるか確認する
- ボタンを複数回操作して文章と状態が合うか確認する
- TabキーとEnterキーで操作する
- 320pxから大画面まで横スクロールがないか確認する
- ConsoleとNetworkにエラーがないか確認する
エラーがある場合は、HTML、CSS、JavaScriptを同時に変更せず、どのファイルのどの行が原因かを切り分けます。