HTMLとCSSを始めたいものの、「何から覚えればいい？」「どこまでできれば初心者を卒業できる？」と迷っていませんか。教材を開いた直後にタグやプロパティをすべて暗記しようとすると、Webページを作る前に疲れてしまいます。
HTML・CSS初心者は、HTMLで内容を作る→CSSで見た目を整える→小さなページを完成させるという順番で進めるのが基本です。分からないコードはその都度調べればよく、最初からすべてを覚える必要はありません。
この記事では、HTMLとCSSの役割、学習前に用意するもの、Webページを公開するまでの7段階のロードマップ、独学を続けるコツを初心者向けに解説します。学ぶ順番を決めて、まずは1ページを完成させてみましょう。
HTML・CSS初心者は小さなWebページ作りから始める
HTMLとCSSの学習では、知識を増やすことだけでなく、コードを書いてブラウザの表示を確かめることが大切です。見出しと文章だけのページでも、自分で保存して表示できれば最初の成果になります。
上の図は、初心者がWebページを公開するまでの流れです。HTMLとCSSを別々に長期間勉強するのではなく、1つのページで交互に使いながら少しずつできることを増やします。
HTMLとCSSを使って最初のWebページを作る手順は、次の記事でコードをコピーしながら確認できます。
HTMLとCSSの役割を最初に理解する
HTMLはWebページの内容と構造を作るマークアップ言語です。見出し、段落、画像、リンクなどにタグを付け、ブラウザや検索エンジン、音声読み上げソフトへ内容の意味を伝えます。
CSSは、HTMLで作った要素の見た目を整えるスタイルシート言語です。文字色、背景色、余白、枠線、横並びの配置、画面幅に応じた表示などを指定します。
| 項目 | HTML | CSS |
|---|---|---|
| 主な役割 | 内容と構造を作る | 見た目と配置を整える |
| 代表的な内容 | 見出し、文章、画像、リンク | 色、文字サイズ、余白、レイアウト |
| 基本のファイル名 | index.html | style.css |
| 学習のポイント | 内容の意味に合うタグを選ぶ | どの要素へ何を指定したか確認する |
HTMLとCSSは役割が違いますが、実際の制作では組み合わせて使います。「HTMLを完全に覚えてからCSSへ進む」のではなく、HTMLで要素を1つ作ったらCSSで装飾する流れで練習すると、両者の関係を理解しやすくなります。
HTML・CSSの学習前に用意するもの
基本的なHTMLとCSSは、パソコン、テキストエディタ、Webブラウザがあれば練習できます。高価なソフトやレンタルサーバーを最初から契約する必要はありません。
| 用意するもの | 役割 | 初心者が確認すること |
|---|---|---|
| パソコン | ファイルを作成・保存する | WindowsでもMacでも学習できる |
| テキストエディタ | HTMLとCSSを書く | コードの色分けや入力補助があると便利 |
| Webブラウザ | ページの表示を確認する | Chrome、Edge、Safariなどでよい |
| 作業用フォルダー | HTML・CSS・画像をまとめる | ファイルの場所を見失わない名前にする |
コード向けのエディタを使うと、タグの閉じ忘れやスペルミスへ気付きやすくなります。まだ決めていない場合は、初心者向けエディタの選び方と使い方を次の記事で確認してください。
HTML・CSS初心者の学習ロードマップ
ここからは、HTMLファイルを作るところからWebページを公開するまでを順番に解説します。各段階で完璧を目指す必要はありません。「コードを追加する→保存する→ブラウザで結果を見る」を繰り返してください。
HTMLの基本構造を書く
最初に作業用フォルダーを用意し、その中へindex.htmlを保存します。次のコードは、HTML文書の基本構造です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのWebページ</title>
</head>
<body>
<h1>はじめてのWebページ</h1>
<p>HTML・CSSの学習を始めました。</p>
</body>
</html>head要素には文字コードやページタイトルなどの設定を書き、body要素にはブラウザへ表示する内容を書きます。meta name="viewport"は、スマートフォンの画面幅に合わせて表示するための設定です。
保存したindex.htmlをブラウザで開き、見出しと文章が表示されれば最初の段階は完了です。コードが文字として表示される場合は、ファイル名がindex.html.txtになっていないか確認します。
よく使うHTMLタグで内容を増やす
基本構造を表示できたら、見出し、段落、画像、リンク、リストを追加します。見た目だけでタグを選ばず、内容の意味に合うものを使うことがポイントです。
<main>
<h1>はじめてのWebページ</h1>
<p>このページで学習記録を紹介します。</p>
<h2>学習したこと</h2>
<ul>
<li>HTMLの基本構造</li>
<li>見出しと段落</li>
<li>リンクとリスト</li>
</ul>
</main>mainはページの中心的な内容、h1とh2は見出し、pは段落、ulとliは箇条書きを表します。意味のある構造にすると、検索エンジンや音声読み上げソフトにも内容が伝わりやすくなります。
代表的なタグと属性をまとめて確認したい場合は、次の記事も参考にしてください。
HTMLからCSSを読み込む
次に、index.htmlと同じフォルダーへstyle.cssを作ります。HTMLのhead要素内へ次のlink要素を追加してください。
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルの種類、href="style.css"はファイルの場所を表します。ファイル名のスペルや保存場所が違うとCSSが反映されないため、最初に確認しましょう。
body {
color: #1f2937;
background-color: #eff6ff;
font-family: sans-serif;
}
h1 {
color: #1d4ed8;
}CSSは「どの要素へ」「何を」「どの値にするか」を指定します。上のコードでは、bodyの文字色と背景色を変え、h1の文字を青くしています。
余白とボックスモデルを理解する
Webページの各要素は、内容、内側の余白、枠線、外側の余白を持つ箱として配置されます。この考え方をボックスモデルと呼びます。
* {
box-sizing: border-box;
}
main {
width: min(100% - 32px, 720px);
margin: 40px auto;
padding: 32px;
background-color: #ffffff;
border: 1px solid #dbeafe;
border-radius: 12px;
}paddingは要素の内側、marginは外側の余白です。box-sizing: border-boxを指定すると、幅の計算に内側の余白と枠線が含まれ、レイアウトを調整しやすくなります。
FlexboxやGridで要素を配置する
余白を調整できるようになったら、FlexboxやGridで複数の要素を並べます。最初はナビゲーションやカードの横並びなど、小さな範囲から試してください。
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}display: gridでGridレイアウトを有効にし、grid-template-columnsで3列、gapで要素間の余白を指定しています。画面幅が狭いと3列では読みにくいため、次の段階でスマートフォン表示も整えます。
スマートフォンでも読みやすくする
画面幅に応じてレイアウトを変える設計をレスポンシブWebデザインと呼びます。パソコンでウィンドウ幅を狭め、文章がはみ出さないか、横並びが窮屈にならないかを確認してください。
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
}
main {
margin: 24px auto;
padding: 24px;
}
}このメディアクエリは、画面幅が640px以下のときカードを1列へ変更します。幅を固定しすぎず、画像にはmax-width: 100%を指定するなど、内容が画面からはみ出さない設計を意識しましょう。
小さなWebページを完成させる
基本構造、よく使うタグ、色と余白、レイアウト、スマートフォン表示を試したら、1ページの作品として完成させます。自己紹介、好きなものの紹介、店舗案内など、内容を考えやすいテーマを選んでください。
- ページの目的が分かる見出しを付ける
- 文章を見出しと段落に分ける
- 必要な画像へ内容を伝える代替テキストを設定する
- リンクの文字だけで移動先が分かるようにする
- キーボード操作時のフォーカスを見える状態にする
- パソコンとスマートフォンの両方で確認する
完成度を上げるより、まず最後まで作ることを優先します。練習問題を使って手を動かしたい場合は、次の記事も活用してください。
Web上へ公開して改善する
ローカルのブラウザで表示できたら、静的サイトを公開できるホスティングサービスやレンタルサーバーへアップロードします。公開前には、個人情報、画像の利用条件、リンク先、スマートフォン表示をもう一度確認してください。
公開は学習の終点ではありません。実際の画面を見て、読みづらい余白や分かりにくいリンクを直します。更新前の状態を残せるGitも少しずつ学ぶと、変更を戻したり制作過程を管理したりしやすくなります。
HTML・CSSを独学する方法
HTMLとCSSは独学でも始めやすい技術です。ただし、教材を読むだけではコードを書けるようになりにくいため、学んだ内容を小さな制作へ使う時間を設けます。
| 学習方法 | 向いている人 | 注意点 |
|---|---|---|
| 無料の学習サイト・公式資料 | まず費用をかけずに試したい人 | 学ぶ順番と練習テーマを自分で決める |
| 入門書 | 一冊の順序に沿って進めたい人 | 出版年と対象バージョンを確認する |
| 動画教材 | 画面操作を見ながら進めたい人 | 視聴だけで終わらず自分でも入力する |
| スクール・講座 | 質問や添削を受けながら進めたい人 | 費用、学習期間、サポート範囲を比較する |
どの方法でも、教材と同じものを作った後に、色、文章、画像、余白を自分で変える工程を入れてください。変更した結果を説明できるようになると、コードをただ写す段階から一歩進めます。
独学の進め方や教材の選び方を詳しく確認したい方は、次の記事も参考になります。
HTML・CSS初心者が挫折しないためのコツ
すべてを暗記しようとしない
タグやCSSプロパティは数が多いため、最初からすべてを覚える必要はありません。よく使う見出し、段落、リンク、画像、リスト、色、余白から始め、必要なものを調べながら使います。
エラーを一度に直そうとしない
表示が想定と違うときは、最後に追加したコードを確認します。ファイルを保存したか、CSSのファイル名とパスは合っているか、波括弧やセミコロンが抜けていないかを1つずつ調べてください。
模写した後に自分の内容へ変える
公開されているページの構成を参考にする模写は、レイアウトの練習に役立ちます。ただし、文章や画像、ロゴ、コードを無断で再公開せず、学習用として扱ってください。
教材どおりのページを表示できたら、配色、余白、文章、要素の順番を変えます。最後に自己紹介ページやポートフォリオなど、自分で内容を決めたページを完成させると理解が定着します。
HTML・CSSの次に学ぶこと
HTMLとCSSで1ページを作り、スマートフォン表示まで確認できたら、目的に応じて次の技術へ進みます。すべてを同時に始める必要はありません。
- Git・GitHub：変更履歴を管理し、制作物を共有する
- JavaScript：クリックや入力に応じて表示を変える
- WordPress：管理画面から記事や固定ページを更新できるサイトを作る
- アクセシビリティ：さまざまな利用環境で内容を理解・操作できるようにする
- Webパフォーマンス：画像やコードを見直し、表示を速くする
JavaScriptへ進む前に、HTML要素を選びやすい構造とCSSの基本を身に付けておくと、表示を変更する処理を理解しやすくなります。
HTML・CSS初心者によくある疑問
HTMLとCSSはどちらから学びますか？
最初にHTMLの基本構造とよく使うタグを学び、そのページへCSSを追加します。HTMLだけを長期間学び終えてからCSSへ進むのではなく、小さなページで交互に使う方法がおすすめです。
HTMLとCSSはプログラミング言語ですか？
厳密には、HTMLはマークアップ言語、CSSはスタイルシート言語です。計算や条件分岐を記述する一般的なプログラミング言語とは役割が異なりますが、Webページ制作の土台になる重要な技術です。
どのくらい学べばWebページを作れますか？
必要な時間は学習環境や目標によって異なります。期間だけを基準にせず、見出しや画像を配置し、CSSで色と余白を整え、スマートフォンでも読める1ページを自分で完成できることを最初の目安にしてください。
スマートフォンだけでも学べますか？
ブラウザ上の教材で基本を試すことはできますが、ファイル管理、複数画面での確認、エディタ操作を含む制作にはパソコンが適しています。Web制作を続ける予定なら、パソコンで練習できる環境を用意すると進めやすくなります。
まとめ
HTML・CSS初心者は、HTMLの基本構造、よく使うタグ、CSSの読み込み、余白とレイアウト、レスポンシブ対応の順に学びます。その後、小さなWebページを最後まで作り、公開して改善すると、知識同士のつながりを理解できます。
最初からすべてを暗記する必要はありません。まずindex.htmlとstyle.cssを作り、コードを1つ追加するたびにブラウザで表示を確認してください。1ページを完成させた経験が、次の作品やJavaScriptの学習へ進む土台になります。