第1部：Web開発の基礎知識 Step 2 / 20

HTML/CSS基礎

HTMLは「構造」、CSSは「見た目」を担当します。この2つを理解すれば、Webページがどう作られているか分かるようになります。

HTMLの基本

HTMLとは

HTML（HyperText Markup Language）は、Webページの「骨組み」を作る言語です。タグを使って、テキストや画像に意味を持たせます。

HTMLの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
</head>
<body>
    <!-- ここに表示したい内容を書く -->
    <h1>こんにちは</h1>
    <p>これは段落です。</p>
</body>
</html>
<!DOCTYPE html> 「これはHTML5です」という宣言
<html> HTML文書全体を囲む
<head> ページの設定情報（タイトル等）
<body> 実際に画面に表示される内容

よく使うタグ

見出し

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

h1〜h6まであり、数字が小さいほど大きい見出し

段落・テキスト

<p>段落テキスト</p>
<span>インライン要素</span>
<strong>太字</strong>

pは段落、spanはテキストの一部を囲む

リンク・画像

<a href="https://...">リンク</a>
<img src="image.jpg" alt="説明">

aはリンク、imgは画像を表示

リスト

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

ulは箇条書き、olは番号付きリスト

コンテナ

<div>ブロック要素</div>
<section>セクション</section>
<header>ヘッダー</header>

要素をまとめるための箱

フォーム

<input type="text">
<button>送信</button>
<textarea></textarea>

ユーザーの入力を受け付ける

属性（Attribute）とは

タグに追加情報を与えるものを「属性」と呼びます。

<a href="https://example.com" class="link" id="main-link">
  リンクテキスト
</a>

CSSの基本

CSSとは

CSS（Cascading Style Sheets）は、HTMLの見た目を装飾する言語です。色、サイズ、配置などを指定できます。

CSSの書き方

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

h1 {
  color: blue;
  font-size: 24px;
}

.button {
  background-color: #3b82f6;
  padding: 10px 20px;
  border-radius: 8px;
}

#header {
  height: 60px;
}
h1 タグ名で選択（すべてのh1）
.button クラス名で選択（.をつける）
#header ID名で選択（#をつける）

よく使うプロパティ

色

color: red;         /* 文字色 */
background-color: #fff; /* 背景色 */

サイズ

width: 100px;   /* 横幅 */
height: 50px;  /* 高さ */
font-size: 16px; /* 文字サイズ */

余白

margin: 10px;   /* 外側の余白 */
padding: 20px;  /* 内側の余白 */

レイアウト

display: flex;  /* 横並び */
justify-content: center;
align-items: center;

marginとpaddingの違い

margin（外側の余白）
padding（内側の余白）
コンテンツ

Tailwind CSSの紹介

Tailwind CSSは、あらかじめ用意されたクラス名をHTMLに書くだけでスタイリングできるCSSフレームワークです。

通常のCSSとの比較

通常のCSS

<!-- HTML -->
<button class="btn">ボタン</button>

/* CSS */
.btn {
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

Tailwind CSS

<!-- HTMLだけでOK -->
<button class="bg-blue-500 text-white
  px-4 py-2 rounded">
  ボタン
</button>

よく使うTailwindクラス

カテゴリ クラス例 意味
色 text-blue-500, bg-red-100 文字色、背景色
余白 p-4, m-2, px-6, py-3 padding, margin
サイズ w-full, h-10, text-lg 幅、高さ、文字サイズ
レイアウト flex, grid, justify-center 配置方法
角丸 rounded, rounded-lg 角を丸くする
影 shadow, shadow-lg 影をつける

ポイント：Next.jsではTailwind CSSがよく使われます。AIにスタイリングを依頼するときも「Tailwindで」と指定すると効率的です。

開発者ツールでコードを見る

ブラウザには、Webページの構造を確認できる「開発者ツール」が搭載されています。

開き方

  • Windows: F12 または Ctrl + Shift + I
  • Mac: Cmd + Option + I
  • または右クリック →「検証」

できること

おすすめ：気になるWebサイトがあったら、開発者ツールで「どうやって作られているか」を覗いてみましょう。

練習問題

Q1. 次のHTMLで、「リンク」と表示されるのはどこ？

<a href="https://example.com">リンク</a>

Q2. CSSで「.menu」というセレクタは何を選択する？

Q3. Tailwind CSSで「px-4」は何を意味する？

まとめ

  • ✓ HTMLはタグを使ってWebページの構造を作る
  • ✓ CSSはセレクタでHTML要素を選び、プロパティで見た目を指定する
  • ✓ classとidで要素に名前をつけ、CSSで装飾する
  • ✓ Tailwind CSSを使うと、クラス名だけでスタイリングできる
  • ✓ 開発者ツールで既存サイトの構造を確認できる
前へ：Webの仕組み 次へ：JavaScript基礎