WebデザインⅡ 第4回：HTML・CSSのやさしい解説書

これは学習用の資料です。提出課題とは別ファイルです。 提出するのは lesson-07.html と style-07.css の2つだけです。

0. 何をつくったの？

元の「Web Craft School」のページを、濃紺のメイン画面・コーラル色のボタン・白いカードを使う親しみやすいデザインに変更しました。授業で扱った「企画→AIへの指示→生成と調整→確認」の考え方に従い、もとの内容（Webデザインの入門コース、10個のカリキュラム）はほぼ残しています。

  • HTML：何を書くか、どの順番に置くかを決める「骨組み」
  • CSS：色、幅、文字の大きさ、間隔、配置などを決める「見た目」
  • JavaScript：クリックしたときなどの動作を作れる言語。今回は使用していません。

このページは、HTMLとCSSの2ファイルで動きます。外部の写真や画像ファイルは不要です。Google Fontsだけはネットにつながると読み込まれ、つながらない場合は端末内のフォントで表示されます。

1. 最初に：ファイルの開き方と確認方法

  1. lesson-07.html と style-07.css を同じフォルダに置きます。
  2. VS Codeでそのフォルダを開き、lesson-07.html を選びます。
  3. lesson-07.html をブラウザで開きます。VS Codeの Live Server 拡張機能を使ってもかまいません。
  4. CSSを変えたら Ctrl+S（Macでは Command+S）で保存し、ブラウザを再読み込みします。
  5. 提出前にパソコンとスマートフォン幅の両方で表示を確認しましょう。

CSSが反映されない場合：HTMLの <link rel="stylesheet" href="style-07.css"> とファイル名が一致しているか、2ファイルが同じフォルダにあるかを確認します。

2. HTMLの読み方：記号から始めよう

<h2>アイデアを、Webのかたちに。</h2>
  • <h2> は「見出しを始める」タグ（開始タグ）です。
  • 中身の文字が画面に表示されます。
  • </h2> は「見出しを終える」タグ（終了タグ）です。
  • 開始タグから終了タグまでを、一般に要素と呼びます。
<a href="#details" class="cta-button">カリキュラムを見る</a>
  • <a> はリンクを作るタグです。
  • href="#details" は、「id="details" がついた場所に移動する」という意味です。
  • class="cta-button" は、CSSからこのリンクのデザインを指定するための目印です。
  • class は複数の要素に同じ名前を付けられます。id は原則として同じページ内で重複させません。

2-1. HTML全体の外枠

コード 何のため？
<!DOCTYPE html> ブラウザに「HTML5の文書です」と伝える宣言
<html lang="ja"> このページの主な言語が日本語であると指定
<head> 画面に直接出ない、ページ設定を入れる場所
<meta charset="UTF-8"> 日本語などの文字が正しく表示されるよう文字コードを指定
<meta name="viewport" ...> スマホ画面に合わせて表示できるようにする設定
<title> ブラウザのタブに表示されるページ名
<link ...fonts.googleapis.com...> Webフォントの読み込み
<link rel="stylesheet" href="style-07.css"> 外部CSSファイルを読み込む重要な一行
<body id="top"> 画面に表示する本文全体。top はページ上端に戻るための目印

2-2. 画面に見えるHTMLを上から読む

HTMLの部分 意味 今回の変更
<header class="main-header"> ページ上部のヘッダー サイト名とメニューを整理
<a class="brand" href="#top"> サイト名を押すと上部に戻るリンク 文字の一部を別色にした
<nav> ページ内の移動メニュー 未設定リンク # を、ページ下部の #contact に変更
<ul> と <li> 順番なしリストとその項目 メニューの項目に利用
<section class="hero"> ページ冒頭の大きな紹介エリア 見出しと説明文を読みやすく変更
<span class="text-accent"> 文の一部分だけを囲う 「Webデザイン」を別色にするため使用
<p> 文章の段落 説明文を改善
<section id="course"> コース紹介エリア レイアウトを2列に整理
<div class="code-window"> 画面の一部をまとめる箱 画像の代わりにHTMLでコード風の飾りを制作
<section id="details"> カリキュラムのエリア 10項目をカードで表示
<div class="module-card"> 1つの学習項目を包む箱 白いカードのデザインへ変更
<footer id="contact"> 最下部エリア サイト名と説明を整理

div とは？ そのままでは特別な見た目を持たず、関連する内容をまとめる「箱」です。CSSを適用したり、横並びにしたりする際に使います。

<!-- ... --> とは？ HTMLのコメントです。コードを読む人へのメモで、通常、画面には表示されません。

&lt; と &gt; とは？ 画面に < と > を文字として表示するための書き方です。元ファイルには文章の中に <ul>、<ol>、<table> がそのまま入っていました。ブラウザがHTMLタグと勘違いする可能性があるため、今回は &lt;ul&gt; のように変更しました。

3. CSSの読み方：どこを、どう変えるか

.cta-button {
    background: var(--color-accent);
    color: #fff;
    padding: 14px 30px;
    border-radius: 100px;
}
  • .cta-button：セレクタ。class="cta-button" の要素を対象にします。先頭の . は「クラス」を意味します。
  • { ... }：この要素に適用するルールをまとめます。
  • background：背景を指定します。
  • color：文字色を指定します。
  • padding：箱の内側の余白。14px 30px は「上下14px、左右30px」。
  • border-radius：角の丸み。大きくすると、丸いボタンになります。
  • ;：1つの指定の区切りです。

CSSでは プロパティ名: 値; が基本です。

3-1. :root と var() は「色の設定表」

:root {
    --color-accent: #ec765c;
    --color-teal: #1f897f;
}
.cta-button {
    background: var(--color-accent);
}
  • :root：ページ全体で使う変数を定義しやすい場所です。
  • --color-accent：自分でつけた「色の名前」。-- から始まります。
  • #ec765c：16進数の色コード。コーラル系の色です。
  • var(--color-accent)：定義しておいた色を呼び出します。

まず試すこと： --color-accent: #ec765c; を --color-accent: #7952b3; に変更すると、ボタンなどが紫色に変わります。数か所を一括して変えられるのがメリットです。

3-2. 各CSSブロックとその役割

コード・プロパティ 何が起こるか 今回の使い道
* { ... } すべての要素を対象にする デフォルトの余白をリセット
box-sizing: border-box 指定した幅に内側余白・枠線を含める 幅の計算を簡単にする
margin: 0 箱の外側の余白をなくす 余分な空きをなくす
line-height: 1.8 行と行の間隔 長い文章を読みやすくする
.container 共通の横幅制限 文章が横に広がりすぎないようにする
max-width: 1120px 幅の上限 大画面でも読みやすさを保つ
margin: 0 auto 左右の余白を自動で同じにする コンテンツを中央寄せ
display: flex 子要素を並べやすくする ヘッダーのサイト名・メニュー
justify-content: space-between 要素間に空間を配置 サイト名とメニューを両端へ
align-items: center 交差方向の中央に揃える ヘッダー内の高さを揃える
position: sticky と top: 0 スクロールしても一定位置にとどまる ヘッダーを画面上部に表示
z-index: 10 重なり順の調整 ヘッダーを他の要素より前面に
background: linear-gradient(...) 2色以上をなめらかにつなぐ背景 ヒーローの濃紺グラデーション
text-align: center 文字を中央揃え 大きな見出しやカリキュラム見出し
font-size 文字の大きさ 見出しを目立たせる
font-weight: 800 文字の太さ サイト名・大見出し
letter-spacing 文字同士の間隔 英語の小見出し
display: grid 2次元のマス目に配置 紹介欄・カリキュラムカード
grid-template-columns: 1fr 1fr 同じ幅の2列 説明文とコード風イラスト
repeat(3, minmax(0, 1fr)) 同じ幅の3列 カードを3列に並べる
gap: 20px 子要素同士の間隔 カードとカードの間
border: 1px solid ... 1pxの実線の枠 カードの輪郭
border-radius: 14px 角を丸くする 柔らかなカードの印象
box-shadow 影を付ける 背景から浮いて見えるようにする
transition 変化をなめらかにする ボタンやカードのホバー効果
:hover マウスが要素の上にある状態 カードを少し持ち上げる
transform: translateY(-4px) 上に4px移動 ホバー時の視覚効果
overflow: hidden はみ出す部分を隠す コード風ウィンドウの角を揃える
overflow: auto 必要な場合にスクロール可能にする 狭い画面でコードがはみ出さないように
white-space: nowrap 文字を改行させない 英語のブランド名やコード表示

3-3. ヘッダーのCSSを具体的に読もう

.main-header {
    background-color: rgba(255, 253, 248, 0.96);
    position: sticky;
    top: 0;
    z-index: 10;
}
  • .main-header は HTML の <header class="main-header"> を指します。
  • rgba(255, 253, 248, 0.96) は赤(R)・緑(G)・青(B)・透明度(A)。最後の 0.96 はほぼ不透明です。
  • position: sticky はスクロールしてもヘッダーを上部に残す設定です。
  • top: 0 はその上端の位置です。
  • z-index: 10 は重なる場合に前面に表示されやすくします。

3-4. スマートフォン用の @media

@media (max-width: 600px) {
    .module-grid { grid-template-columns: 1fr; }
}

これは「画面の幅が 600px以下 なら、この中のルールを使う」という意味です。大きな画面ではカードが3列、中くらいの画面では2列、小さなスマホでは1列になります。これをレスポンシブデザインと呼びます。

3-5. ::before と ::after って？

.hero::before と .hero::after は、HTMLに新しいタグを書かずに、CSSで装飾用の丸い線を追加する仕組みです。content: '' が必要で、position: absolute で置く場所を指定しています。なくてもページは動く装飾なので、初心者は後回しでかまいません。

4. 元のコードから、どこを変えた？

箇所 変更前 変更後 理由
色 青・グレー・暗いカード 濃紺、コーラル、青緑、白 色の役割を明確にし、カードの文章を読みやすくするため
ヒーロー 「HTML & CSS 入門コース」が中心 「はじめてのWebデザイン」と短い説明 初めて見る人にも内容が伝わるように
ボタン 角が少し丸い青色 しっかり丸いコーラル色 最も押してほしい場所を目立たせるため
コース紹介 英文のプレースホルダー HTMLで作るコード風の図 未完成に見える部分をなくし、追加画像も不要にするため
カリキュラム ダーク背景のカード、一部横長 明るい均等幅のカード 情報を順番に読みやすくするため
メニュー 「入学手続き」のリンク先が # 「お問い合わせ」でページ下部に移動 リンクを押したときの移動先を用意するため
小画面表示 992px以下を中心に調整 850px・600pxで段階的に変更 スマートフォンで見やすくするため
HTMLの文章 <ul> などが生の文字列 &lt;ul&gt; に変更 HTMLタグとして誤認されないようにするため

※ 画面下部の「お問い合わせ」は外部連絡フォームではありません。ページのフッターへ移動する内部リンクです。今回の課題では外部サービスやJavaScriptを使わず、HTML/CSSの改善に絞っています。

5. まず自分で変更してみよう（簡単な順番）

練習A：ボタンの色を変更

style-07.css の先頭近くにある --color-accent: #ec765c; を --color-accent: #7952b3; に変更して保存。どこが紫になるか確認します。

練習B：大きな見出しを変更

lesson-07.html で <h1>はじめての... を見つけ、「はじめての」を「自分でつくる」に書き換えて保存します。HTMLを編集すると文章自体が変わることを確認しましょう。

練習C：カードの角の丸さを変更

style-07.css の .module-card にある border-radius: 14px; を border-radius: 2px; に変更してみます。角張ったデザインになります。

練習D：余白を増やす

.module-card の padding: 26px 24px; を padding: 38px 28px; に変更します。カード内側の空間が増えます。

練習E：横に並べる枚数を変更

.module-grid の grid-template-columns: repeat(3, minmax(0, 1fr)); を repeat(2, minmax(0, 1fr)); にすると、広い画面で2列になります。下にある @media の指示が狭い画面では優先されることにも注目してください。

6. エラーが出たときは？

症状 最初に見るところ
色が変わらない CSSの保存、ファイル名、HTMLの href="style-07.css"
文字や見た目が崩れる CSSの { } と ; の書き忘れ
一部の内容が消える HTMLの開始タグと終了タグが対になっているか
ボタンが動かない href="#details" と id="details" の名前が一致するか
スマホで横にはみ出す 横幅を固定しすぎていないか、@media があるか
英字フォントが違う インターネット接続、Google Fontsの読み込み状況

重要：AIが作ったコードも間違うことがあります。自分でブラウザを開いて確認し、分からない部分は「このCSSの display: grid を初心者向けに説明して」などとAIに尋ねるのが授業の趣旨です。

7. 課題提出前のチェックリスト

8. この取り組みから何を学べる？

AIは最初の案やコードを素早く作れますが、何を目立たせるか、どんな色が適切か、読みにくいところがないかを確認するのは制作者の仕事です。 今回は、完成しているWebページのHTML構造を読み、CSSの色・レイアウト・余白を意識的に変えることで、AIが生成したコードを「使うだけ」から「理解して直す」方向へ進めています。