HTMLとCSSを学び始めると、タグ、属性、セレクター、プロパティなど、多くの用語が一度に登場します。「何がHTMLで、どこからCSSなの？」と混乱していませんか。
HTMLはWebページの内容と構造を作り、CSSは色・余白・配置などの見た目を整えます。最初にこの役割分担と基本構文を理解すると、新しいタグやプロパティも整理しやすくなります。
この記事では、HTML・CSSの基礎として、ファイルの作り方、基本構文、セマンティックなページ構造、CSSの適用方法、ボックスモデル、レイアウト、レスポンシブ対応までを初心者向けに解説します。
HTMLとCSSは役割を分けてWebページを作る
| 項目 | HTML | CSS |
|---|---|---|
| 主な役割 | 内容と構造を作る | 見た目と配置を整える |
| 代表例 | 見出し、文章、画像、リンク | 色、文字、余白、枠線、レイアウト |
| 基本ファイル | index.html | style.css |
| 書き方の単位 | 要素、タグ、属性 | セレクター、プロパティ、値 |
HTMLとCSSは一般的なプログラミング言語とは役割が異なります。HTMLはマークアップ言語、CSSはスタイルシート言語です。Webページ制作では、この2つを組み合わせて使います。
実際に最初のWebページを作りながら違いを確認したい場合は、次の記事を先に開いてください。
HTMLの基礎構文
HTML要素・タグ・属性の違い
HTMLでは、内容を開始タグと終了タグで囲みます。開始タグから終了タグまでの全体をHTML要素と呼びます。
<p>HTMLの基礎を学びます。</p><p>が開始タグ、</p>が終了タグです。間の文章を含めた全体がp要素で、段落を表します。
属性は、要素へ追加情報を設定する書き方です。次のhref属性はリンク先、lang属性は言語を表します。
<html lang="ja">
<a href="about.html">プロフィールを見る</a>属性名と値の間には=を書き、値を引用符で囲みます。タグの種類と属性を詳しく確認したい場合は、次の記事も参考にしてください。
HTML文書の基本構造
テキストエディタでindex.htmlを作り、次の基本構造を書きます。ファイルはUTF-8で保存してください。
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML・CSSの基礎</h1>
<p>基本構文から学びます。</p>
</body>
</html>| コード | 役割 |
|---|---|
<!doctype html> | HTML文書であることを宣言する |
<html lang="ja"> | 文書全体と主な言語を示す |
<head> | 文字コード、タイトル、CSSなどの設定を入れる |
<body> | ブラウザへ表示する内容を入れる |
meta charset | 文字コードをUTF-8に指定する |
meta name="viewport" | スマートフォンの画面幅に合わせる |
内容の意味に合うHTML要素を使う
画面の区切りをすべてdiv要素で作るのではなく、内容の役割に合う要素を選びます。この考え方をセマンティックHTMLと呼びます。
<header>
<nav aria-label="メインメニュー">...</nav>
</header>
<main>
<article>
<h1>記事タイトル</h1>
<p>記事の本文です。</p>
</article>
</main>
<footer>...</footer>header、nav、main、article、footerなどを使うと、ページ構造をブラウザ、検索エンジン、支援技術へ伝えやすくなります。
CSSの基礎構文
セレクター・プロパティ・値を書く
CSSは「どのHTML要素へ」「何を」「どの値にするか」を指定します。
h1 {
color: #1d4ed8;
font-size: 2rem;
}h1：装飾するHTML要素を選ぶセレクターcolor、font-size：変更する項目を表すプロパティ#1d4ed8、2rem：プロパティへ設定する値
プロパティと値の間にはコロン、指定の末尾にはセミコロンを書きます。複数の指定は波括弧の中へ並べます。
外部CSSファイルを読み込む
CSSはHTMLのstyle属性やstyle要素にも書けますが、基本はstyle.cssのような外部ファイルへ分けます。HTMLのhead要素内から読み込んでください。
<link rel="stylesheet" href="style.css">HTMLとCSSが同じフォルダーにある場合は、href="style.css"と書けます。反映されないときは、ファイル名、拡張子、保存場所、保存済みかを確認します。
要素セレクターとクラスセレクターを使い分ける
すべての同じ要素へ共通の見た目を適用するときは要素セレクター、特定の役割だけを選ぶときはクラスセレクターを使います。
<p>通常の説明文です。</p>
<p class="notice">保存してから再読み込みしてください。</p>p {
line-height: 1.8;
}
.notice {
padding: 16px;
background-color: #fef3c7;
border-left: 4px solid #f59e0b;
}クラス名の前にはピリオドを書きます。HTMLのclassを複数ページで再利用すると、同じ役割の見た目をそろえられます。
CSSのボックスモデルを理解する
HTML要素は、内容、内側の余白、枠線、外側の余白を持つ箱として配置されます。これがボックスモデルです。
| 部分 | CSS | 役割 |
|---|---|---|
| 内容 | width、height | 文章や画像が入る領域 |
| 内側の余白 | padding | 内容と枠線の間を空ける |
| 枠線 | border | 要素の境界を表示する |
| 外側の余白 | margin | 他の要素との間を空ける |
* {
box-sizing: border-box;
}
.card {
width: min(100%, 480px);
margin: 24px auto;
padding: 24px;
border: 1px solid #cbd5e1;
}box-sizing: border-boxを指定すると、設定した幅にpaddingとborderが含まれます。要素が想定より大きくなる問題を減らせるため、基礎段階から使い方を理解しておきましょう。
Flexbox・Gridでレイアウトする
要素を横や縦に並べるときは、FlexboxまたはGridを使います。古い記事で紹介されるfloatは文章へ画像を回り込ませる用途が中心で、ページ全体のレイアウトにはFlexboxやGridが適しています。
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}このコードは、cardsの中を3列に分け、要素の間を24px空けます。横一列のナビゲーションや中央揃えにはFlexbox、行と列を同時に扱うカード一覧にはGridが使いやすいでしょう。
スマートフォンに対応する
画面幅に応じて見た目を変える設計をレスポンシブWebデザインと呼びます。HTMLへviewportを設定し、CSSで柔軟な幅とメディアクエリを使います。
img {
max-width: 100%;
height: auto;
}
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
}
}画像は親要素より大きくならないようにし、画面幅が640px以下ではカードを1列へ変更しています。固定幅だけで作らず、ブラウザの幅を変えながら表示を確認してください。
HTML・CSSの基礎で確認するアクセシビリティ
- ページの主な言語を
lang属性で指定する - 見出しレベルを内容の階層に合わせる
- 画像へ目的に合う
alt属性を設定する - リンクの文字だけで移動先が分かるようにする
- フォーム部品と
labelを関連付ける - キーボード操作時のフォーカスを消さない
- 文字と背景のコントラストを確保する
アクセシビリティは完成後に追加する装飾ではありません。意味のあるHTML構造と、操作状態が分かるCSSを基礎から使うことで、多様な閲覧・操作環境へ対応しやすくなります。
基礎を身に付ける練習方法
- 基本コードを自分で入力する
- 保存してブラウザで変更前を確認する
- HTML要素またはCSSを1つ追加する
- 再読み込みして変更後を確認する
- どのコードで何が変わったか説明する
- 自己紹介など小さな1ページへ組み合わせる
基礎知識を個別に覚えるだけでなく、1つのページで使ってください。練習テーマは次の記事から選べます。
HTMLとCSSの仕様や要素を調べる場合は、MDNのHTMLによるコンテンツの構造化とCSSによるスタイル設定の基本も参考になります。
HTML・CSSの基礎によくある疑問
タグやプロパティをすべて暗記しますか？
すべてを暗記する必要はありません。見出し、段落、リンク、画像、リスト、色、余白など、よく使うものから始め、制作中に必要な指定を調べてください。
CSSが反映されないときは何を確認しますか？
ファイルを保存したか、link要素のパスが正しいか、セレクターがHTMLと一致するか、波括弧やセミコロンが抜けていないかを確認します。直前の変更を戻し、原因を1つずつ絞ってください。
HTMLとCSSだけでWebサイトを作れますか？
文章や画像を見せる静的なWebサイトは作れます。クリックで内容を切り替える処理にはJavaScript、管理画面から記事を更新する仕組みにはWordPressなど、目的に応じて別の技術を組み合わせます。
まとめ
HTMLはWebページの内容と構造を作り、CSSは色、余白、枠線、配置などの見た目を整えます。HTML要素・タグ・属性、CSSのセレクター・プロパティ・値という基本構文から始めてください。
基本構文を確認したら、セマンティックHTML、外部CSS、ボックスモデル、Flexbox・Grid、レスポンシブ対応を1つのページで試します。コードを追加するたびに変更前後をブラウザで見比べることが、基礎を理解する近道です。