Web制作について調べると、最初に「HTML」と「CSS」という言葉が出てきます。「2つは何が違うの？」「どちらから勉強すればよいの？」と迷う方も多いのではないでしょうか。
HTMLとCSSとは、Webページを作るための基本技術です。HTMLはページの内容と構造を作り、CSSは色・余白・配置などの見た目を整えます。
この記事では、HTMLとCSSの意味や違いから、2つのファイルを連携させて小さなWebページを作る手順まで、初心者向けに解説します。実際のコードと表示結果を見比べながら、役割を理解していきましょう。
HTMLとCSSの違いを一覧で確認
HTMLとCSSはどちらもWebページに欠かせませんが、担当する役割は異なります。まずは違いを一覧で確認しましょう。
| 比較項目 | HTML | CSS |
|---|---|---|
| 主な役割 | 内容と構造を作る | 見た目を整える |
| 指定するもの | 見出し、文章、画像、リンクなど | 色、文字サイズ、余白、配置など |
| 言語の種類 | マークアップ言語 | スタイルシート言語 |
| 主な拡張子 | .html | .css |
| 基本的な書き方 | タグで内容に意味を付ける | セレクター・プロパティ・値を指定する |
家にたとえるなら、HTMLは柱や部屋を組み立てる設計、CSSは壁の色や家具の配置を整える作業です。役割を分けることで、ページの内容を保ったままデザインだけを変更しやすくなります。
HTMLとはWebページの内容と構造を作る言語
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。文章や画像に「これは見出し」「これは段落」「これはリンク」という役割を与え、ページの構造をブラウザへ伝えます。
HTMLでは、山かっこで囲まれた「タグ」を使います。たとえば、h1要素はページの中心となる見出し、p要素は文章の段落を表します。
<h1>HTMLとCSSの学習メモ</h1>
<p>Webページ作りの基本を学びます。</p>
<a href="https://example.com">参考ページを見る</a>タグは見た目を大きくするためだけの記号ではありません。内容に合うタグを選ぶと、ブラウザ、検索エンジン、スクリーンリーダーなどがページの意味を理解しやすくなります。
HTMLファイルの基本構造
HTMLファイルは、ページの情報を書くhead要素と、画面に表示する内容を書くbody要素で構成します。最小限の基本構造は次のとおりです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<h1>ページの見出し</h1>
<p>ここに本文を書きます。</p>
</body>
</html><!doctype html>は、現代のHTML文書であることをブラウザへ伝える文書型宣言です。charset="UTF-8"は文字コード、viewportはスマートフォンなどの画面幅に合わせて表示するための設定です。
見出し、段落、画像、リンクなど、HTMLタグの種類と使い分けを詳しく知りたい方は、次の記事も参考にしてください。
CSSとはHTMLの見た目を整える言語
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。HTMLで作った内容に対し、文字色、背景色、余白、枠線、横並びなどの見た目を指定します。
CSSを何も書かなくても、見出しが大きくなり、リンクが青色になることがあります。これはHTMLがデザインを指定しているのではなく、ブラウザが持つ初期スタイルによる表示です。
CSSの基本構文
CSSは「どの要素を」「何を」「どのように変えるか」の順で考えると理解しやすくなります。基本構文は次のとおりです。
h1 {
color: #2563eb;
font-size: 32px;
}| 名称 | 例 | 役割 |
|---|---|---|
| セレクター | h1 | CSSを適用する対象を選ぶ |
| プロパティ | color | 変更する項目を決める |
| 値 | #2563eb | 具体的な色や大きさを指定する |
この例では、すべてのh1要素を選び、文字色を青、文字サイズを32ピクセルにしています。プロパティと値の間にはコロン、指定の末尾にはセミコロンを書きます。
CSSでできることや基本構文をさらに詳しく確認したい方は、次の記事でセレクター、プロパティ、値の関係を解説しています。
HTMLとCSSが連携して表示される仕組み
HTMLとCSSを別ファイルで作っただけでは、ブラウザは2つの関係を判断できません。HTMLのhead要素へlink要素を書き、読み込むCSSファイルの場所を指定します。
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルがスタイルシートであること、href="style.css"はファイルの場所を表します。index.htmlとstyle.cssを同じフォルダへ置く場合は、この指定で読み込めます。
- ブラウザがHTMLを読み、見出しや段落などの構造を組み立てる
- HTMLから参照されているCSSを読み込む
- CSSのセレクターに一致するHTML要素へスタイルを適用する
- 内容と見た目を合わせて画面に表示する
外部CSSの読み込み方や、CSSが反映されない場合の確認ポイントは、次の記事でファイル構成から確認できます。
HTMLとCSSでWebページを作る手順
ここからは、学習メモを表示する小さなWebページを作ります。変更前のHTMLへCSSを追加し、ブラウザの表示がどのように変わるか確かめましょう。
index.htmlとstyle.cssを用意する
作業用フォルダを1つ作り、その中へindex.htmlとstyle.cssを保存します。ファイル名と拡張子は半角英数字で入力してください。
html-css-practice/
├── index.html
└── style.css変更前のHTMLを書く
まずはindex.htmlへ、見出しと3つの学習項目を書きます。この時点では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>
<h1>HTMLとCSSの学習メモ</h1>
<div class="notes">
<section class="note">
<h2>HTML</h2>
<p>ページの内容と構造を作ります。</p>
</section>
<section class="note">
<h2>CSS</h2>
<p>色や余白などの見た目を整えます。</p>
</section>
<section class="note">
<h2>次の目標</h2>
<p>自分で1ページ作ってみます。</p>
</section>
</div>
</main>
</body>
</html>HTMLにはclass="notes"とclass="note"を付けています。classはCSSから必要な要素を選ぶための名前で、画面には表示されません。
HTMLへCSSの読み込みを追加する
index.htmlのhead要素内へ、次の1行を追加します。title要素の直後へ書くと見つけやすいでしょう。
<title>HTMLとCSSの学習メモ</title>
<link rel="stylesheet" href="style.css">style.cssへデザインを書く
次にstyle.cssへ、ページ全体と学習項目のデザインを書きます。文字色、背景色、余白、カードの並びを指定します。
/* すべての要素で幅の計算方法を揃える */
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #1e293b;
background-color: #f1f5f9;
font-family: sans-serif;
}
main {
width: min(960px, calc(100% - 32px));
margin: 0 auto;
padding: 64px 0;
}
h1 {
color: #1d4ed8;
text-align: center;
}
.notes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
margin-top: 32px;
}
.note {
padding: 24px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}
.note h2 {
margin-top: 0;
color: #2563eb;
}grid-template-columnsのauto-fitとminmax()により、画面幅に合わせてカードの列数が変わります。狭い画面では1列になり、スマートフォンでも内容が読みやすくなります。
変更後の表示を確認する
2つのファイルを保存し、index.htmlをブラウザで開きます。同じHTMLでも、CSSを読み込むと色、余白、背景、カードの配置が変わります。
HTMLの文章や見出しは変えていません。内容と構造はHTML、見た目はCSSという役割分担が、この変更前後から分かります。
HTMLファイルをブラウザで開く操作に迷った場合は、次の記事で2つの表示方法を画面付きで確認できます。
HTMLとCSSでできること・できないこと
HTMLとCSSだけでも、情報を掲載するWebページやレスポンシブなレイアウトを作れます。一方、入力内容の計算やデータベースとの通信など、処理が必要な機能は別の技術が担当します。
| 実現したいこと | 主に使う技術 |
|---|---|
| 見出し、文章、画像、リンクを表示する | HTML |
| 色、余白、配置、スマホ表示を整える | CSS |
| ボタン操作で表示を切り替える | JavaScript |
| フォームの内容をサーバーへ送って処理する | PHPなどのサーバー側言語 |
| 記事や会員情報を保存する | サーバー側言語とデータベース |
最初からすべてを同時に覚える必要はありません。HTMLとCSSで1ページを作れるようになってから、必要に応じてJavaScriptやPHPへ進むと、それぞれの役割を整理しやすくなります。
HTML・CSS・PHPがどのように連携するかは、次の記事で静的なページと動的なページを比較しながら解説しています。
HTMLとCSSはプログラミング言語なのか
厳密には、HTMLはマークアップ言語、CSSはスタイルシート言語です。計算、条件分岐、繰り返しなどの手順を記述する一般的なプログラミング言語とは役割が異なります。
ただし、Web制作の学習や仕事では、HTMLとCSSを書く作業も含めて「コーディング」と呼ばれます。「プログラミング言語ではないから学ばなくてよい」という意味ではなく、Webページの土台を作るために必要な技術です。
HTMLがプログラミング言語に分類されない理由を詳しく知りたい方は、次の記事も参考にしてください。
HTMLとCSSを学ぶ順番
HTMLとCSSは別々に暗記するより、小さなページを作りながら交互に使うと理解しやすくなります。初心者は次の順番を目安にしてください。
- HTMLの基本構造を用意する
- 見出し、段落、リンク、画像、リストを使う
- CSSで文字色、背景色、余白、枠線を変える
- FlexboxやGridで要素を配置する
- 画面幅に合わせたレスポンシブ表示を試す
- 必要に応じてJavaScriptへ進む
HTMLで内容を作ったら、すぐにブラウザで表示を確認します。次にCSSを1つ追加し、「どの指定で、どこが変わったか」を見比べることが大切です。
独学の進め方や練習方法を知りたい方は、次の記事で学習の流れを確認できます。
HTMLとCSSを始めるために必要なもの
基本のHTMLとCSSを試すために、高価なソフトは必要ありません。コードを書くテキストエディタと、結果を表示するWebブラウザがあれば始められます。
- テキストエディタ：HTMLやCSSを書いて保存する
- Webブラウザ：作ったページを表示して確認する
- 作業用フォルダ：HTML、CSS、画像をまとめる
エディタは、タグの入力補完や色分けがあるものを選ぶと、記述ミスに気づきやすくなります。初心者向けの選び方と使い方は、次の記事で確認してください。
HTMLとCSSでよくある疑問
HTMLだけでもWebページを作れますか？
HTMLだけでも、見出し、文章、画像、リンクを持つWebページは作れます。ただし、表示には主にブラウザの初期スタイルが使われるため、色や余白、レイアウトを細かく整えるにはCSSが必要です。
CSSだけでWebページを作れますか？
通常のWebページでは、CSSだけで見出しや文章の内容は作れません。CSSは、HTMLで作られた要素を選び、その見た目を整えるために使います。
HTMLとCSSはすべて暗記する必要がありますか？
すべてのタグやプロパティを暗記する必要はありません。見出し、段落、リンク、画像、色、余白など、よく使うものから試し、必要な指定をその都度調べる方法で十分です。
HTMLとCSSだけでスマートフォンに対応できますか？
対応できます。HTMLへviewportを設定し、CSSの柔軟な幅、Flexbox、Grid、メディアクエリなどを使うと、画面幅に合わせて読みやすいレイアウトへ変更できます。
まとめ
HTMLとCSSとは、Webページを作るための基本技術です。HTMLは見出し、文章、画像、リンクなどの内容と構造を作り、CSSは色、文字サイズ、余白、配置などの見た目を整えます。
まずはindex.htmlとstyle.cssを同じフォルダへ作り、この記事のコードをコピーしてブラウザで開いてみてください。CSSの色や余白を1つずつ変えると、HTMLとCSSの役割の違いを実感しながら学べます。