HTMLとCSSを学びたいものの、「何が違うの？」「何を用意すればページを作れるの？」と迷っていませんか。初めてコードを見ると記号が多く感じますが、最初からすべてを暗記する必要はありません。
HTMLはWebページの内容と構造を作り、CSSは色・余白・配置などの見た目を整えます。この2つを同じフォルダーに用意し、HTMLからCSSを読み込むと、ブラウザにデザインされたページが表示されます。
この記事では、HTML・CSSの役割から必要な道具、最初のWebページを作る手順、基本構文、学習の進め方まで初心者向けに解説します。サンプルコードをコピーしながら、実際にブラウザで表示を確認してみましょう。
HTMLとCSSはWebページを作るための言語
普段ブラウザで見ているWebページは、文章、画像、リンクなどの内容と、それらを読みやすく見せるデザインでできています。その中心となる技術がHTMLとCSSです。
HTMLは内容と構造をブラウザへ伝える
HTMLは「HyperText Markup Language」の略で、文章や画像へ意味を付けるマークアップ言語です。見出しにはh1、段落にはp、リンクにはaのように、内容の役割に合ったタグを使います。
<h1>はじめてのWebページ</h1>
<p>HTMLで文章の役割を伝えます。</p>
<a href="about.html">詳しい紹介を見る</a>タグは、単に文字を大きくしたり青くしたりするための記号ではありません。ブラウザや検索エンジン、音声読み上げソフトに「これは見出し」「これはリンク」と意味を伝える役割があります。
CSSは色・余白・配置などの見た目を整える
CSSは「Cascading Style Sheets」の略で、HTMLの見た目を指定するスタイルシート言語です。文字色、背景色、余白、枠線、横並びのレイアウトなどを設定できます。
h1 {
color: #1e3a5f;
}
a {
color: #ffffff;
background-color: #ea580c;
padding: 12px 20px;
}HTMLとCSSで役割を分けると、文章を変えずにデザインだけを調整できます。複数ページで同じCSSを使えば、サイト全体の色や余白もまとめて管理しやすくなります。
| 項目 | HTML | CSS |
|---|---|---|
| 主な役割 | 内容と構造を作る | 見た目と配置を整える |
| 代表的な例 | 見出し、段落、画像、リンク | 色、文字サイズ、余白、レイアウト |
| 基本のファイル名 | index.html | style.css |
| 書き方の単位 | タグや属性 | セレクター、プロパティ、値 |
HTMLタグの種類や属性を先に詳しく確認したい場合は、次の記事が参考になります。
HTML・CSSでできること
HTMLとCSSを組み合わせると、会社や店舗の紹介ページ、ブログ、ポートフォリオ、イベント案内、ランディングページなど、情報を見せるWebページを作れます。
- 見出しや段落を整理し、読みやすい文章構造を作る
- 画像やリンク、表、入力フォームを配置する
- 文字の大きさ、色、背景、余白、枠線を変更する
- FlexboxやGridで要素を横並び・格子状に配置する
- 画面幅に合わせ、スマートフォンでも読みやすく表示する
一方、クリック後に内容を切り替える、入力内容を計算する、サーバーから新しいデータを取得するといった動きにはJavaScriptなどを使います。まずHTMLで内容を作り、CSSで見た目を整えられるようになってからJavaScriptへ進むと、役割の違いを理解しやすいでしょう。
HTML・CSSの学習に必要なもの
HTML・CSSの練習に特別な機材や有料ソフトは必要ありません。パソコン、コードを書くテキストエディタ、表示を確認するWebブラウザがあれば始められます。
| 必要なもの | 役割 | 初心者向けの考え方 |
|---|---|---|
| パソコン | ファイルを作成・保存する | WindowsでもMacでも学習できる |
| テキストエディタ | HTMLとCSSを書く | コードの色分けや入力補助があるものを選ぶ |
| Webブラウザ | 完成したページを表示する | 普段使っているChrome、Edge、Safariなどでよい |
| 作業用フォルダー | HTML・CSS・画像をまとめる | 最初は2つのファイルを同じ場所へ置く |
メモ帳のようなアプリでもHTMLは書けますが、コード向けのエディタを使うとタグの閉じ忘れや入力ミスに気付きやすくなります。まだ用意していない方は、次の記事で選び方と基本操作を確認してください。
HTMLとCSSで最初のWebページを作る手順
ここからは、自己紹介カードを作りながらHTMLとCSSのつながりを確認します。変更前のHTMLを表示し、CSSを読み込むコードと装飾を追加した後、表示の変化を確かめます。
作業用フォルダーとファイルを作る
デスクトップなど分かりやすい場所にhtml-css-practiceフォルダーを作ります。その中へindex.htmlとstyle.cssという2つのファイルを保存してください。
html-css-practice/
├── index.html
└── style.cssファイル名と拡張子は半角英数字で入力します。index.html.txtのように末尾へ.txtが付くとHTMLファイルとして扱われないため、保存時に確認しましょう。
変更前のHTMLを書く
最初にindex.htmlへ次のコードを書きます。この段階ではCSSを読み込んでいないため、ブラウザ標準の見た目で表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML・CSSの練習</title>
</head>
<body>
<main class="card">
<p class="eyebrow">HTML・CSS入門</p>
<h1>はじめてのWebページ</h1>
<p>HTMLで内容を作り、CSSで見た目を整えます。</p>
<a class="button" href="#learn">学習内容を見る</a>
</main>
</body>
</html>head要素にはページの設定、body要素には画面へ表示する内容を書きます。class属性は、あとでCSSから特定の要素を選ぶための名前です。
meta name="viewport"は、スマートフォンの画面幅に合わせて表示するための設定です。初心者向けのサンプルでも省略せず、最初から入れておくとよいでしょう。
HTMLファイルをブラウザで開く
index.htmlを保存し、ファイルをダブルクリックしてブラウザで開きます。「はじめてのWebページ」という見出しや文章、リンクが表示されれば、HTMLは読み込まれています。
エディタで内容を変更したらファイルを保存し、ブラウザを再読み込みします。開き方が分からない場合やコードがそのまま文字で表示される場合は、次の記事で確認できます。
HTMLからCSSを読み込む
次に、head要素内のtitle要素の下へlink要素を追加します。これが、HTMLと同じフォルダーにあるstyle.cssを読み込む指定です。
<title>HTML・CSSの練習</title>
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルがスタイルシートであること、href="style.css"はファイルの場所を表します。今回は2つのファイルが同じフォルダーにあるため、ファイル名だけで指定できます。
CSSの読み込み方やパスの違いを詳しく知りたい方は、次の記事もあわせて確認してください。
style.cssへデザインを書く
style.cssへ次のコードを書きます。ページ全体の背景を整え、HTMLでclass="card"を付けた範囲をカードのように表示するCSSです。
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
color: #1f2937;
background-color: #eff6ff;
font-family: sans-serif;
}
.card {
width: min(100%, 560px);
padding: 40px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 16px 40px rgba(30, 58, 95, 0.14);
}
.eyebrow {
color: #2563eb;
font-weight: 700;
}
h1 {
margin-top: 8px;
color: #1e3a5f;
}
.button {
display: inline-block;
margin-top: 16px;
padding: 12px 20px;
color: #ffffff;
background-color: #ea580c;
border-radius: 8px;
text-decoration: none;
}
.button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}bodyやh1は同じ名前のHTML要素を選び、.cardや.buttonは対応するclass名を持つ要素を選びます。classをCSSで指定するときは、名前の先頭に半角のピリオドを付ける点が重要です。
変更後の表示を確認する
index.htmlとstyle.cssを保存し、ブラウザを再読み込みします。背景色、カードの余白、見出しの色、オレンジ色のリンクが表示されれば成功です。
HTMLの内容は同じでも、CSSを追加すると見た目が大きく変わります。CSSの色やpaddingの数値を変更し、保存と再読み込みを繰り返すと、それぞれの指定がどこへ反映されるか理解しやすくなります。
HTMLの基本構文
HTMLでは、多くの要素を開始タグと終了タグで囲みます。終了タグには要素名の前へ半角のスラッシュ（/）を付けます。
<p>ここが段落の内容です。</p><p>が開始タグ、</p>が終了タグ、その間が内容です。開始タグから終了タグまでを含めた全体をHTML要素と呼びます。
属性は要素へ追加情報を与える
属性は開始タグの中へ書き、要素に追加情報を与えます。たとえば、a要素のhref属性はリンク先を指定します。
<a href="about.html">詳しい紹介を見る</a>属性名、半角のイコール、ダブルクォーテーションで囲んだ値の順に書きます。画像を表示するimg要素では、画像の場所を表すsrc属性と、内容を文章で伝えるalt属性を使います。
意味に合ったタグを選ぶ
見た目だけを基準にタグを選ばず、内容の役割に合わせます。ページの大見出しにはh1、章の見出しにはh2、段落にはp、主要な内容にはmainを使うのが基本です。
| タグ | 役割 |
|---|---|
h1〜h6 | 見出しの階層を示す |
p | 文章の段落を作る |
a | 別の場所へ移動するリンクを作る |
img | 画像を表示する |
ul・ol・li | 箇条書きや番号付きリストを作る |
header・main・footer | ページの大きな領域を示す |
CSSの基本構文
CSSは「どのHTML要素の、何を、どう変えるか」を指定します。基本形は、セレクター、プロパティ、値の3つです。
セレクター {
プロパティ: 値;
}| 部分 | 役割 | 例 |
|---|---|---|
| セレクター | CSSを適用する対象を選ぶ | .button |
| プロパティ | 変更する項目を指定する | background-color |
| 値 | 具体的な設定内容を書く | #ea580c |
プロパティの後ろには半角のコロン（:）、宣言の終わりには半角のセミコロン（;）を書きます。波括弧の中には複数の宣言を並べられます。
.button {
color: #ffffff;
background-color: #ea580c;
padding: 12px 20px;
}CSSの書き方、セレクターの種類、外部ファイルへ書く方法をさらに練習したい方は、次の記事へ進んでください。
初心者におすすめのHTML・CSS学習順序
HTMLとCSSは、片方を完全に終えてからもう片方へ進むより、小さなページで両方を行き来しながら学ぶ方が役割の違いを理解しやすくなります。次の順序を目安にしてください。
- HTMLで見出し、段落、リンク、画像、リストを作る
- CSSで文字、色、背景、余白、枠線を変更する
- classを使い、必要な要素へCSSを適用する
- ボックスモデル、Flexbox、Gridで配置を整える
- 画面幅に合わせるレスポンシブデザインを学ぶ
- 小さな完成ページを自分で作り、分からない点を調べる
最初の目標は「タグやプロパティを全部覚える」ではなく、「調べながら1ページを完成させる」にします。完成したら文章、配色、余白を自分で変更し、同じコードを少しずつ作り替えてみましょう。
オンライン教材で基礎を体験する
Progateのような対話型のオンライン教材は、説明を読みながらブラウザ上でコードを書けるため、最初の体験に向いています。無料で試せる範囲から始め、自分に合うか確認してから必要な教材を選びましょう。
教材の手順だけで正解できても、自分のパソコンでファイルを作ると迷うことがあります。オンライン教材で基礎を学んだら、この記事のようにindex.htmlとstyle.cssを自分で作る練習へ移ることが大切です。
公式ドキュメントで調べる習慣を付ける
HTMLタグやCSSプロパティを忘れるのは普通です。MDN Web Docsなどの信頼できるドキュメントで、意味、使い方、使用例を確認する習慣を付けましょう。
検索するときは「CSS 文字色」「HTML 画像 表示」のように、技術名とやりたいことを組み合わせます。エラーが表示されないHTML・CSSでは、コードの一部を小さく変更し、表示結果を比べることも重要です。
小さなWebページを繰り返し作る
学習サービス、動画、本は理解の助けになりますが、見るだけでは書けるようになりません。自己紹介カード、カフェのメニュー、イベント案内など、内容が少ないページを最後まで作ってみてください。
見本と同じにする練習では、最初から完璧を目指さなくても構いません。大きな見出し、横並びの部分、余白など、ページを構成する単位に分けて順番に再現すると進めやすくなります。
HTML・CSS学習で初心者がつまずきやすい点
CSSが反映されない
CSSが反映されないときは、難しい原因を探す前にファイル名、保存場所、link要素を確認します。今回の例では、index.htmlとstyle.cssを同じフォルダーへ置き、href="style.css"と書きます。
- HTMLとCSSの変更を保存したか
style.cssのつづりと大文字・小文字が一致しているかlink要素をhead要素内へ書いたか- class名とCSSのセレクター名が一致しているか
- CSSの波括弧、コロン、セミコロンが半角になっているか
- ブラウザを再読み込みしたか
すべてを暗記しようとする
HTMLタグやCSSプロパティは多いため、一覧を丸暗記しようとすると学習が進みにくくなります。よく使うものは作業の中で自然に覚え、使い方を忘れたらその都度調べれば問題ありません。
教材のコードを写すだけで終わる
コードを写した後に、文字、色、余白、class名のいずれかを変更してみましょう。変更した場所と表示結果が結び付くと、別のページでも同じ知識を使えるようになります。
最初から大きなサイトを作ろうとする
ページ数が多いサイトや複雑な模写は、画像、レイアウト、レスポンシブ対応など複数の課題が同時に発生します。まず1枚のカードや1ページの紹介サイトを完成させ、できることを少しずつ増やしてください。
HTML・CSS入門でよくある疑問
HTMLとCSSはプログラミング言語ですか？
一般に、HTMLは文書を構造化するマークアップ言語、CSSは見た目を指定するスタイルシート言語です。計算や条件分岐などの処理を書くJavaScriptとは役割が異なります。
ただし、Web制作の現場ではHTML・CSSをまとめて「コーディング」と呼ぶことがあります。名称に迷うより、HTMLは構造、CSSは見た目という違いを理解することが大切です。
HTMLとCSSはどちらから学べばよいですか？
最初にHTMLで見出しや段落を作り、その直後にCSSで色や余白を付ける順序がおすすめです。HTMLだけを長期間学んでからCSSへ進むのではなく、小さな単位で交互に試すと違いが分かります。
スマートフォンだけでも学べますか？
学習アプリや動画で基礎を知ることはできますが、ファイル管理や複数画面での表示確認はパソコンの方が進めやすいです。スマートフォンは予習や復習に使い、コードを書く練習はパソコンで行うとよいでしょう。
どのくらいでWebページを作れますか？
学習時間や目標によって異なりますが、この記事のような1ページは基本構文を確認しながらでも作れます。期間だけを目標にせず、「HTMLで構造を作る」「CSSを読み込む」「画面幅に合わせる」のように、できることを一つずつ増やしましょう。
まとめ
HTMLはWebページの内容と構造を作り、CSSは色、余白、配置などの見た目を整えます。index.htmlとstyle.cssを用意し、HTMLのhead要素からCSSを読み込むと、2つを組み合わせられます。
最初からタグやプロパティをすべて覚える必要はありません。まずは今回のサンプルを表示し、文章、配色、余白を自分で変更してみてください。小さなページを完成させる経験が、HTML・CSSを身に付ける一番の近道です。