HTML/CSSの基本
この章では、HTML/CSSの基本について学び、ハンズオン形式で学習します。これにより、HTMLの構造・CSSの基本文法・ボックスモデル・Flexbox/Grid・レスポンシブデザインなど、Web画面を作る基本が身につきます。
1. 本章の概要
1.1 本章の目的
Webアプリケーションのフロントエンドは、HTMLとCSSで画面の骨格と見た目を作ることから始まります。JavaScriptやNext.jsのハンズオンに入る前に、要素の意味とCSSの効き方を押さえておくと、後続章の実装で「なぜこう書くのか」を迷わずに判断できるようになります。
| 💡 ポイント |
|---|
| HTML/CSSは仕様として非常に幅広く、書籍1冊分の分量で解説されるほどの領域です。本章ではその中からWebアプリケーション開発に必要な部分に絞って抜粋して紹介します。装飾・タイポグラフィ・アニメーションなどWebデザインを目的とした学習にはボリュームが足りないため、その用途では専用の書籍や教材と併用するとよいです。 |
1.2 ハンズオンの流れ
シンプルなHTMLファイルを1枚用意し、そこにCSSを段階的に足していく形で進めます。前半はHTMLの構造（要素・タグ・属性）と主要タグ、後半はCSSの基本文法（セレクタ・プロパティ）・ボックスモデル・Flexbox／Gridによるレイアウト・レスポンシブデザインの基本を、ブラウザで表示を確認しながら順に扱います。
1.3 事前準備
前提となる講座
この章では、以下の知識を前提としています。自信がない場合は先に関連講座を実施してみましょう。
| 講座名 | 必要な知識 |
|---|---|
| Webアプリケーションの基本 | HTTPリクエストとレスポンスの仕組み、ブラウザがHTMLを受け取って画面に表示する流れ |
2. HTML
2.1 動作確認用ページの準備
本章では、サンプルコードを実際にブラウザで動かして結果を確認しながら進めます。まずは作業用のフォルダと index.html を1枚用意します（style.css は後の「CSS」で扱うタイミングで追加します）。
任意の場所に frontend-html-css フォルダを作成し、Visual Studio Code の「ファイル」→「フォルダーを開く」から開きます。フォルダ内に index.html を作成します。
frontend-html-css/
└── index.html ← このファイルを作成
index.html に以下の内容を保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
</body>
</html>
保存できたら、Finder（Mac）またはエクスプローラー（Windows）から index.html をダブルクリックします。既定のブラウザで index.html が開き、以下のように「HTML/CSS学習用ページ」の大きな見出しだけが表示されていれば準備完了です。
以降のセクションでは、この index.html の <body> の中身を書き換えて保存し、ブラウザを再読み込み（Cmd + R または Ctrl + R）することで、変更がどう画面に反映されるかを確認しながら進めます。
2.2 HTMLとは
HTML（HyperText Markup Language）は、Webページの構造を記述するためのマークアップ言語です。ブラウザに「ここが見出し」「ここが段落」「ここがリスト」といった意味を伝えるために使用します。
Webページは大きく分けて3つの技術で構成されます。それぞれの役割を以下に示します。
| 技術 | 役割 |
|---|---|
| HTML | ページの構造を定義する（見出し・段落・リスト・フォームなど） |
| CSS | ページの見た目を定義する（色・レイアウト・余白・フォントなど） |
| JavaScript | ページの動きを定義する（クリックへの反応・データの取得・DOM操作など） |
この章ではHTMLとCSSを扱い、JavaScriptについては次の章JavaScriptの基本文法で扱います。
2.3 基本構文の解説
セットアップで作った index.html は、以下のような内容でした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
</body>
</html>
HTMLファイルには、ブラウザが正しく解釈するための決まった基本構文があります。ここではこの index.html を題材に、基本構文を構成する各要素の役割を順に見ていきます。以降のセクションでは、段落・リンク・画像などの要素ごとに index.html を書き換えて、それぞれの表示を確認していきます。
<!DOCTYPE html>
<!DOCTYPE html>
ファイルの1行目に記述する文書型宣言です。ブラウザに「このファイルはHTML（HTML5）である」と伝える役割を持ちます。この宣言がないと、ブラウザは古い互換モードで動作してしまい、意図しないレイアウト崩れが起こることがあります。
<html> 要素
<html lang="ja">
HTML文書全体を囲むルート要素です。lang属性でページの言語を指定します。日本語のページであればlang="ja"を指定します。この情報はスクリーンリーダーによる読み上げ言語の判定や、検索エンジンによるインデックス処理に使われます。
<head> 要素
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
ページのメタ情報を記述する領域です。ここに書いた内容はブラウザの画面には直接表示されず、ページの設定情報として扱われます。主に以下の要素を配置します。
<meta charset="UTF-8">は、ページで使用する文字コードを指定します。日本語を含むページではUTF-8を指定するのが標準です。この指定がないと、日本語が文字化けする原因になります。
<title>は、ブラウザのタブに表示されるページタイトルを指定します。検索結果に表示されるタイトルとしても使われるため、ページの内容を端的に表す文字列を設定します。
このほか、スマートフォンでの表示を制御する <meta name="viewport" ...>（詳細は「レスポンシブデザイン」で扱います）や、外部CSSファイルを読み込む <link rel="stylesheet" href="...">（詳細は「CSSファイルの用意」で扱います）も、必要に応じてこの <head> の中に配置します。
<body> 要素
<body>
<h1>HTML/CSS学習用ページ</h1>
</body>
ブラウザの画面に実際に表示される内容を記述する領域です。見出し・段落・画像・フォームなど、利用者が目にする要素はすべてこの中に配置します。現時点では <h1> の見出し1つだけを配置しており、ブラウザには「HTML/CSS学習用ページ」の大きな見出しが表示されている状態です。
| 📝 インデントとフォーマッタ |
|---|
| HTMLはインデントの有無で動作が変わることはありませんが、要素の入れ子構造を目視で追いやすくするため、通常は2スペースまたは4スペースでインデントを揃えます。VS CodeのPrettierやFormatterを使うと、保存時に自動で整形できます。 |
2.4 要素・タグ・属性
HTMLは要素（element）の組み合わせで文書を作ります。1つの要素は、開始タグ・内容・終了タグの3つで構成されます。
<h1>HTML/CSS学習用ページ</h1>
<h1> が開始タグ、</h1> が終了タグ、その間の「HTML/CSS学習用ページ」が内容にあたります。開始タグの h1 の部分をタグ名と呼び、これによりブラウザはその要素が何を表しているのかを判断します。
要素にはさらに属性（attribute）を追加できます。属性は開始タグの中に「キー="値"」の形で書き、要素に対する追加情報を渡す役割を持ちます。属性の具体例は後述の「リンクの追加」で登場します。
また、<img> のように内容を持たず終了タグも書かない空要素（void element）もあります。こちらの具体例は後述の「画像の追加」で登場します。ここでは基本の考え方として「開始タグ・内容・終了タグ・タグ名」の4つを押さえておきます。
2.5 段落の追加
見出しには<h1>から<h6>までの6段階のタグがあり、数字が小さいほど大きい見出しを表します。ここまでで <h1> は登場しているので、次は本文の段落を扱います。段落を表すのが <p>（paragraph）で、本文の文章はこの <p> の中に入れます。書き方は以下のとおりです。
<p>段落の文章</p>
以下は <p> で段落を1つ配置する例です。この内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
<p>この章では HTML と CSS の基本を学びます。</p>
</body>
</html>
保存してブラウザを再読み込みすると、以下のように「HTML/CSS学習用ページ」の見出しの下に「この章では HTML と CSS の基本を学びます。」の段落が表示されます。
コードを解説します。
<p>この章では HTML と CSS の基本を学びます。</p>
<p> は開始タグ（<p>）と終了タグ（</p>）の間に文章を配置します。段落として1つのまとまりを表すため、ブラウザはこの前後に自動で余白を入れて他の要素と区切って描画します。
2.6 リンクの追加
<a> は他のページへのリンクを作る要素で、リンク先を href 属性で指定します。ここで「要素・タグ・属性」で予告した属性（キー="値" の形の追加情報）が具体的に登場します。書き方は以下のとおりです。
<a href="リンク先URL">リンクの文字</a>
以下は <a> を段落中で使う例です。この内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
<p>詳しくは <a href="https://developer.mozilla.org/ja/docs/Web/HTML">MDN の HTML ドキュメント</a> をご覧ください。</p>
</body>
</html>
保存してブラウザを再読み込みすると、以下のように段落が表示され、その中の「MDN の HTML ドキュメント」の部分が青色の下線付きテキスト（リンク）になります。クリックすると、MDN のページに遷移することが確認できます。
コードを解説します。
<a href="https://developer.mozilla.org/ja/docs/Web/HTML">MDN の HTML ドキュメント</a>
href が属性名、"https://developer.mozilla.org/ja/docs/Web/HTML" が属性値です。開始タグの中に「キー="値"」の形で記述し、1つの要素に複数の属性を付けることもできます。
2.7 画像の追加
<img> は画像を表示する要素で、画像ファイルを src 属性、画像が表示できないときの代替テキストを alt 属性で指定します。ここで「要素・タグ・属性」で予告した空要素（内容も終了タグも持たない要素）が具体的に登場します。書き方は以下のとおりです。
<img src="画像ファイルのパス" alt="代替テキスト">
以下は <img> で画像を表示する例です。この内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
<img src="https://placehold.co/200x120?text=Logo" alt="サイトロゴ">
</body>
</html>
保存してブラウザを再読み込みすると、以下のように見出しの下に「Logo」と書かれたプレースホルダー画像が表示されます。
コードを解説します。
<img src="https://placehold.co/200x120?text=Logo" alt="サイトロゴ">
<img> は内容を持たない空要素なので、終了タグ（</img>）を書きません。alt 属性は、画像が表示できない環境やスクリーンリーダーの利用者に対して画像の内容を伝えるための代替テキストです。装飾目的の画像でない限り、必ず記載します。
なお、サンプルで指定している https://placehold.co/200x120?text=Logo は、placehold.co が提供するプレースホルダー画像の URL です。URL パスの 200x120 で「幅×高さ」を、?text=Logo で画像内に表示する文字を指定でき、指定どおりのグレーの画像が返ってきます。手元に画像ファイルを用意せずに <img> の表示を試したいときに便利なサービスです。
手元にある画像ファイルを表示する場合は、index.html と同じフォルダに画像ファイルを配置し、src にそのファイル名を指定します。たとえば logo.png を index.html と同じフォルダに置いた場合は、以下のように書きます。
<img src="logo.png" alt="サイトロゴ">
images/ などのサブフォルダに置いた場合は、<img src="images/logo.png" alt="サイトロゴ"> のように src に相対パスを指定します。
2.8 リストの追加
順序のない箇条書きには <ul>（unordered list）、順序付きの箇条書きには <ol>（ordered list）を使います。それぞれの項目は <li>（list item）で表します。
順序のない箇条書きの書き方は以下のとおりです。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
順序付きの箇条書きは <ul> を <ol> に置き換えて書きます。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
以下は <ul> と <ol> の両方を表示する例です。この内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
<h2>順序のない箇条書き</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>順序付きの箇条書き</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
保存してブラウザを再読み込みすると、以下のように <h1> の下に「順序のない箇条書き」の見出しと「・HTML」「・CSS」「・JavaScript」の箇条書き、続いて「順序付きの箇条書き」の見出しと「1. HTML」「2. CSS」「3. JavaScript」の連番付き箇条書きが縦に並んで表示されます。
コードを解説します。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul> の各項目の先頭には、ブラウザが自動的に「・」を付けて表示します。項目は <li> で表します。
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol> の各項目には、ブラウザが自動的に「1.」「2.」の連番を付けて表示します。項目は <ul> と同じく <li> で表します。
2.9 セクショニング要素の追加
HTML には、ページ全体の構造を表すセクショニング要素が用意されています。単なる <div>（意味を持たない汎用要素）で全体を作るのではなく、これらの要素で領域を明示すると、ページの構造が読み手にも機械にも伝わりやすくなります。書き方は以下のとおりです。
<header>ヘッダ領域の内容</header>
<nav>ナビゲーションの内容</nav>
<main>主要コンテンツ</main>
<article>記事の内容</article>
<footer>フッタ領域の内容</footer>
以下は <header>/<nav>/<main>/<article>/<footer> を組み合わせてページ全体を構造化する例です。この内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
</head>
<body>
<header>
<h1>HTML/CSS学習用ページ</h1>
<nav>
<ul>
<li><a href="#learn">学習内容</a></li>
<li><a href="#reference">参考リンク</a></li>
</ul>
</nav>
</header>
<main>
<article>
<p>この章では HTML と CSS の基本を学びます。</p>
</article>
</main>
<footer>
<p>© 2026 HTML/CSS学習用ページ</p>
</footer>
</body>
</html>
保存してブラウザを再読み込みすると、以下のように上部にタイトルとナビゲーションリンク、中央に段落、下部にコピーライトが縦に並んだページが表示されます。見た目は素の <div> で組んだ場合と変わりませんが、DevTools（F12 キー、または右クリック→「検証」）の Elements タブで確認すると、<header> / <nav> / <main> / <article> / <footer> といったセマンティック要素で骨格が組まれていることが分かります。
コードを解説します。それぞれのセクショニング要素の役割は以下のとおりです。
| 要素 | 役割 |
|---|---|
<header> |
ページや記事の上部にあるヘッダ領域を表す |
<nav> |
ナビゲーションリンクの集まりを表す |
<main> |
ページの主要なコンテンツを表す（1ページに1つ） |
<article> |
それ単体で完結する記事・投稿を表す |
<section> |
章や節など、意味のあるまとまりを表す |
<footer> |
ページや記事の下部にあるフッタ領域を表す |
上のコードでは <header> にページタイトルの見出しとナビゲーション用のリンク集を、<main> の中の <article> にこのページ固有の本文（段落）を、<footer> にコピーライトを配置しています。
| 💡 ポイント |
|---|
セクショニング要素を使っても見た目は<div>と変わりません。それでも使う理由は、要素の意味が明確になることで、検索エンジンによるインデックス、スクリーンリーダーの読み上げ、アクセシビリティツールの解析が正確になるためです。 |
3. CSS
3.1 CSSとは
CSS（Cascading Style Sheets）は、HTMLで作った構造に対して見た目を指定するための言語です。文字の色・サイズ・背景・余白・レイアウトなど、視覚的なスタイルはすべてCSSで指定します。
構造（HTML）と見た目（CSS）を分離することで、同じHTMLに対して複数のデザインを切り替えたり、デザインだけを差し替えたりすることが容易になります。
3.2 CSSファイルの用意
ここから実際に CSS を書いて動かします。以降のセクションでは index.html の中の <h1> などにスタイルを当てていくため、まず index.html をセットアップ時の状態に戻し、あわせて style.css を読み込む <link> タグを <head> に追加します。以下の内容で index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML/CSS学習用ページ</h1>
</body>
</html>
続いて、作業用の frontend-html-css フォルダに style.css を作成します。
frontend-html-css/
├── index.html
└── style.css ← このファイルを作成
<link rel="stylesheet" href="style.css"> の 1 行が、外部の CSS ファイルを HTML に読み込むための指定です。<link> は外部リソースを HTML に読み込むための要素で、rel="stylesheet" で「読み込むリソースが CSS スタイルシートである」ことを、href="style.css" で「読み込むファイルの場所」を指定します。この 1 行によって、ブラウザは HTML を解釈する際に同じフォルダの style.css も一緒に読み込み、そこに書かれたスタイルをページに適用するようになります。
以降のCSSのサンプルは、この style.css に追記して保存し、ブラウザを再読み込みして結果を確認します。
3.3 CSSの基本文法
CSSはセレクタ・プロパティ・値の3つの要素で構成されます。基本的な構文は以下のとおりです。
セレクタ {
プロパティ: 値;
}
セレクタで「どのHTML要素に対して」スタイルを適用するかを指定し、プロパティと値のペアで「何をどう変えるか」を指定します。
以下は <h1> 要素の文字色を青にする例です。この内容を style.css に追記します。
h1 {
color: blue;
}
保存してブラウザを再読み込みすると、<h1> の見出しが青色で表示されます。
コードを解説します。
h1 {
color: blue;
}
先頭の h1 がセレクタで、「すべての <h1> 要素にこのスタイルを適用する」という意味です。{ } の中に プロパティ: 値; のペアを書き、color: blue; は文字色を青に指定しています。index.html の <link rel="stylesheet" href="style.css"> によって style.css が読み込まれ、このスタイルが <h1> に適用されます。
複数のプロパティをまとめて指定することもできます。
h1 {
color: blue;
font-size: 32px;
margin-bottom: 16px;
}
3.4 セレクタの種類
セレクタには、対象を絞り込むための複数の書き方があります。代表的なセレクタを以下に示します。
| セレクタ | 記法 | 意味 |
|---|---|---|
| 要素セレクタ | p |
すべての<p>要素にマッチする |
| クラスセレクタ | .card |
class="card"が付いた要素にマッチする |
| IDセレクタ | #header |
id="header"が付いた要素にマッチする |
| 子孫セレクタ | article p |
<article>の中にあるすべての<p>にマッチする |
| 属性セレクタ | input[type="email"] |
type属性がemailの<input>にマッチする |
クラスセレクタが最もよく使われます。HTML側ではclass属性で名前を付け、CSS側では.クラス名で参照します。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="note">補足情報です。</p>
</body>
</html>
.note {
background-color: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 12px 16px;
color: #78350f;
}
保存してブラウザを再読み込みすると、「補足情報です。」の段落が薄い黄色の背景・左端にオレンジのアクセントラインが付いた「補足ボックス」風の見た目で表示されます。
コードを解説します。
.note {
background-color: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 12px 16px;
color: #78350f;
}
先頭の .note がクラスセレクタで、class="note" が付いた要素にのみスタイルを適用します。background-color で背景色（薄い黄色）、border-left で左端のアクセントライン（太さ 4px の実線・オレンジ色）、padding で内側の余白、color で文字色（濃いアンバー）を指定しています。
3.5 HTMLとCSSの結びつき方
HTMLにCSSを適用する方法は3つあります。それぞれの書き方と使い分けを見ていきます。
本セクションは 3 つの手法の書き方を紹介する概念比較のため、各手法の動作確認用のサンプルコード（完全な HTML ファイル）は省略しています。本章では 3 つ目の外部スタイルシート方式（先の「CSSファイルの用意」で設定した style.css を <link> で読み込む形）を採用しており、動作確認はそちらで進めています。
1つ目はインラインスタイルです。HTMLのstyle属性に直接記述します。
<p style="color: red;">重要なお知らせ</p>
適用範囲がその要素1つに限定されるため、単発の調整以外では推奨されません。
2つ目は内部スタイルシートです。HTMLの<head>内に<style>要素を書き、その中にCSSを記述します。
<head>
<style>
p {
color: red;
}
</style>
</head>
そのHTMLファイル内でのみ使うスタイルを定義するときに使います。
3つ目は外部スタイルシートです。CSSを別ファイルとして作成し、HTMLの<head>内で<link>要素を使って読み込みます。
<head>
<link rel="stylesheet" href="style.css">
</head>
複数のHTMLファイルで同じスタイルを共有できるため、実際にはこの方法が最もよく使われます。
3.6 カスケーディングと優先度
CSSの「C」が示すとおり、CSSは複数のスタイルがカスケード（滝のように上から下へ）適用される仕組みを持っています。同じ要素に対して複数のスタイルが指定された場合、以下の優先順位で最終的なスタイルが決まります。
本セクションは詳細度の考え方を整理する概念解説のため、動作確認用のサンプルコードは省略しています。実際に複数のスタイルが競合したときに、この優先順位に立ち返って原因を追跡してください。
!importantが付いた指定（極力使用しない）- インラインスタイル（
style属性） - IDセレクタ（
#header） - クラスセレクタ・属性セレクタ（
.card、[type="email"]） - 要素セレクタ（
p、h1） - 同じ優先度の場合は、後に書かれたスタイルが勝つ
この優先度のことを詳細度（specificity）と呼びます。意図せずスタイルが上書きされたときは、詳細度の考え方に立ち返って原因を追跡します。
| 💡 ポイント |
|---|
!importantはどんな指定よりも優先される強力な仕組みですが、乱用すると「後から!importantを上書きするためにさらに!importantを付ける」というスタイルの衝突を招きます。基本はクラスセレクタで詳細度を揃えて設計し、!importantはサードパーティ製CSSの上書きなど、どうしても必要な場面に限定して使います。 |
3.7 ボックスモデル
CSSでレイアウトを考える上で最も重要な概念がボックスモデルです。HTMLの各要素は、内側から順に content（内容）・padding（内側の余白）・border（枠線）・margin（外側の余白）の4層のボックスとして表現されます。
ボックスモデルの構造を図に示します。
flowchart TB
subgraph margin["margin（外側の余白）"]
subgraph border["border（枠線）"]
subgraph padding["padding（内側の余白）"]
content["content（内容）"]
end
end
end
それぞれの領域の役割は以下のとおりです。
| 領域 | 役割 |
|---|---|
| content | テキストや画像など、要素の内容そのものを配置する |
| padding | 内容と枠線の間の余白。背景色はpaddingの範囲まで広がる |
| border | 要素の枠線。線種・太さ・色を指定する |
| margin | 枠線の外側の余白。隣接する要素との距離を作る |
ボックスモデルを指定する CSS の書き方は以下のとおりです。
セレクタ {
width: content領域の幅;
padding: 内側の余白;
border: 枠線の太さ 線種 色;
margin: 外側の余白;
}
以下は .card クラスの要素にボックスモデルを指定する例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">カード</div>
</body>
</html>
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
margin: 24px;
}
保存してブラウザを再読み込みすると、以下のように幅 300px・内側 16px の余白・1px のグレー枠線・外側 24px の余白を持つ矩形（中に「カード」の文字）が表示されます。
コードを解説します。
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
margin: 24px;
}
width で content 領域の幅、padding で内側の余白、border で枠線（太さ・線種・色）、margin で外側の余白を指定しており、それぞれボックスモデルの 1 層に対応します。
box-sizing: border-box の重要性
デフォルトのCSSでは、widthで指定した値はcontent領域のみの幅を意味します。そのため、paddingやborderを追加すると、要素全体の幅はwidthより大きくなります。
たとえばwidth: 300px; padding: 16px; border: 1px solid;と指定すると、要素全体の幅は 300 + 16*2 + 1*2 = 334px になります。この挙動はレイアウトの計算を煩雑にする原因になります。
そこで、以下の指定を全要素に適用するのが現代的な標準です。
* {
box-sizing: border-box;
}
box-sizing: border-boxを指定すると、widthはpaddingとborderを含めた幅として扱われるようになります。上記の例では、要素全体の幅が指定通り300pxになり、内側のcontent領域が自動的に狭くなります。
| 📝 border-boxの適用範囲 |
|---|
実際のプロジェクトでは、リセットCSS（normalize.cssなど）や、Tailwind CSS等のフレームワークが最初から* { box-sizing: border-box; }を適用しています。自前のCSSを書く場合も、ファイルの先頭でこの指定を入れておくと計算しやすいレイアウトになります。 |
4. レイアウト
HTML/CSS にはいくつかのレイアウトの考え方があります。ここでは代表的な Flexbox（1 次元レイアウト）、Grid（2 次元レイアウト）、レスポンシブデザイン（画面幅による切り替え）の 3 つを取り上げます。
4.1 Flexbox
Flexbox（Flexible Box Layout）は、要素を一方向（横または縦）に並べるためのレイアウト方式です。ボタンの横並び・カードの一覧・ナビゲーションメニューなど、1次元のレイアウトに適しています。
主軸と交差軸
Flexboxを理解する上での鍵は、主軸（main axis）と交差軸（cross axis）という2つの軸の考え方です。要素を並べる方向が主軸、それに垂直な方向が交差軸になります。
主軸と交差軸の関係を図に示します。
flowchart LR
subgraph container["display: flex"]
direction LR
item1[アイテム1]
item2[アイテム2]
item3[アイテム3]
end
デフォルトでは主軸が横方向（左から右）、交差軸が縦方向（上から下）になります。flex-direction プロパティで主軸の向きを変更できます。
本セクションは主軸と交差軸の考え方を整理する概念解説のため、動作確認用のサンプルコードは省略しています。具体的な使い方は次の「基本の書き方」以降で扱います。
基本の書き方
Flexboxを使うには、親要素に display: flex を指定します。その瞬間から、子要素は主軸に沿って並ぶようになります。書き方は以下のとおりです。
セレクタ {
display: flex;
gap: 子要素間の間隔;
}
以下はカードを横並びにする例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
</body>
</html>
.card-list {
display: flex;
gap: 16px;
}
.card {
padding: 16px;
border: 1px solid #ccc;
}
保存してブラウザを再読み込みすると、「カード1」「カード2」「カード3」の 3 つの枠付きカードが横並びで表示され、カード同士の間には 16px の間隔が空きます。
コードを解説します。
.card-list {
display: flex;
gap: 16px;
}
親要素に display: flex を指定すると、その要素は Flex コンテナになり、子要素は主軸方向（デフォルトでは左から右）に自動的に並びます。gap: 16px は子要素同士の間に空ける間隔の指定で、上下左右の余白を個別に指定する必要がありません。
代表的なプロパティ
Flexboxの親要素に指定する代表的なプロパティを以下にまとめます。
| プロパティ | 役割 | 主な値 |
|---|---|---|
flex-direction |
主軸の向きを指定する | row（横） / column（縦） |
justify-content |
主軸方向の揃え方を指定する | flex-start / center / space-between / space-around |
align-items |
交差軸方向の揃え方を指定する | flex-start / center / stretch |
gap |
子要素間の間隔を指定する | 任意の長さ（16pxなど） |
flex-wrap |
幅が足りない場合に折り返すか指定する | nowrap（折り返さない） / wrap（折り返す） |
以下は、ヘッダのロゴを左端に、ナビゲーションを右端に配置する例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<div class="logo">MyApp</div>
<nav class="nav">
<a href="/">ホーム</a>
<a href="/about">概要</a>
</nav>
</header>
</body>
</html>
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
保存してブラウザを再読み込みすると、「MyApp」のロゴが画面の左端に、「ホーム」「概要」のナビゲーションが右端に、それぞれ縦方向の中央位置で表示されます。ブラウザの幅を広げても、ロゴは左端・ナビゲーションは右端に張り付いたまま、間の余白だけが伸びる挙動を確認できます。
コードを解説します。
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
display: flex で <header> を Flex コンテナにしたうえで、justify-content: space-between で主軸方向（横方向）の両端にロゴとナビゲーションを寄せます。align-items: center は交差軸方向（縦方向）の中央揃えの指定で、ロゴとナビゲーションの縦位置が揃います。padding: 16px は <header> の内側に 16px の余白を作ります。
| 💡 ポイント |
|---|
| Flexboxは「ヘッダ内の要素を左右に配置」「ボタンとアイコンの縦位置を揃える」「フォームのラベルと入力欄を横並びにする」など、1次元のレイアウトが必要な場面で威力を発揮します。2次元のレイアウトが必要な場合は、次に説明するGridを使う方が向いています。 |
4.2 Grid
Grid（CSS Grid Layout）は、行と列を持つ2次元のレイアウトを作るための仕組みです。ダッシュボード画面のように、縦横両方向にきれいに整列させたい場面で効果を発揮します。
基本の書き方
Gridを使うには、親要素に display: grid を指定し、grid-template-columns で列の構成を定義します。書き方は以下のとおりです。
セレクタ {
display: grid;
grid-template-columns: 列の構成;
gap: セル間の間隔;
}
以下は 3 列のグリッドレイアウトの例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.item {
padding: 16px;
background-color: #e0e7ff;
text-align: center;
}
保存してブラウザを再読み込みすると、薄い青色の背景を持つ「1」〜「6」の 6 つのセルが 2 行 3 列の格子状に配置され、セル間には 16px の間隔が空きます。
コードを解説します。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
親要素に display: grid を指定すると Grid コンテナになり、子要素はセル状に配置されます。grid-template-columns: 1fr 1fr 1fr は「幅を 3 等分した 3 つの列」を宣言する指定です。6 個のアイテムは自動的に左から右・上から下の順にセルに入るため、2 行 3 列の配置になります。gap: 16px はセル間の間隔の指定です。
.item の padding / background-color / text-align は、セルの範囲が視覚的に分かるように付けた補助的なスタイルです。
fr 単位
fr は fraction（分数）を意味する Grid 専用の単位で、利用可能な領域を比率で分割します。書き方は以下のとおりです。
セレクタ {
display: grid;
grid-template-columns: 比率1fr 比率2fr ...;
}
以下は、左サイドバーが 1・メインコンテンツが 3 の比率で並ぶレイアウトの例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="layout">
<aside class="sidebar">サイドバー</aside>
<main class="main">メインコンテンツ</main>
</div>
</body>
</html>
.layout {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 24px;
}
.sidebar,
.main {
padding: 16px;
background-color: #e0e7ff;
}
保存してブラウザを再読み込みすると、幅を 4 等分した左 1/4 に「サイドバー」、右 3/4 に「メインコンテンツ」の 2 つの薄い青色のセルが並んで表示されます。ブラウザの幅を変えても、この 1:3 の比率は保たれます。
コードを解説します。
.layout {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 24px;
}
grid-template-columns: 1fr 3fr で「幅の合計を 1+3=4 等分し、1 つ目の列に 1 つ分、2 つ目の列に 3 つ分」を割り当てます。ブラウザの幅が変わってもこの比率は保たれます。.sidebar,.main のスタイルは、セルの範囲が視覚的に分かるように付けた補助的なスタイルです。
固定幅と fr を混ぜることもできます。「左に固定 200px のサイドバー、右に残り全体を占めるメインコンテンツ」を作るには、grid-template-columns を以下のように書き換えます。
.layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
}
先に固定幅の 200px を確保し、残りの領域を 1fr に割り当てるため、メインコンテンツは常に「画面幅 - 200px」の幅を持ちます。
ダッシュボード風の2次元レイアウト
Gridは行方向の指定も可能です。以下はダッシュボードの骨格を作る例です。以下のコードで index.html を書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dashboard">
<header class="header">ヘッダ</header>
<aside class="sidebar">サイドバー</aside>
<main class="main">メインコンテンツ</main>
<footer class="footer">フッタ</footer>
</div>
</body>
</html>
.dashboard {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 16px;
}
.header { grid-area: header; background-color: #dbeafe; padding: 16px; }
.sidebar { grid-area: sidebar; background-color: #fef3c7; padding: 16px; }
.main { grid-area: main; background-color: #dcfce7; padding: 16px; }
.footer { grid-area: footer; background-color: #fce7f3; padding: 16px; }
保存してブラウザを再読み込みすると、上部に薄い青色の「ヘッダ」が画面幅いっぱいに広がり、その下に左 200px の薄い黄色「サイドバー」と右側の可変幅の薄い緑色「メインコンテンツ」が並び、最下部に薄いピンクの「フッタ」が画面幅いっぱいに配置されたダッシュボード型のレイアウトが表示されます。ブラウザの幅を変えると、メインコンテンツの幅だけが伸縮し、サイドバーは 200px を保つ挙動を確認できます。
コードを解説します。
.dashboard {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 16px;
}
grid-template-columns: 200px 1fr で「200px の固定列」と「残り全幅の可変列」の 2 列を定義しています。grid-template-rows: auto 1fr auto は 3 行の定義で、auto は「内容に合わせて高さを決める」、1fr は「残りの高さを全部使う」を意味します。grid-template-areas は各セルに名前（header / sidebar / main / footer）を割り当てる指定で、"header header" のように同じ名前を 2 列並べることで「その 2 列を 1 つの header セルとして扱う」ことができ、上段のヘッダと下段のフッタが 2 列を跨ぐレイアウトになります。min-height: 100vh は「最低でも画面の高さ全体を使う」指定です。
.header { grid-area: header; background-color: #dbeafe; padding: 16px; }
.sidebar { grid-area: sidebar; background-color: #fef3c7; padding: 16px; }
.main { grid-area: main; background-color: #dcfce7; padding: 16px; }
.footer { grid-area: footer; background-color: #fce7f3; padding: 16px; }
各要素の grid-area プロパティで、.dashboard の grid-template-areas で宣言した名前と対応付けています。この対応付けによって、HTML の記述順に関係なく、指定した位置に要素が配置されます。background-color と padding は、セルの範囲が視覚的に分かるように付けた補助的なスタイルです。
FlexboxとGridの使い分け
FlexboxとGridはどちらも現代のCSSレイアウトの基本ですが、それぞれ得意な領域が異なります。使い分けの目安を以下にまとめます。
| 観点 | Flexbox | Grid |
|---|---|---|
| 得意な方向 | 1次元（横または縦のどちらか）に要素を並べる | 2次元（行と列の両方）で要素を配置する |
| 主な用途 | ボタンの並び・ヘッダ内配置・カードの1列表示に使う | ページ全体のレイアウト・ダッシュボード・カードの格子配置に使う |
| 子要素のサイズ | 内容に応じて柔軟に伸縮させたいときに向く | 事前に決めた行・列に整列させたいときに向く |
実際のプロジェクトでは、ページ全体の骨格をGridで作り、その中の細かい部品（ヘッダ内のロゴとナビ配置など）をFlexboxで作るように、両方を組み合わせて使うのが一般的です。
本セクションは Flexbox と Grid の使い分けを整理する概念比較のため、動作確認用のサンプルコードは省略しています。それぞれの具体的な使い方は前の「Flexbox」「Grid」の各セクションで扱っています。
4.3 レスポンシブデザイン
レスポンシブデザインとは、画面サイズに応じてレイアウトを切り替え、スマートフォン・タブレット・デスクトップのいずれでも見やすい表示を実現する設計手法です。
viewportメタタグ
スマートフォンで正しく表示するために、<head>内に以下のメタタグを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-widthで「表示領域の幅を端末の幅に合わせる」、initial-scale=1.0で「初期の拡大率を等倍にする」ことを指定します。このメタタグがないと、スマートフォンのブラウザはデスクトップ向けの幅（980px程度）でページを描画し、全体を縮小して表示してしまいます。
本セクションは <meta name="viewport"> の役割を紹介する概念解説のため、独立した動作確認用のサンプルコードは省略しています。このメタタグを <head> に含めることでスマートフォン表示制御が有効になり、その効果は次の「メディアクエリ」以降のレスポンシブサンプルで一緒に確認します。
メディアクエリ
メディアクエリは、画面幅などの条件に応じてCSSの適用を切り替える仕組みです。基本の書き方は以下のとおりです。
@media (条件) {
セレクタ {
プロパティ: 値;
}
}
以下は「画面幅が 768px 以上のときだけ、コンテナを横並びにする」例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: column;
gap: 16px;
}
.item {
padding: 16px;
background-color: #e0e7ff;
text-align: center;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
保存してブラウザを再読み込みすると、レイアウトが画面幅によって切り替わります。ブラウザの幅が 768px 未満の状態では、以下のように A / B / C の 3 つのセルが縦に並びます。
ウィンドウの幅を 768px 以上に広げると、以下のように横並びに切り替わります。
DevTools の Toggle Device Toolbar で iPhone や iPad の画面幅に切り替えると、切り替わりの様子を観察しやすくなります。
コードを解説します。
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
.container にはデフォルトで flex-direction: column（縦並び）を指定しています。@media (min-width: 768px) { ... } は「画面幅が 768px 以上のときのみ、中括弧内の指定を有効にする」ブロックで、.container の flex-direction を row（横並び）に上書きすることでレイアウトが切り替わります。.item のスタイルは、セルの範囲が視覚的に分かるように付けた補助的なスタイルです。
モバイルファーストの考え方
min-widthを使ってスタイルを「幅が広くなるほど上書きしていく」書き方をモバイルファーストと呼びます。逆にmax-widthで「幅が狭くなったら上書き」する書き方はデスクトップファーストと呼びます。
現代の開発ではモバイルファーストが主流です。理由は以下のとおりです。
- モバイルからアクセスする利用者が多く、モバイル表示を主軸に設計する方が自然
- ベースを狭い画面向けにしておくと、CSSがシンプルに保たれやすい
- 広い画面向けの装飾は「余裕があれば加える」形になるため、必要な要素だけを段階的に足していける
よく使われる画面幅の目安（ブレークポイント）を以下に示します。プロジェクトやフレームワークによって値は多少異なります。
| 端末 | 画面幅の目安 | 用途 |
|---|---|---|
| モバイル | 〜767px | 縦持ちスマートフォンに対応する。1カラム表示を基本とする |
| タブレット | 768px〜1023px | タブレット・小型ノートに対応する。2カラムなど中間的なレイアウトを作る |
| デスクトップ | 1024px〜 | PCに対応する。3カラム以上や広めの余白を活用する |
以下は、モバイルでは 1 カラム、タブレットで 2 カラム、デスクトップで 3 カラムに切り替えるカードレイアウトの例です。以下のコードで index.html を書き換え、CSS を style.css に追記します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML/CSS学習用ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<div class="card">カード4</div>
<div class="card">カード5</div>
<div class="card">カード6</div>
</div>
</body>
</html>
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.card {
padding: 16px;
background-color: #e0e7ff;
text-align: center;
}
@media (min-width: 768px) {
.card-list {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.card-list {
grid-template-columns: 1fr 1fr 1fr;
}
}
保存してブラウザを再読み込みし、ウィンドウの幅を変えると、幅に応じてカードの列数が階段状に切り替わります。狭い画面（幅 768px 未満）では、以下のようにカードが 1 列で縦に並びます。
ウィンドウの幅を 1024px 以上に広げると、以下のようにカードが 3 列に切り替わります（幅が 768px 〜 1023px の中間の状態では 2 列表示になります）。
DevTools の Toggle Device Toolbar で iPhone や iPad の画面幅に切り替えると、階段状に列数が変わる挙動を確認できます。
コードを解説します。
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.card-list {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.card-list {
grid-template-columns: 1fr 1fr 1fr;
}
}
デフォルト（最も狭い画面）は grid-template-columns: 1fr で 1 列。@media (min-width: 768px) で 2 列に上書きし、@media (min-width: 1024px) でさらに 3 列に上書きします。狭い画面をデフォルトにして、大きい画面向けに段階的に上書きしていくのがモバイルファーストの書き方です。.card のスタイルは、カードの範囲が視覚的に分かるように付けた補助的なスタイルです。
| 💡 ポイント |
|---|
| ブレークポイントの値は「特定の端末サイズ」に厳密に合わせる必要はありません。実際にはコンテンツが読みにくくなるタイミング（見出しが折り返してしまう・カードが縦長になりすぎるなど）を見ながら調整するのが現実的です。ブラウザの開発者ツール（DevTools）にはデバイスモードがあり、画面幅を変えながらレイアウトを確認できます。 |
5. まとめ
この章では、HTML/CSSの基本を学びつつ、実際にコードで画面の作り方を確かめました。
- HTMLは構造、CSSは見た目、JavaScriptは動きを担当し、Webページはこの3つの技術で構成される
- HTMLは要素・タグ・属性を組み合わせて文書を作る
<!DOCTYPE html>/<html>/<head>/<body>が、HTMLファイルの基本構造になる<article><section><nav><header><footer><main>などのセマンティックな要素を使うことで、ページの意味構造が伝わりやすくなる- CSSはセレクタ・プロパティ・値で構成され、外部スタイルシートとして読み込むのが実際には最も一般的である
- 各要素は content / padding / border / margin の4層のボックスモデルで表現され、
box-sizing: border-boxを指定すると幅の計算が扱いやすくなる - Flexboxは1次元のレイアウト、Gridは2次元のレイアウトに適しており、両者を組み合わせて使うことが多い
- viewportメタタグとメディアクエリを使い、
min-widthベースのモバイルファーストで書くことで、スマートフォン・タブレット・デスクトップに対応できる
次の章では、JavaScriptの基本文法を学びつつ、実際にコードで扱いを確かめます。