HTML と CSS

「自分はバックエンド担当だから HTML は要らない」——これは通用しません。

• ブラウザの DevTools を開くと、そこにあるのは HTML と CSS です
• API が返した値が画面に出ない時、原因の切り分けにはどちらの知識も要ります
• 管理画面や社内ツールは、たいてい自分で作ることになります
• そしてフォームの仕組みは、Web と HTTPの HTTP と直結しています

この章は、Web ページを構成する2つの言語を扱います。 プログラミング言語ではありません。HTML は構造を、CSS は見た目を書くものです。

HTML は文書の構造を書く

<article class="post">
  <h1>タイトル</h1>
  <p>本文です。<a href="/next">次へ</a></p>
</article>

• タグで囲んで、それが何であるかを示す
• 属性（class href）で情報を足す
• 入れ子にして構造を作る

ブラウザはこれを読んで DOM ツリーを作ります（ブラウザはなぜ動くのか）。

意味のあるタグを使う

すべてを div で書くこともできます。しかし、しません。

<!-- 悪い: 何であるか分からない -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="title">記事タイトル</div>
</div>
 
<!-- 良い: タグ自体が意味を持つ -->
<header>
  <nav>...</nav>
</header>
<main>
  <h1>記事タイトル</h1>
</main>

理由は3つあります。

1. スクリーンリーダーが「見出し一覧」「ナビゲーション」として扱える
2. 検索エンジンが構造を理解できる
3. 他の人がコードを読める

<div onclick="save()">保存</div>     <!-- 悪い -->
<button onclick="save()">保存</button> <!-- 良い -->

フォーム — HTTP と直結している部分

Web と HTTPで学んだ HTTP のメソッドとボディは、ここから生まれます。

<form action="/login" method="post">
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email" required>
 
  <label for="password">パスワード</label>
  <input type="password" id="password" name="password" required>
 
  <button type="submit">ログイン</button>
</form>

送信ボタンを押すと、ブラウザは自動的にこの HTTP リクエストを作ります。

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
 
email=a%40example.com&password=secret

label を必ず関連付ける

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

for と id を一致させると、

• ラベルをクリックすると入力欄にフォーカスが移る（スマホで特に効く）
• スクリーンリーダーが「メールアドレス、編集可能」と読む

チェックボックスでは、押しやすさが目に見えて変わります。

アクセシビリティは特別なことではない

「対応が必要になったらやる」ものではなく、 正しい HTML を書けば、ほとんど自動的に満たされます。

□ 見出し（h1〜h6）で構造を作る
□ 押すものは button、移動は a
□ 画像に alt を書く（装飾なら alt="" と空で書く）
□ フォームに label を付ける
□ キーボードだけで全部の操作ができる（Tab と Enter で試す）
□ 色だけで情報を伝えない（赤字だけでエラーを示さない）
□ 文字と背景のコントラストを確保する

CSS — 見た目を書く

セレクタ {
  プロパティ: 値;
}
 
.post h1 {
  font-size: 1.5rem;
  color: #333;
}

セレクタと詳細度

同じ要素に複数のルールが当たった時、どれが勝つかが決まっています。

ボックスモデル

すべての要素は、内側から順に内容・padding・border・marginを持つ箱です。

┌─────────── margin ───────────┐
│ ┌───────── border ─────────┐ │
│ │ ┌─────── padding ──────┐ │ │
│ │ │      内容（content）   │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

/* 実務ではほぼ必ず最初に書く */
*, *::before, *::after { box-sizing: border-box; }

これを書くと、width: 300px が padding と border を含んだ幅になります。 書かないと、padding を足すたびに要素が大きくなり、レイアウトが崩れます。

上の要素の margin-bottom: 20px
下の要素の margin-top:    30px
→ 間隔は 50px ではなく 30px

レイアウトは Flexbox と Grid

現代の CSS では、この2つでほぼすべてのレイアウトが組めます。 float や table レイアウトは過去のものです。

/* Flexbox: 一方向に並べる */
.toolbar {
  display: flex;
  justify-content: space-between;  /* 主軸方向（横）の配置 */
  align-items: center;             /* 交差軸方向（縦）の配置 */
  gap: 8px;                        /* 要素間の余白。margin より扱いやすい */
}
 
/* Grid: 二次元に配置する */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

上の Grid の1行は、「240px を下回らない範囲で、入るだけ列を作る」という意味です。 これだけでメディアクエリ無しにレスポンシブになります。

位置指定

position: static;    /* 既定。通常の流れに従う */
position: relative;  /* 通常の位置から相対的にずらす。基準点にもなる */
position: absolute;  /* 直近の relative な祖先を基準に配置。流れから外れる */
position: fixed;     /* 画面に固定 */
position: sticky;    /* スクロールに応じて固定される */

単位

文字サイズを px で固定すると、ブラウザの文字サイズ設定が効かなくなります。 基本は rem を使ってください。

レスポンシブ

/* 既定はモバイル向けに書き、広い画面で上書きする（モバイルファースト） */
.container { padding: 16px; }
 
@media (min-width: 768px) {
  .container { padding: 32px; max-width: 960px; margin-inline: auto; }
}

:root { --bg: #fff; --text: #222; }
 
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}
 
body { background: var(--bg); color: var(--text); }

CSS が破綻する理由と、その対策

CSS のセレクタはグローバルです。 .title と書けば、ページ中のすべての .title に当たります。

規模が大きくなると、次が起きます。

• どこで使われているか分からず、消せない CSS が積み上がる
• 別の画面のスタイルを壊す
• 詳細度の戦争（!important の応酬）

対策として、いくつかの流儀があります。

どれが正しいということはなく、チームで統一されていることが重要です。 この教科書のサイトは Tailwind を使っています。

DevTools での見方

Web と HTTPの Network タブと並んで、Elements タブは最も使う道具です。

1. 要素を右クリック →「検証」で、その要素の HTML にジャンプする
2. 右側の Styles で、当たっている CSS が上から強い順に並ぶ
3. 打ち消し線 = そのルールは負けている（詳細度か、後勝ちで）
4. Computed タブ = 最終的に何が適用されたか
5. その場で値を書き換えて試せる（リロードで消える）

「CSS が効かない」の8割は、DevTools を見れば5秒で分かります。 効いていないのか、当たっているが上書きされているのか、 そもそも要素が違うのかが、その場で判別できます。

el.innerHTML = userInput;   // 危険。<script> やイベント属性が実行される
el.textContent = userInput; // 安全。文字として表示される

実務の落とし穴まとめ

1. すべて div — 読めず、キーボードでも操作できない
2. input に name が無い — サーバーに届かない
3. HTML のバリデーションを防御と考える — 迂回できる。サーバー側で必ず検証
4. label を付けない — 押しにくく、読み上げられない
5. !important で解決 — 次に上書きしたい人が同じことをする
6. box-sizing を設定していない — padding のたびにレイアウトが崩れる
7. margin の相殺を知らない — 隙間が想定と合わない
8. z-index を大きくして解決しようとする — スタッキングコンテキストを見る
9. 文字サイズを px で固定 — ユーザーの設定が効かない
10. innerHTML にユーザー入力 — XSS

まとめ

• HTML は構造、CSS は見た目。意味のあるタグを選ぶことが、 そのままアクセシビリティと可読性になる
• 押すなら button、移動なら a
• フォームは HTTP と直結している。name が送信キー、 HTML のバリデーションは防御ではない
• CSS は詳細度で勝敗が決まる。!important ではなく DevTools で原因を見る
• レイアウトは Flexbox（1方向）と Grid（2次元）。gap を使う
• box-sizing: border-box は最初に書く。rem を基本の単位にする
• CSS はグローバルなので、命名規則かツールで衝突を防ぐ
• DevTools の Elements タブが最短の解決手段

公式ドキュメント

迷ったら一次情報に戻ってください。

章末問題

次の章では、書いた HTML と CSS で何を作るべきか—— デザインと使いやすさの話に進みます。