HTMLとCSSの基本を独学で身につける完全ロードマップ｜未経験者がつまずかない学習順序

「プログラミングの勉強を始めよう」と思ったとき、多くの人が最初にぶつかる壁があります。

「HTMLとCSSって、結局何が違うの？」「チュートリアル通りに書いたのに、なぜか思った通りに表示されない」「基本文法は分かった気がするのに、実務レベルの話（アクセシビリティとかFlexboxとか）になると急についていけなくなる」

この記事では、「自己紹介カード」を1枚作りながら育てていくという進め方で、HTML/CSSの基礎から実務でも使う応用知識まで一気通貫で解説します。長い記事ですが、目次代わりの見出しを拾い読みしてもらっても構いません。

そもそもHTMLとCSSは何をしているのか？「家づくり」でたとえてみる

HTMLとCSSの違いを一言でまとめると、こうなります。

HTML = 家の「骨組みと部屋割り」を決める設計図（構造・意味）
CSS = 壁紙・家具の配置・照明などの「内装」（見た目・装飾）

骨組みがガタガタの家に、どれだけ豪華な内装を施しても意味がありません。逆に、骨組みだけしっかりしていれば、内装（CSS）はあとから何度でも変更・リフォームできます。この「役割を分けて考える」という感覚こそが、学習の最初にして最大のポイントです。

🧓 ベテランの現場コラム 新人時代や新人指導でよく見かけるのが、「見た目を整えたいから」という理由で、本来は<h2>であるべき文字を<p>に太字装飾だけ当てて済ませてしまうケースです。見た目は同じでも、ブラウザや検索エンジンから見ると「これはただの段落」としか認識されません。「見た目」より先に「意味」を決める、これが独学者が最初に身につけるべき癖です。

Part A: HTMLで「意味のある骨組み」を作る

HTMLの役割と基本構造

まずはページの土台となる部分から。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>やまだこうじ - Profile</title>
  </head>
  <body>
    <!-- ここに中身を追加していく -->
  </body>
</html>

記述	役割
`<!DOCTYPE html>`	「このページはHTML5のルールで書かれています」とブラウザに伝える宣言
`<html lang="ja">`	ページ全体を囲む箱。`lang="ja"`で日本語ページだと明示（検索エンジンや読み上げソフトが参照する）
`<meta charset="UTF-8">`	文字コードの指定。これがないと日本語が文字化けすることがある
`<meta name="viewport" ...>`	スマホで見たときにレイアウトが崩れないようにするおまじない（後述）
`<title>`	ブラウザのタブや検索結果に表示されるタイトル

セマンティックHTML（意味を持つタグ）

<body>の中身を、見た目ではなく「これは何を表す情報か」でタグを選びながら組み立てます。

<body>
  <header>
    <img src="profile.jpg" alt="やまだこうじの顔写真" class="avatar" />
    <h1>やまだこうじ</h1>
    <p class="tagline">未経験からバックエンドエンジニアを目指し中</p>
  </header>

  <main>
    <section>
      <h2>身につけたいスキル</h2>
      <ul>
        <li>Python（基礎文法・簡単なWebアプリ）</li>
        <li>SQL（データベースの基本操作）</li>
        <li>Git（バージョン管理）</li>
      </ul>
    </section>

    <section>
      <h2>今の学習状況</h2>
      <p>2026年6月から独学を開始。まずはHTML/CSSでページ構造を理解し、次にPythonの基礎に進む予定です。</p>
    </section>
  </main>

  <footer>
    <a href="https://x.com/example" target="_blank" rel="noopener">Xで学習記録を発信中</a>
  </footer>
</body>

<header>・<main>・<section>・<footer>は、HTML5から使えるようになった「意味を持つ箱（セマンティックタグ）」です。単なる<div>の羅列と違い「ここはヘッダーだ」という情報が伝わるため、検索エンジンからの評価やアクセシビリティに地味に効いてきます。

フォームと入力要素

自己紹介カードに「一言メッセージを送れる欄」を足してみましょう（実際に送信を処理する仕組みはPython/Djangoの回で作ります。ここではまず入力欄の作り方を押さえます）。

<form action="/message" method="POST">
  <label for="visitor-name">お名前</label>
  <input type="text" id="visitor-name" name="visitor_name" placeholder="山田花子" required maxlength="30" />

  <label for="visitor-message">メッセージ</label>
  <textarea id="visitor-message" name="visitor_message" rows="4" required></textarea>

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

属性	役割
`action`	送信先のURL
`method`	送信方法（`POST`はサーバーにデータを送るときの定番）
`label` + `for`/`id`	ラベルと入力欄を紐付ける。クリック領域が広がり、読み上げソフトにも伝わる
`required`	未入力での送信を防ぐ簡易バリデーション
`placeholder`	入力例の薄字表示（あくまでヒントで、ラベルの代わりにはならない）

アクセシビリティ基礎

「誰にとっても使いやすいページ」を作る視点です。最低限、以下は押さえておきましょう。

画像には必ずalt属性を書く（意味のある画像は内容を説明、装飾目的の画像はalt=""で空にする）
フォーム部品には必ずlabelを紐付ける
見出しレベル（h1→h2→h3）を飛ばさない
リンクやボタンの文言は「こちら」ではなく「プロフィールを見る」のように、それだけで意味が分かる表現にする
色だけで情報を伝えない（例: エラーを赤色だけで示さず、文言でも伝える）

🧓 ベテランの現場コラム アクセシビリティは「障害のある人のための特別対応」と誤解されがちですが、実際には検索エンジン最適化（SEO）や、スマホの片手操作、電車内で画面が見にくい状況など、あらゆるユーザーに恩恵があります。現場でも「altを書き忘れて画像SEOの評価が伸びなかった」という話は珍しくありません。最初から癖にしておくと、後から直す手間がなくなります。

Part B: CSSで「見た目」を作り込む

CSSファイルを分けて読み込む

<head>
  <!-- 中略 -->
  <link rel="stylesheet" href="style.css" />
</head>

HTMLとCSSをファイルごと分ける理由は、「役割を分離しておくと、あとで見た目だけを直したくなったときにHTML側を一切触らずに済む」からです。

詳細度（Specificity）のルール

複数のCSSルールが同じ要素に競合したとき、どれが適用されるかを決めるのが「詳細度」です。優先順位は次の通り（高い順）。

インラインスタイル（style="..."）
IDセレクタ（#header）
クラス・属性・擬似クラス（.card, [type="text"], :hover）
要素セレクタ・擬似要素（p, ::before）

p { color: blue; }              /* 詳細度: 低 */
.tagline { color: green; }      /* 詳細度: 中（勝つ） */
#header p { color: red; }       /* IDを含むためさらに強い */

!importantはどのセレクタよりも優先されますが、一度使い始めると詳細度の管理が崩壊しやすいため、最終手段として温存しておくのが無難です。

ボックスモデル

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

🧓 ベテランの現場コラム box-sizing: border-box;は地味ですが、実務でも必ずと言っていいほど最初に書く一行です。これがないと、要素にpadding（内側の余白）を足すたびに指定したwidthより実際の見た目の幅が大きくなり、「なぜかレイアウトが崩れる」という原因不明のバグに直結します。最初にこの一行を書く癖をつけておけば、それだけで事故の8割は防げます。

擬似クラスと擬似要素

a:hover {
  color: #2563eb;
}

a:focus-visible {
  outline: 2px solid #2563eb; /* キーボード操作時に見える枠 */
}

.card:first-child {
  margin-top: 0;
}

.tagline::before {
  content: "🌱 ";
}

:hover・:focusのような「状態」に反応するのが擬似クラス、::before・::afterのように「要素の前後に架空のコンテンツを差し込む」のが擬似要素です。

高度なレイアウト：FlexboxとGrid

Flexbox（1方向の並び）で、写真とテキストを横並びにします。

header {
  display: flex;
  align-items: center;
  gap: 20px;
}

Grid（縦横2次元の並び）で、スキル一覧をカード形式のギャラリーにします。

.skill-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.skill-card {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

FlexboxとGridはどちらも「並べる」ための仕組みですが、Flexboxは1本の線に沿った配置、Gridは行と列を同時に扱う配置に向いています。迷ったら「1列/1行で並べたいだけならFlexbox、格子状に並べたいならGrid」と覚えておけば十分です。

アニメーションとトランジション

.button {
  background-color: #2563eb;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fadeIn 0.4s ease-out;
}

transitionは「状態が変わったときの変化を滑らかにする」もの、@keyframes＋animationは「決まった動きを最初から最後まで自動再生する」ものです。使いすぎるとチープな印象になるため、ページ読み込み時のフェードインやボタンのホバー程度に留めるのが無難です。

Part C: レスポンシブ対応（スマホでも崩れないページに）

ビューポート設定

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

これがないと、スマホのブラウザは「PC用に作られたページを縮小表示している」と誤解し、この先のメディアクエリを書いても反映されないまま小さな文字でページ全体が表示されてしまいます。

メディアクエリ

header {
  display: flex;
  flex-direction: row;
}

@media (max-width: 480px) {
  header {
    flex-direction: column;
    text-align: center;
  }
}

「画面幅が480px以下のときだけ、このスタイルを適用する」という指定です。横並びだったFlexboxの向きを、狭い画面では縦並びに切り替えています。

レスポンシブ画像

<img
  src="profile-medium.jpg"
  srcset="profile-small.jpg 480w, profile-medium.jpg 768w, profile-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 400px"
  alt="やまだこうじの顔写真"
  loading="lazy"
/>

srcsetで複数サイズの画像を用意しておくと、ブラウザが画面幅に応じて最適なファイルを自動選択してくれます。loading="lazy"は「画面に入ってくるまで読み込みを遅らせる」指定で、ページの初期表示速度改善に役立ちます。

Part D: 便利なツールとの付き合い方（Bootstrap・Sass）

Bootstrap

Bootstrapは、あらかじめ用意されたボタン・カード・グリッドなどの部品（コンポーネント）を読み込むだけで使えるCSSフレームワークです。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />

学習の初期段階では、自分の手でCSSを書けるようになることを優先し、Bootstrapは「時間がないときの選択肢」として頭の片隅に置いておくくらいがちょうど良いバランスです。仕組みを理解しないまま部品だけ組み合わせると、デザインを少し変えたいだけなのに手が出せなくなることがあります。

Sass（SCSS）

Sassは変数やネスト（入れ子）でCSSを効率的に書けるようにする拡張言語です。

$accent-color: #2563eb;

.card {
  border-radius: 12px;

  &:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  }

  .title {
    color: $accent-color;
  }
}

普段のCSSでもvar(--accent-color)のようなCSS変数で近いことができるため、Sassは「大規模なプロジェクトで管理が煩雑になってきたら検討する」くらいの位置づけで十分です。

実践プロジェクト：自己紹介カードを「公開できる状態」に仕上げる

ここまでの内容を踏まえて、自己紹介カードを次の状態まで仕上げるのが今回のゴールです。

セマンティックタグで骨組みを組む
メッセージフォームを設置する（送信処理は次回以降）
Flexboxでヘッダーを、Gridでスキルギャラリーをレイアウトする
ボタンにホバーアニメーションを、カードにフェードインアニメーションをつける
スマホ幅でも崩れないようメディアクエリを設定する
画像をsrcsetでレスポンシブ対応する

これができれば、見た目・構造ともに「人に見せられる」レベルの1ページが完成します。

🧓 ベテランの現場コラム 独学中は「完璧に仕上げてから公開しよう」と考えがちですが、現場では「6割の完成度でまず動くものを見せる」ことの方が評価されます。自己紹介カードも、まずはこの実践プロジェクトの範囲で一度完成させ、後の回（JavaScript・UIの回）でどんどん機能を足していく前提で気楽に進めましょう。

🧠 理解度チェック（一部抜粋）

サイト上には選択式の理解度テストを用意する予定です。ここでは考え方の一例だけ紹介します。

Q. <div>と<section>の違いは何か？ → <section>は「意味のあるまとまり」を示すセマンティックタグ、<div>はレイアウト目的の意味を持たない箱
Q. box-sizing: border-box;を指定する理由は？ → paddingやborderを含めた実際の見た目の幅を、指定したwidthに一致させるため
Q. Flexboxが向いているのはどんな配置？ → 1本の軸（横並び or 縦並び）に沿ったシンプルな配置

挫折ポイントTOP3と対処法

1. 「CSSを書いたのに反映されない」問題

原因の9割は次のどれかです。ブラウザのキャッシュが残っている（強制再読み込みで解消）、<link>のパス指定ミス、詳細度で他のルールに負けている。

2. 「余白や幅が思った通りにならない」問題

box-sizingの設定漏れが最頻出。次点でmargin（外側の余白）とpadding（内側の余白）の混同です。

3. 「スマホで見ると崩れる」問題

<meta name="viewport" ...>の書き忘れが最多。固定pxに頼りすぎたレイアウトも要注意です。

🧓 ベテランの現場コラム 独学中は「なぜエラーになるのか分からない」状態がいちばん心が折れます。そんなときは、ブラウザの開発者ツール（F12キーまたは右クリック→「検証」）を開く癖をつけてください。「Elements」タブで実際に適用されているCSSを確認できるので、自分が書いたつもりのスタイルが本当に当たっているかを目で確認できます。

この先、何を学べばいいか

自己紹介カードが形になったら、次は2方向に進みます。

コードの変更履歴を管理する「Git」を学ぶ（本シリーズ次回）。ファイルを上書きするたびに別名で保存する管理方法から卒業できます。
サーバー側の処理を学ぶ「Python」に進む。今回作ったフォームは、まだ送信しても何も起きません。実際にメッセージを受け取って処理する仕組みは、この先のステップで作ります。

まとめ

HTMLは「構造と意味」、CSSは「見た目」。役割を分けて考える
迷ったら<div>より意味の伝わるタグを選び、アクセシビリティも最初から意識する
box-sizing: border-box;とviewportの指定は最初のおまじないとして必ず入れる
並べ方に迷ったら「1方向はFlexbox、格子状はGrid」
フレームワークに頼る前に、まず素のHTML/CSSで一通り手を動かす

参考にした学習リソースについて

本記事は、ハーバード大学が提供する人気講座「CS50’s Web Programming with Python and JavaScript」の内容を参考にしつつ、独自の題材（自己紹介カード）・独自の構成・自作のサンプルコードで書き下ろしたオリジナル解説記事です。CS50そのものに興味を持った方は、以下の公式サイトも覗いてみてください（英語ですが、日本語字幕付きの動画も公開されています）。

CS50 公式サイト: https://cs50.harvard.edu/x/