📖 完全初心者向け

はじめての
HTML / CSS

ゼロからWebページを作れるようになろう。
難しい言葉はなし。やさしく、楽しく学べる教科書です。

🌐 HTML基礎 🎨 CSS基礎 📱 レイアウト ✏️ 練習問題つき
📚 もくじ
第 1 章

HTMLとCSSってなに？

Webページは何でできている？

あなたが毎日見ているWebページは、主に2つの言語でできています。

HTML
🏗️ 骨格・構造
「ここに文字」「ここに画像」という内容の設計図
CSS
🎨 デザイン・見た目
色・大きさ・位置などおしゃれにする役割
JavaScript
⚡ 動き・機能
ボタンを押したら動く、などのインタラクション
🏠
たとえて言うと…

HTMLは家の骨組み・間取り、CSSは壁紙・インテリアのようなものです。まず骨組みを作って、それから飾り付けます。

HTMLファイルの基本形

すべてのHTMLファイルは、このおまじないから始まります。まずはこの形を覚えましょう！

HTML
<!DOCTYPE html>              <!-- HTML5で書きますよ、という宣言 -->
<html lang="ja">              <!-- ページ全体を囲む -->

  <head>                        <!-- ブラウザへの設定（画面には出ない） -->
    <meta charset="UTF-8">   <!-- 日本語を使えるようにする -->
    <title>私のページ</title>    <!-- タブに表示される名前 -->
  </head>

  <body>                        <!-- ここに見える内容を書く -->
    <h1>こんにちは！</h1>
    <p>これは最初のWebページです。</p>
  </body>

</html>
💡
headとbodyの違い

<head> は「ブラウザへの指示書」でページには表示されません。
<body> が「実際に画面に見える部分」です。コンテンツはここに書きます。

第 2 章

HTMLの基本 — タグを覚えよう

タグとはなに？

HTMLはタグという「命令」を使って書きます。タグは必ず <開始タグ> と </終了タグ> の2つがセットです。

HTML
<p>これは段落です。</p>
 ↑開始タグ              ↑終了タグ（/ がつく）
⚠️
よくある間違い

終了タグの / （スラッシュ）を忘れないようにしましょう！
❌ <p>テキスト<p>　→　✅ <p>テキスト</p>

よく使うHTMLタグ一覧
<h1>〜<h6>
見出し。h1が一番大きく、h6が最小
<p>
段落（テキストのまとまり）
<a>
リンク（クリックして移動）
<img>
画像を表示する
<ul> <li>
箇条書きリスト
<ol> <li>
番号付きリスト
<div>
グループ分け（箱）
<span>
インラインの範囲指定
<strong>
太字（重要な文字）
<br>
改行（終了タグ不要）
見出しタグの使い方

<h1> が最大の見出し、<h6> が最小です。ページのタイトルは <h1>、その下の見出しは <h2> のように使います。

HTML
<h1>ページタイトル（一番大きい）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<p>普通の文章はpタグを使います。</p>
👁 ブラウザ表示イメージ

ページタイトル（一番大きい）

大見出し

中見出し

普通の文章はpタグを使います。

リンク・画像・リスト
HTML — リンクと画像
<!-- リンク -->
<a href="https://example.com">クリックしてね</a>

<!-- 画像（終了タグなし） -->
<img src="cat.jpg" alt="猫の写真">
      ↑画像ファイル名    ↑説明テキスト（必須！）
HTML — リスト
<!-- 箇条書き（ul）-->
<ul>
  <li>りんご</li>
  <li>バナナ</li>
</ul>

<!-- 番号付き（ol）-->
<ol>
  <li>水を沸騰させる</li>
  <li>麺を入れる</li>
</ol>
👁 ブラウザ表示イメージ

箇条書き（ul）

  • りんご
  • バナナ

番号付き（ol）

  1. 水を沸騰させる
  2. 麺を入れる
第 3 章

CSSの基本 — 見た目を整えよう

CSSの書き方

CSSは「どの要素を、どうデザインするか」を書きます。

CSS
h1 {                     /* セレクター：対象のHTML要素 */
  color: red;            /* プロパティ: 値; */
  font-size: 32px;
}

p {
  color: #333333;         /* カラーコードで色を指定 */
  line-height: 1.8;      /* 行の高さ */
}
📌
CSSをHTMLに読み込む方法

<head> の中に書きます：
<link rel="stylesheet" href="style.css">
または <style> ... </style> タグの中に直接書くこともできます。

色の指定方法
CSS
p {
  color: red;              /* ① 色の名前（英語） */
  color: #ff0000;         /* ② カラーコード */
  color: rgb(255, 0, 0);  /* ③ RGB値（赤,緑,青） */
}

よく使う色：

#e85d04

オレンジ

#2d6a4f

緑

#1d3557

紺

#ffd166

黄色

#ffffff

白

#1a1a1a

黒

よく使うCSSプロパティ
プロパティ意味例
color文字の色color: #333;
background-color背景色background-color: yellow;
font-size文字の大きさfont-size: 18px;
font-weight文字の太さfont-weight: bold;
text-align文字の位置text-align: center;
margin外側の余白margin: 16px;
padding内側の余白padding: 10px 20px;
border枠線border: 2px solid red;
border-radius角を丸くするborder-radius: 8px;
width / height幅・高さwidth: 300px;
ボックスモデルを理解しよう

すべてのHTML要素は箱（ボックス）です。箱には4つの層があります。

📦 margin（外側の余白）
🟠 border（枠線）
🟢 padding（内側の余白）
✨ content（内容）
CSS
.box {
  margin: 20px;            /* 外側の余白 */
  border: 2px solid black;  /* 枠線 */
  padding: 10px 20px;      /* 内側 上下10px 左右20px */
  width: 300px;
}
クラスとIDでスタイルを当てる
HTML + CSS
<!-- HTML -->
<p class="red-text">この文字は赤くなる</p>
<p id="main-title">IDでスタイルを当てる</p>

/* CSS */
.red-text {     /* クラスは . （ドット）で書く */
  color: red;
}

#main-title {   /* IDは # （シャープ）で書く */
  font-size: 28px;
}
💡
classとidの違い

class：同じクラスを何度でも使える（複数の要素に適用OK）
id：1ページに1回だけ使える。基本的に classを多く使うのがおすすめです。

第 4 章

レイアウトを作ろう

Flexboxで横並びにする

要素を横に並べるとき、最もよく使うのが display: flex です。

HTML + CSS
<!-- HTML -->
<div class="container">
  <div>ボックス1</div>
  <div>ボックス2</div>
  <div>ボックス3</div>
</div>

/* CSS */
.container {
  display: flex;            /* 横並びにする */
  gap: 16px;               /* アイテム間の隙間 */
  justify-content: center;  /* 中央に配置 */
}
👁 ブラウザ表示イメージ
ボックス1
ボックス2
ボックス3
justify-content の値意味
flex-start左寄せ（デフォルト）
center中央寄せ
flex-end右寄せ
space-between両端に配置し均等割り
ボタンを作ってみよう
HTML + CSS
<!-- HTML -->
<a href="#" class="btn">クリック！</a>

/* CSS */
.btn {
  display: inline-block;
  background-color: #e85d04;
  color: white;
  text-decoration: none;     /* 下線を消す */
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: bold;
}
.btn:hover {                   /* マウスを乗せたとき */
  background-color: #c74f00;
}
👁 ブラウザ表示イメージ
クリック！
レスポンシブデザイン（スマホ対応）

@media を使うと、画面の幅に応じてデザインを変えられます。

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

/* 画面幅が600px以下のとき（スマホ）*/
@media (max-width: 600px) {
  .container {
    flex-direction: column;  /* 縦並びに変える */
  }
}
📱
モバイルファースト

現代のWebはスマホで見る人が多数派です。スマホのデザインを先に考えて、大きい画面用に追加していくやり方を「モバイルファースト」といいます。

第 5 章

まとめ＆練習問題

ここまでのまとめ
  • HTMLはWebページの構造・内容を書く言語
  • CSSはWebページの見た目・デザインを書く言語
  • タグは <開始> と </終了> がセット
  • CSSは セレクター { プロパティ: 値; } の形
  • class は何度でも使え、id は1回だけ
  • display: flex で横並びレイアウトが作れる
  • @media でスマホ対応ができる
✏️ 練習問題 — 答えてみよう！
Q1 HTMLで「見出し（一番大きい）」を書くタグはどれ？
Q2 CSSでクラス名 "box" にスタイルを当てるセレクターは？
Q3 要素を横並びにするCSSプロパティは？
Q4 <img> タグに必ず書くべき属性は？
Q5 内側の余白を設定するCSSプロパティは？
次のステップ 🚀
  • 📝 VS Code（無料） をインストールしてHTMLを書いてみる
  • 🌐 ブラウザ（Chrome等） でファイルを開いて確認する
  • 🔍 右クリック→「検証」 で他サイトのコードを見てみる
  • 🎯 自己紹介ページを1つ完成させるのが一番の近道！
🎉
おめでとうございます！

HTML/CSSの基礎を学べました！たくさん書いて慣れることが一番の近道です。エラーが出てもOK。それが学びの証拠です。