90分で身につく！HTML＋CSS　基礎のキソ

初心者向け・演習付き保存版教材

HTML＆CSS 基礎のキソ

HTMLの基本タグ、bodyの区分け、CSS、レイアウト、フォームまでを体系的に学べる教材です。各章に簡単な演習問題をつけ、ページ最後にサンプル回答をまとめました。授業用にも、後から見返す自習用にも使える内容にしています。

目次を見る サンプル回答へ

はじめに：HTMLの全体構造

HTMLファイルは、大きく分けると <head> と <body> の2つで構成されます。head はページそのものの設定を書く場所、body は実際に画面に表示される内容を書く場所です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
</head>
<body>
  ここに画面へ表示される内容を書きます。
</body>
</html>

<head> の役割

  • 文字コードの指定
  • ページタイトルの設定
  • スマホ表示のための設定
  • CSSファイルの読み込み
  • 検索や共有向けの情報設定

<body> の役割

  • 見出し
  • 文章
  • 画像
  • リンク
  • 表やフォーム

<head> によく書くもの

  • <meta charset="UTF-8">：文字化け防止のための文字コード指定
  • <meta name="viewport" ...>：スマホ対応の基本設定
  • <title>：ブラウザのタブに表示されるページ名
  • <link rel="stylesheet" href="style.css">：CSSファイルの読み込み
  • 必要に応じて <meta name="description"> など

補足：<head> と <header> は別物です

<head> はページ設定を書く場所、<header> は本文の中に置くページ上部の見出しエリアです。名前が似ていますが、役割は大きく違います。

初心者が間違えやすいポイント

  • <head> の中に本文や見出しを書いてしまう
  • <meta charset="UTF-8"> を入れず、文字化けの原因を作ってしまう
  • <head> と <header> を同じものだと思ってしまう

演習 はじめの確認

次の要素が <head> に入るか、<body> に入るか考えてみましょう。

  • ページタイトル
  • 見出し <h1>講座の案内</h1>
  • CSSファイルの読み込み
  • 本文の段落

→ サンプル回答を見る

1. HTMLとCSSの役割

Webページは、主に HTML と CSS の2つで作られます。HTMLは文章や画像、リンクなどの「内容と意味」を表し、CSSはその内容を「どう見せるか」を決めます。

HTMLの役割

  • 見出しをつける
  • 文章を段落に分ける
  • 画像やリンクを配置する
  • 表やフォームを作る
  • ページ構造に意味を持たせる

CSSの役割

  • 文字色や背景色を変える
  • 文字サイズを調整する
  • 余白や枠線をつける
  • 要素を横並びにする
  • 見やすいレイアウトを作る

覚え方

HTML＝骨組み、CSS＝見た目 と考えると理解しやすいです。家づくりでいえば、HTMLが柱や部屋の配置、CSSが壁紙や色、家具の置き方に近いイメージです。

初心者が間違えやすいポイント

  • 文字を赤くしたいのに HTML だけで何とかしようとしてしまう
  • 内容を書くべき場所と、見た目を整える場所を分けずに考えてしまう
  • 改行や空白で見た目を無理やり整えようとしてしまう

演習 1

次の内容を考えたとき、HTMLが担当するものとCSSが担当するものを分けてみましょう。

  • ページの見出しを作る
  • 見出しの文字を青色にする
  • リンクを配置する
  • ボタンの角を丸くする

→ サンプル回答を見る

2. HTMLの基本タグ

HTMLではタグを使って、コンテンツに意味をつけます。最初は「よく使うタグ」を覚えるだけでも十分です。

よく使う基本タグ

  • <h1>〜<h6>：見出し
  • <p>：段落
  • <a>：リンク
  • <img>：画像
  • <br>：改行
  • <ul> <ol> <li>：リスト
  • <table>：表
  • <div>：まとまり
  • <span>：一部分の装飾用
  • <strong>：強調

基本コード例

<h1>HTML＆CSS 基礎のキソ</h1>
<p>これは段落です。HTMLでは文章を意味ごとに整理します。</p>

<a href="https://example.com">リンクはこちら</a>

<img src="sample.jpg" alt="サンプル画像">

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

補足

img タグには alt 属性を入れるのが基本です。画像が表示されない場合の説明や、読み上げ支援にも役立ちます。

初心者が間違えやすいポイント

  • <a> タグを書いても href を入れ忘れる
  • <img> に alt をつけ忘れる
  • 見出しを順番なしで飛ばして使ってしまう
  • 開始タグと終了タグの対応がずれてしまう

演習 2

次の内容をHTMLで書いてみましょう。

  1. 見出し「好きな食べ物」
  2. その下に「私の好きな食べ物を紹介します。」という段落
  3. 箇条書きで「ラーメン」「カレー」「お寿司」

→ サンプル回答を見る

3. body部分の区分け

ページ全体を役割ごとに分けると、構造が分かりやすくなります。特に、header、nav、main、aside、footer は基本としてよく使います。

header
nav
main
aside / right
footer

各要素の役割

要素役割例
headerページ上部の案内サイト名、タイトル、ロゴ
nav移動用メニューホーム、サービス、会社情報
main主な内容記事本文、商品説明
aside補足情報関連記事、バナー、プロフィール
footerページ下部著作権、連絡先
 
<body>
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>

  <div class="container">
    <main>メインコンテンツ</main>
    <aside>右カラム</aside>
  </div>

  <footer>フッター</footer>
</body>

初心者が間違えやすいポイント

  • 全部を <div> だけで作ってしまい、役割が分かりにくくなる
  • <main> を1ページに何個も置いてしまう
  • 補足情報まで全部 <main> に入れてしまう

演習 3

「サンプルサイト」というタイトルのページを想定し、以下の構造だけをHTMLで作ってみましょう。

  • header に「サンプルサイト」
  • nav に「ホーム」「サービス」「お問い合わせ」
  • main に「ここに本文が入ります。」
  • aside に「サイド情報」
  • footer に「© 2026 Sample」

→ サンプル回答を見る

4. CSSの基本

CSSは「どの要素に」「どんな見た目をつけるか」を指定します。セレクタ・プロパティ・値の3つで考えると理解しやすいです。

CSSの指定方法

CSSの書き方にはいくつかありますが、学習でも実務でも、基本は 外部CSSファイルを読み込む方法 です。

1. 外部CSS

<link rel="stylesheet" href="style.css">

head の中に書きます。HTMLとCSSを分けて管理できるので、最もよく使います。

2. 内部CSS

<style>
  h1 {
    color: blue;
  }
</style>

同じHTMLファイル内に書く方法です。小さな検証には便利ですが、量が増えると管理しづらくなります。

3. インラインCSS

<p style="color: red;">赤い文字</p>

タグに直接書く方法です。学習用には分かりやすいですが、実務では多用しないのが基本です。

相対パスの基本

CSSファイルや画像ファイルを読み込むときは、ファイルの場所をパスで指定します。初心者がまず覚えるのは 相対パス です。これは「今いるHTMLファイルから見て、どこにあるか」を表します。

同じ階層にある場合
href="style.css"

css フォルダの中にある場合
href="css/style.css"

1つ上の階層にある場合
href="../style.css"

images フォルダの中の画像を読む場合
src="images/photo.jpg"

相対パスの考え方

  • style.css：同じフォルダ
  • css/style.css：今いる場所の下にある css フォルダ
  • ../style.css：1つ上のフォルダ
  • ../../style.css：2つ上のフォルダ

セレクタの種類

CSSは「どのHTMLにデザインを当てるか」をセレクタで指定します。初心者が特につまずきやすいのが、class と id の違いです。

p {
  color: #333;
}

.card {
  background-color: #ffffff;
}

#top {
  scroll-margin-top: 24px;
}

クラスセレクタ

.card のように、先頭に . をつけて書きます。同じデザインを複数の場所に使いたいときに便利です。

<div class="card">内容</div>

IDセレクタ

#top のように、先頭に # をつけて書きます。1ページ内で原則1回だけ使う特別な目印として扱います。

<header id="top">...</header>

class と id の使い分け

  • 何度も使う見た目や部品 → class
  • ページ内で1つだけの目印 → id
  • CSSが当たらないときは、HTML側の class="..." / id="..." と、CSS側の . / # をまず確認します。

色の指定方法

CSSでは、色をいくつかの方法で指定できます。教材に出てくる #0d47a1 や #333 は HEX（16進数）表記 です。

color: red;              /* 色名 */
color: #0d47a1;          /* HEX */
color: #333;             /* 3桁の省略形 */
color: rgb(13, 71, 161); /* RGB */

よく使う指定方法

  • 色名：red、blue、gray
  • HEX：#0d47a1、#ffffff
  • RGB：rgb(13, 71, 161)

補足

  • #333 は #333333 の省略形です
  • まずは色名かHEXが扱いやすいです
  • デザイン資料では HEX 指定がよく出てきます

ボックスモデル

HTMLの要素は、すべて「箱」として考えると理解しやすいです。中身の content があり、そのまわりに padding、border、さらに外側に margin があります。

margin
border
padding
content

box-sizing: border-box; とは

通常は width に padding や border があとから足されるため、思ったより幅が広がることがあります。そこで box-sizing: border-box; を使うと、padding と border を含めて width を計算 してくれるので、レイアウトが崩れにくくなります。

* {
  box-sizing: border-box;
}

開発者ツール（DevTools）も便利

ブラウザで F12 を押すと、HTML と CSS を確認できる開発者ツールが開けます。CSSが当たらないときは、対象要素に class や id が正しくついているか、どのCSSが適用されているかを確認すると原因が見つけやすいです。

書き方

セレクタ {
  プロパティ: 値;
}

例

body {
  font-family: sans-serif;
  background-color: #f7f9fc;
  color: #333;
}

h1 {
  color: #0d47a1;
}

p {
  line-height: 1.8;
}

よく使うCSS

  • color：文字色
  • background-color：背景色
  • font-size：文字サイズ
  • margin：外側の余白
  • padding：内側の余白
  • border：枠線

よく出る疑問

  • margin は外側の余白
  • padding は内側の余白
  • border は枠線
  • width は幅
  • display は表示のしかた

初心者が間違えやすいポイント

  • CSSを読み込んでいるつもりで、href のパスが間違っている
  • .card と書くべきところを card、#top と書くべきところを top と書いてしまう
  • class と id の使い分けがあいまいで、どこにCSSを当てたのか分からなくなる
  • color = red; のように、コロンではなくイコールを書いてしまう
  • セミコロン ; や波かっこ { } の閉じ忘れをしてしまう
  • width を指定したのに、padding で想定より横幅が広がる理由が分からない

演習 4

次のHTMLに対してCSSを書いてみましょう。

<h2>お知らせ</h2>
<p>新しい講座の受付を開始しました。</p>
  • 見出しの文字色を青にする
  • 段落の文字色を濃いグレーにする
  • 段落の文字サイズを18pxにする

→ サンプル回答を見る

演習 4-2

次のフォルダ構成を見て、lesson/index.html から正しい相対パスを書いてみましょう。

lesson/
  ├─ index.html
  ├─ css/
  │   └─ style.css
  └─ images/
      └─ photo.jpg
common/
  └─ reset.css
  • css/style.css を読み込む href
  • images/photo.jpg を表示する src
  • 1つ上の階層にある common/reset.css を読み込む href

→ サンプル回答を見る

5. レイアウト実践

「メイン＋右カラム」の2カラム構成は、Flexboxを使うとシンプルに作れます。レスポンシブ対応も比較的しやすい方法です。

.container {
  display: flex;
  gap: 20px;
}

main {
  flex: 3;
}

aside {
  flex: 1;
}
main
right

補足

flex: 3 と flex: 1 は、横幅を 3:1 の比率で分けるイメージです。main を広く、aside を狭く見せたいときによく使います。

初心者が間違えやすいポイント

  • 子要素に flex を書いたのに、親要素へ display: flex; を書き忘れる
  • 横並びにしたあと、余白がなく窮屈なままにしてしまう
  • スマホ表示で縦並びに切り替える視点を忘れてしまう

演習 5

次のHTMLに対して、main と aside が横並びになるCSSを書いてみましょう。

<div class="container">
  <main>本文</main>
  <aside>補足</aside>
</div>
  • 横並びにする
  • 要素の間を20px空ける
  • main を広く、aside を狭くする

→ サンプル回答を見る

6. フォームの基本

フォームは、ユーザーに入力してもらうための仕組みです。問い合わせ、申し込み、アンケート、ログインなど、多くのページで使われます。

<form action="#" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email">

  <label for="plan">プラン</label>
  <select id="plan" name="plan">
    <option>ライト</option>
    <option>スタンダード</option>
    <option>プレミアム</option>
  </select>

  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">送信する</button>
</form>

ポイント

  • label と for を対応させると使いやすくなります。
  • type="email" のように入力の種類を正しく設定すると、スマホでも入力しやすくなります。
  • placeholder は入力例を見せるために便利です。

初心者が間違えやすいポイント

  • label for と input id が一致していない
  • placeholder を書いたので label は不要だと思ってしまう
  • name 属性を書かず、送信時に値を扱いにくくしてしまう
  • 送信ボタンなのに button の役割を意識していない

演習 6

次の項目を持つ簡単なお問い合わせフォームをHTMLで作ってみましょう。

  • お名前（text）
  • メールアドレス（email）
  • お問い合わせ内容（textarea）
  • 送信ボタン

→ サンプル回答を見る

7. 総合サンプル制作

最後に、これまで学んだ内容を組み合わせて、1ページ分の基本レイアウトを作ってみます。実務では、まず「意味のあるHTML」を作り、その後でCSSを当てていく流れが多いです。

<body>
  <header>
    <h1>サンプルサイト</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>

  <div class="container">
    <main>
      <h2>メインコンテンツ</h2>
      <p>ここに本文を入れます。</p>
    </main>

    <aside>
      <h2>サイドバー</h2>
      <p>補足情報を入れます。</p>
    </aside>
  </div>

  <footer>
    <p>&copy; 2026 Sample Site</p>
  </footer>
</body>

初心者が間違えやすいポイント

  • いきなり色や装飾から始めて、HTMLの構造が後回しになる
  • nav の中身をリンクではなく、ただの文字だけで置いてしまう
  • ページの主役となる見出し h1 の位置があいまいになる

演習 7

これまでの内容を使って、以下の要素を持つ「自己紹介ページ」を作ってみましょう。

  1. header にページタイトル
  2. nav に3つのメニュー
  3. main に自己紹介文
  4. aside に趣味や好きなこと
  5. footer に著作権表記

→ サンプル回答を見る

8. 振り返りポイント

HTMLで意識したいこと

  • 意味に合ったタグを使う
  • 見出しの順番を意識する
  • 画像には alt を入れる
  • フォームには label をつける

CSSで意識したいこと

  • まずは色、文字、余白から始める
  • margin と padding を使い分ける
  • レイアウトには Flexbox が便利
  • 見た目は少しずつ整える

後から見返すときのおすすめ順

① HTMLの全体構造 → ② HTMLの基本タグ → ③ bodyの区分け → ④ CSSの指定方法と相対パス → ⑤ CSSの基本 → ⑥ レイアウト → ⑦ フォーム、の順で復習すると理解が定着しやすいです。

ページ最後のサンプル回答

各章の演習問題に対応した、参考用のサンプル回答です。まずは自分で考えてから確認するのがおすすめです。

サンプル回答：HTMLの全体構造

  • ページタイトル → <head>
  • 見出し <h1>講座の案内</h1> → <body>
  • CSSファイルの読み込み → <head>
  • 本文の段落 → <body>

↑ 問題に戻る

サンプル回答 1：HTMLとCSSの役割

  • ページの見出しを作る → HTML
  • 見出しの文字を青色にする → CSS
  • リンクを配置する → HTML
  • ボタンの角を丸くする → CSS

↑ 問題に戻る

サンプル回答 2：基本タグ

<h2>好きな食べ物</h2>
<p>私の好きな食べ物を紹介します。</p>
<ul>
  <li>ラーメン</li>
  <li>カレー</li>
  <li>お寿司</li>
</ul>

↑ 問題に戻る

サンプル回答 3：bodyの区分け

<header>
  <h1>サンプルサイト</h1>
</header>

<nav>
  <ul>
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

<div class="container">
  <main>ここに本文が入ります。</main>
  <aside>サイド情報</aside>
</div>

<footer>&copy; 2026 Sample</footer>

↑ 問題に戻る

サンプル回答 4：CSSの基本

h2 {
  color: blue;
}

p {
  color: #333;
  font-size: 18px;
}

↑ 問題に戻る

サンプル回答 4-2：相対パス

<link rel="stylesheet" href="css/style.css">
<img src="images/photo.jpg" alt="写真">
<link rel="stylesheet" href="../common/reset.css">

↑ 問題に戻る

サンプル回答 5：2カラムレイアウト

.container {
  display: flex;
  gap: 20px;
}

main {
  flex: 3;
}

aside {
  flex: 1;
}

↑ 問題に戻る

サンプル回答 6：お問い合わせフォーム

<form action="#" method="post">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name">

  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email">

  <label for="message">お問い合わせ内容</label>
  <textarea id="message" name="message" rows="5"></textarea>

  <button type="submit">送信する</button>
</form>

↑ 問題に戻る

サンプル回答 7：自己紹介ページ

HTML

<header>
  <h1>自己紹介ページ</h1>
</header>

<nav>
  <ul>
    <li>プロフィール</li>
    <li>趣味</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

<div class="container">
  <main>
    <h2>はじめまして</h2>
    <p>Web制作を勉強している山田です。HTMLとCSSを学んでいます。</p>
  </main>

  <aside>
    <h2>趣味</h2>
    <p>読書、映画、カフェ巡り</p>
  </aside>
</div>

<footer>
  <p>&copy; 2026 My Profile</p>
</footer>

CSS

body {
  font-family: sans-serif;
  margin: 0;
}

header,
nav,
footer {
  padding: 20px;
}

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

main {
  flex: 3;
}

aside {
  flex: 1;
}

footer {
  background: #f0f0f0;
}

↑ 問題に戻る