HTML / CSS
目次
主要項目のみを表示しています。詳細な小見出しは本文内で確認できます。
- 概要
- 1. HTMLとCSSとは何か・なぜ重要か
- 2. HTMLの歴史とWeb標準
- 3. HTMLの基本構造
- 4. セマンティックHTML
- 5. テキスト要素とインライン要素
- 6. リンク・画像・メディア
- 7. リストとテーブル
- 8. フォーム
- 9. メタ情報とSEOの基礎
- 10. アクセシビリティ(A11y)
- 11. CSSの基本：セレクタとカスケード
- 12. ボックスモデル
- 13. 色・フォント・タイポグラフィ
- 14. レイアウト：displayとposition
- 15. Flexbox
- 16. CSS Grid
- 17. レスポンシブデザイン
- 18. CSS変数(カスタムプロパティ)
- 19. アニメーションとトランジション
- 20. CSSの現代的機能(@layer / :has / Container Queries等)
- 21. CSSフレームワークと方法論
- 22. パフォーマンスとレンダリング
- 23. ブラウザ間互換性
- 24. ツールとビルド
- 25. デバッグとDevTools
- 26. よくある落とし穴FAQ
- 27. 実践パターン集
- 28. 学習ロードマップ(30日)
- 29. 用語集
- 発展: CSS設計とアクセシビリティ
- 実践: プロジェクト構成
- 参照: HTML/CSSリファレンス
- 補遺: 応用パターン
- まとめ
- 参考文献
概要
まず、この章の中心構造を図で確認します。細部に入る前に、どの概念がどこへつながるかをつかむための地図です。
flowchart LR
A["HTML"] --> B["DOM"]
C["CSS"] --> D["CSSOM"]
B --> E["アクセシビリティツリー"]
B --> F["レンダーツリー"]
D --> F
F --> G["レイアウト"]
G --> H["描画"]
E --> I["支援技術"]
コード例の読み方
コード例は、そのまま写すためだけのものではありません。直前の本文で「何を確かめる例か」を押さえ、直後の説明で「どの性質が見えるか」を確認してください。実務では、ここに入力の境界、失敗時の挙動、依存する実行環境を足して読むと判断しやすくなります。
要点
HTML(HyperText Markup Language)はWebページの構造を表現するマークアップ言語、CSS(Cascading Style Sheets)はその見た目を指定するスタイル言語です。両者はWebの表示の根幹で、すべてのフロントエンド技術の土台です。
このページでは、HTML5のセマンティクス、CSSの基本(セレクタ・ボックスモデル・カスケード)、Flexbox / Grid、レスポンシブ、現代的CSS(:has、container queries、@layer)、A11yを整理します。
1. HTMLとCSSとは何か・なぜ重要か
このセクションでは「HTML / CSSが何をするものか」「JavaScriptとの役割分担」「なぜ別れているのか」を整理します。
HTML: 構造(document structure) - 「これは見出し、これは段落」
CSS: 見た目(presentation) - 「見出しは赤で太字」
JS: 振る舞い(behavior) - 「クリックされたら何かする」
この 「関心の分離(Separation of Concerns)」 がWebの設計原則。プログラミング言語と違い、HTMLは 構造を記述するマークアップ、CSSは 「どう見えるか」を宣言するスタイルシートです。
1-1. なぜHTML / CSSは分離されているか
1995年頃のHTMLは <font color="red"> のように 見た目もマークアップに混ぜていた。これが大きな問題を生みました:
- 同じ見た目を全ページで再定義する必要があった
- スタイルだけ変えたいときにHTML全部を書き換える必要があった
- スクリーンリーダー / 検索エンジンが構造を理解しにくかった
CSS(1996)の導入で 「構造と見た目を分離」できるようになりました。1つのHTMLを異なるCSSで違う見た目に出来る。後の レスポンシブデザイン や ダークモードの基盤です。
1-2. 全エンジニアに必要な理由
- 全Web開発者の必須知識
- メールテンプレートもHTML
- React / Vueでも最終出力はHTML
- ドキュメント生成にも使う(Markdown → HTML)
- アクセシビリティの責任
- 検索エンジン対応(SEO)
「JavaScriptを勉強したい」と思っても、その下にHTML / CSSがあるのを避けては通れません。
1-3. このセクションのまとめ
- HTML = 構造、CSS = 見た目、JS = 振る舞い
- 関心の分離が原則
- 全Web関係者の必須知識
- アクセシビリティ・SEOの責任
2. HTMLの歴史とWeb標準
2-1. HTMLの歴史
1991 Tim Berners-LeeがHTML提案
1995 HTML 2.0
1997 HTML 3.2 / 4.0(CSSとテーブルレイアウト時代)
1999 HTML 4.01
2000 XHTML 1.0(XML風厳密構文)
2008 HTML5(ドラフト、WHATWG)
2014 HTML5正式勧告(W3C)
継続HTML Living Standard(WHATWGが維持、随時更新)
XHTMLの挫折
W3Cは2000年代にXHTML(XMLベースの厳密HTML)を推進しましたが、「タグの閉じ忘れで真っ白」の挙動が嫌われ普及しませんでした。代わりに「寛容に解釈」するHTML5がWHATWG(ブラウザベンダ)から提案され、現在は HTML Living Standard(WHATWG)が事実上の標準です。
2-2. CSSの歴史
1996 CSS1
1998 CSS2
2011 CSS2.1
継続CSS3(モジュールごとに分割、Flexbox、Grid、変数、アニメーション 等)
CSS3以降は 「単一バージョン」ではなくモジュール群として進化(Selectors Level 4、Grid Layout Level 1、など)。
2-3. ブラウザベンダと標準
W3C Web全般の標準化団体
WHATWGブラウザベンダ(Apple/Google/Mozilla/Microsoft)のHTML標準化
TC39 JavaScriptの標準化(ECMA)
HTMLはWHATWG、CSSはW3Cが中心。ブラウザ実装が事実上の標準で、仕様は実装後に追認されることも多い。
2-4. このセクションのまとめ
- 1991年Tim Berners-LeeがHTMLを発明
- XHTMLの厳格化は失敗、HTML5で寛容に
- 現在はHTML Living Standard(WHATWG)
- CSSはモジュール群として継続進化
- 標準はW3C / WHATWG / TC39
3. HTMLの基本構造
3-1. 最小限のHTML5ドキュメント
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
各部の役割
<!DOCTYPE html> HTML5宣言(必須)
<html lang="ja"> ルート要素、言語指定
<head> メタ情報(表示されない)
<meta charset="UTF-8"> 文字コード(必須、最初に書く)
<meta name="viewport" ...> モバイル表示制御(必須)
<title>...</title> タブ・ブックマークタイトル
<body> 実際に表示される内容
3-2. 要素・タグ・属性
<a href="https://example.com" target="_blank" rel="noopener">リンク</a>
^ ^ ^
タグ 属性 内容
- 要素(element): 開始タグ + 内容 + 終了タグ
- 属性(attribute): タグ内のキー=値
- 空要素(void element):
<br>,<img>,<input>など終了タグなし
3-3. ネストとブロック構造
<article>
<header>
<h1>記事タイトル</h1>
<time datetime="2024-04-29">2024-04-29</time>
</header>
<p>本文...</p>
<footer>
<p>著者: Alice</p>
</footer>
</article>
要素は 木構造になります。これがDOM(Document Object Model)の基礎です。
3-4. 全要素一覧(カテゴリ別)
構造系: html, head, body, header, footer, main, nav, aside, section, article
見出し: h1〜h6
段落: p
インライン: span, a, strong, em, code, kbd, time, abbr, mark
リスト: ul, ol, li, dl, dt, dd
表: table, thead, tbody, tr, th, td, caption
フォーム: form, input, textarea, select, option, button, label, fieldset
メディア: img, picture, video, audio, source
埋込: iframe, embed, object, canvas, svg
スクリプト: script, noscript, style, link, meta, base
3-5. このセクションのまとめ
- DOCTYPE / html / head / bodyの最小構造
- meta charsetとviewportは必須
- 要素 = タグ + 属性 + 内容
- DOM木構造を意識
- カテゴリ別に要素を覚える
4. セマンティックHTML
「意味のあるタグを使う」というHTML5の中核思想。<div> だけで作るのではなく、内容に応じた要素を使います。
4-1. ランドマーク要素
<header> <!-- ページやsectionのヘッダ -->
<nav> <!-- ナビゲーション -->
<main> <!-- メインコンテンツ(1ページに1つ) -->
<aside> <!-- 補足・サイドバー -->
<footer> <!-- フッタ -->
<article> <!-- 独立した記事 -->
<section> <!-- 一般的なセクション -->
典型的な構造
<body>
<header>
<h1>サイト名</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<section>
<h3>節1</h3>
<p>本文...</p>
</section>
</article>
</main>
<aside>
<h2>関連記事</h2>
</aside>
<footer>
<p>© 2024</p>
</footer>
</body>
4-2. なぜセマンティックが重要か
1. アクセシビリティ: スクリーンリーダーが構造を理解
2. SEO: 検索エンジンが内容を理解
3. 保守性: コードが読みやすい
4. デフォルトスタイル: ブラウザが適切な見た目を提供
5. ブラウザ機能: Reader Mode、ブックマーク等
「<div class="header"> ではなく <header> を使う」だけで、上記の利益が得られます。
4-3. インラインのセマンティクス
<strong>重要</strong> <!-- 重要度(太字)-->
<em>強調</em> <!-- 強調(斜体)-->
<b>視覚的太字</b> <!-- 意味なし、太字のみ -->
<i>視覚的斜体</i> <!-- 意味なし、斜体のみ -->
<mark>ハイライト</mark> <!-- 注目箇所 -->
<small>小さい注釈</small>
<code>foo()</code> <!-- インラインコード -->
<kbd>Ctrl+C</kbd> <!-- キー入力 -->
<samp>output</samp> <!-- 出力サンプル -->
<var>x</var> <!-- 変数 -->
<time datetime="2024-04-29">4月29日</time>
<abbr title="HyperText Markup Language">HTML</abbr>
<address>...</address> <!-- 連絡先 -->
<cite>『...』</cite> <!-- 引用元 -->
<q>「短い引用」</q>
<blockquote>長い引用</blockquote>
4-4. このセクションのまとめ
- header / nav / main / aside / footer / article / section
- 1ページにmainは1つ、articleは独立した内容
- インラインはstrong / em / code / time / abbrなど
- 意味のあるタグでアクセシビリティ・SEO・保守性を確保
5. テキスト要素とインライン要素
5-1. 見出しと段落
<h1>大見出し(ページに1つ推奨)</h1>
<h2>章</h2>
<h3>節</h3>
<h4>項</h4>
<h5>小項目</h5>
<h6>最下層</h6>
<p>段落。改行は <br> ではなく別段落で表現。</p>
見出しレベルを飛ばさない(h1 → h3のように)のがアクセシビリティの基本。
5-2. 改行・水平線
<p>住所:<br>
東京都千代田区...</p>
<hr> <!-- 区切り線 -->
<br> は 本当に改行が意味的な場合のみ(住所、詩など)。視覚的なスペースにはCSSを使う。
5-3. プリフォーマット
<pre>
インデントや空白が
そのまま保持される
</pre>
<pre><code class="language-python">
def hello():
print("Hello")
</code></pre>
ソースコードやAAは <pre> + <code>。
5-4. このセクションのまとめ
- h1〜h6はレベルを飛ばさない
- <p> で段落、<br> は意味的改行のみ
- <pre> で空白保持、<code> でコード
6. リンク・画像・メディア
6-1. リンク
<a href="/about">Aboutページ</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部</a>
<a href="mailto:a@b.c">メール送信</a>
<a href="tel:+819012345678">電話</a>
<a href="#section1">ページ内リンク</a>
<a href="/file.pdf" download>ダウンロード</a>
target="_blank" には必ず rel="noopener noreferrer"(セキュリティ)。
6-2. 画像
<img src="cat.jpg" alt="黒猫が窓辺に座っている" width="800" height="600">
<!-- レスポンシブ -->
<img srcset="cat-1x.jpg 1x, cat-2x.jpg 2x" src="cat-1x.jpg" alt="...">
<!-- アートディレクション -->
<picture>
<source media="(min-width: 768px)" srcset="cat-large.jpg">
<source media="(min-width: 480px)" srcset="cat-medium.jpg">
<img src="cat-small.jpg" alt="...">
</picture>
alt は必須。装飾なら alt=""、内容を表すなら適切な説明。
lazy loading
<img src="big.jpg" loading="lazy" alt="...">
ビューポート外の画像を必要になるまで読まない(モダンブラウザ標準)。
6-3. 動画と音声
<video controls width="640" poster="thumb.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="captions.vtt" kind="captions" srclang="ja" label="Japanese">
お使いのブラウザはvideoをサポートしていません。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
6-4. SVG
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
ベクター画像。CSSで色を変えたり、アニメーションも可能。アイコンに最適。
6-5. このセクションのまとめ
- <a> + rel="noopener noreferrer"(外部リンク)
- <img> + altは必須、srcsetでレスポンシブ
- <picture> でアートディレクション
- loading="lazy" で遅延読み込み
- <video> / <audio> / <svg>
7. リストとテーブル
7-1. リスト
<!-- 順序なし -->
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<!-- 順序付き -->
<ol>
<li>First</li>
<li>Second</li>
</ol>
<!-- 定義リスト -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- ネスト -->
<ul>
<li>Apple
<ul>
<li>Red</li>
<li>Green</li>
</ul>
</li>
</ul>
7-2. テーブル
<table>
<caption>2024年の売上</caption>
<thead>
<tr>
<th scope="col">月</th>
<th scope="col">売上</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1月</th>
<td>100万円</td>
</tr>
<tr>
<th scope="row">2月</th>
<td>120万円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">合計</th>
<td>220万円</td>
</tr>
</tfoot>
</table>
scope 属性は アクセシビリティのため重要(行の見出しか列の見出しか)。
7-3. テーブルレイアウトは禁止
「テーブルはデータ表示専用」。レイアウト目的で <table> を使うのは過去の悪習慣。Flexbox / Gridを使う。
7-4. このセクションのまとめ
- <ul>順序なし、<ol>順序付き、<dl>定義
- <table> はデータ表示のみ、レイアウト不可
- thead / tbody / tfoot / captionで構造化
- scopeで行/列の見出しを区別
8. フォーム
8-1. 基本
<form action="/submit" method="post" novalidate>
<fieldset>
<legend>個人情報</legend>
<label for="name">名前</label>
<input type="text" id="name" name="name" required minlength="2" maxlength="50">
<label for="email">メール</label>
<input type="email" id="email" name="email" required>
<label for="age">年齢</label>
<input type="number" id="age" name="age" min="0" max="150">
<label for="bio">自己紹介</label>
<textarea id="bio" name="bio" rows="5" cols="40"></textarea>
<label for="country">国</label>
<select id="country" name="country">
<option value="">選択してください</option>
<option value="jp">日本</option>
<option value="us">アメリカ</option>
</select>
<fieldset>
<legend>性別</legend>
<label><input type="radio" name="gender" value="m"> 男性</label>
<label><input type="radio" name="gender" value="f"> 女性</label>
<label><input type="radio" name="gender" value="o"> その他</label>
</fieldset>
<label><input type="checkbox" name="agree" required> 規約に同意</label>
<button type="submit">送信</button>
<button type="reset">リセット</button>
</fieldset>
</form>
8-2. inputのtype
text, password, email, url, tel, search,
number, range, date, time, datetime-local, month, week,
checkbox, radio, color, file, hidden, submit, reset, button
type="email" などで モバイルキーボードが最適化されたり、自動バリデーションが走る。
8-3. labelの重要性
<!-- Good: ラベルとフィールドが関連付け -->
<label for="email">メール</label>
<input type="email" id="email" name="email">
<!-- 暗黙関連 -->
<label>
メール <input type="email" name="email">
</label>
スクリーンリーダーがラベルを読み上げる。クリックでinputにフォーカス。A11yで必須。
8-4. バリデーション
<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}" title="英字3文字以上">
<input type="number" min="0" max="100" step="1">
<input type="text" minlength="2" maxlength="50">
ブラウザがリアルタイムで検証。novalidate 属性で無効化(JSで独自検証する場合)。
8-5. このセクションのまとめ
- <form> + fieldset + legendで構造化
- labelは必須(A11y、UX)
- input typeで適切なキーボード・検証
- required / pattern / minlength等でHTMLレベル検証
- ボタンはtype="button" でデフォルトsubmitを抑制
9. メタ情報とSEOの基礎
9-1. 基本meta
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル | サイト名</title>
<meta name="description" content="このページの説明(120-160文字推奨)">
<link rel="canonical" href="https://example.com/page">
<link rel="icon" href="/favicon.ico">
</head>
9-2. Open Graph(SNSシェア時の表示)
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="...">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
9-3. structured data(schema.org)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"author": { "@type": "Person", "name": "Alice" },
"datePublished": "2024-04-29"
}
</script>
検索結果のリッチスニペット(評価★、レシピ等)に必要。
9-4. SEOの基本
- <title> と <meta description> を全ページで
- 1ページに <h1> 1つ
- semantic HTMLを使う
- alt属性
- canonicalで重複コンテンツ対策
- sitemap.xmlとrobots.txt
- ページ速度(Core Web Vitals)
- モバイルフレンドリー
9-5. このセクションのまとめ
- charset / viewport / title / descriptionは全ページ必須
- Open GraphでSNSシェア最適化
- 構造化データで検索の見え方が変わる
- SEO ≒ A11y + 内容 + 速度
10. アクセシビリティ(A11y)
「すべての人がアクセス可能なWeb」のための設計。
10-1. WAI-ARIA
<button aria-label="メニューを開く" aria-expanded="false">☰</button>
<div role="alert">エラーが発生しました</div>
<input aria-describedby="hint">
<small id="hint">8文字以上で入力してください</small>
ネイティブHTML要素を優先し、それで表現できないときだけARIAを使う。
10-2. キーボードナビゲーション
- すべての操作をTab / Enter / Spaceで可能に
- フォーカス可視化(outlineを消さない)
- 論理的なtab order
- skip link("Skip to main content")
10-3. 色とコントラスト
- 文字と背景のコントラスト比: WCAG AAで4.5:1以上
- 色だけで情報を伝えない(赤 = エラー だけでなく ✕ アイコンも)
- カラーブラインド対応
10-4. このセクションのまとめ
- セマンティックHTMLがA11yの基本
- WAI-ARIAは補助、ネイティブ要素優先
- キーボード操作完全サポート
- コントラスト4.5:1
- スクリーンリーダー(VoiceOver/NVDA)で実機確認
11. CSSの基本：セレクタとカスケード
11-1. CSSの書き方
<!-- インライン -->
<p style="color: red;">テキスト</p>
<!-- <style> タグ -->
<head>
<style>
p { color: red; }
</style>
</head>
<!-- 外部ファイル(推奨)-->
<link rel="stylesheet" href="styles.css">
11-2. ルールの構造
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
p {
color: red;
font-size: 16px;
}
11-3. セレクタ
/* 基本 */
* /* 全要素 */
p /* 要素 */
.class /* class */
#id /* id */
/* 属性 */
[type="email"]
[href^="https"] /* 前方一致 */
[href$=".pdf"] /* 後方一致 */
[class*="btn"] /* 部分一致 */
/* 子孫 */
div p /* divの中のp(孫も含む)*/
div > p /* divの直下のp */
h1 + p /* h1直後のp */
h1 ~ p /* h1の後の兄弟pすべて */
/* 擬似クラス */
a:hover
a:active
a:visited
input:focus
input:disabled
input:checked
li:first-child
li:last-child
li:nth-child(2n) /* 偶数 */
li:nth-child(odd)
li:nth-of-type(2)
:not(.disabled)
:has(> img) /* 子にimgを持つ */(モダン)
:is(h1, h2, h3) /* グループ化 */
/* 擬似要素 */
p::before { content: "→"; }
p::after { content: "."; }
p::first-line
p::first-letter
::placeholder
::selection
11-4. カスケード(優先順位)
CSSは 「Cascading」(流れ込む)。複数ルールがマッチした時の優先順位:
1. !important
2. インラインスタイル(style="...")
3. 詳細度(specificity)
- インライン: 1000
- id: 100
- class / 属性 / 擬似クラス: 10
- 要素 / 擬似要素: 1
4. 後に書かれたほうが優先
5. 継承
/* 詳細度 */
#main .item p /* 100 + 10 + 1 = 111 */
.list .item p /* 10 + 10 + 1 = 21 */
.list p /* 10 + 1 = 11 */
p /* 1 */
!important は 最終手段。乱用するとデバッグ地獄。
11-5. 継承
body { color: black; font-family: sans-serif; }
/* 子要素にも自動的に継承される */
color、font-*、line-height、text-align などは継承される。width、margin、border などは継承されない。
p { color: inherit; } /* 明示的に継承 */
p { color: initial; } /* 初期値 */
p { color: unset; } /* 継承可能なら継承、不可能なら初期値 */
p { color: revert; } /* ブラウザデフォルトに戻す */
11-6. このセクションのまとめ
- 外部CSS(<link>)が標準
- セレクタ: 要素 / class / id / 属性 / 擬似 / 関係
- カスケード: 詳細度 + 出現順序
- !importantは最終手段
- 継承: color / font-* / text-* など
- :has() / :is() / :where() がモダン
12. ボックスモデル
すべての要素は 「箱」 として扱われる。
+-------------------------+
| margin |
| +-------------------+ |
| | border | |
| | +-------------+ | |
| | | padding | | |
| | | +-------+ | | |
| | | |content| | | |
| | | +-------+ | | |
| | +-------------+ | |
| +-------------------+ |
+-------------------------+
12-1. box-sizing
* {
box-sizing: border-box; /* widthにpaddingとborderを含める */
}
content-box(デフォルト)だと width: 100% + paddingでレイアウトが崩れる。現代では border-box がデファクト。
12-2. marginとpadding
.box {
margin: 10px; /* 全方向 */
margin: 10px 20px; /* 上下 / 左右 */
margin: 10px 20px 30px; /* 上 / 左右 / 下 */
margin: 10px 20px 30px 40px; /* 上 / 右 / 下 / 左 */
margin-top: 10px;
margin-block-start: 10px; /* 論理的: 書字方向に応じて */
margin-inline-start: 10px;
margin: 0 auto; /* 横中央 */
}
12-3. marginのcollapse(相殺)
.a { margin-bottom: 20px; }
.b { margin-top: 30px; }
/* aとbの間は50pxではなく30px(大きい方)*/
縦方向の隣接marginは 相殺される。Flexbox / Gridでは起きない。
12-4. width / heightとmin/max
.box {
width: 100%;
max-width: 1200px; /* 上限 */
min-width: 320px;
height: 100vh; /* viewport高 */
aspect-ratio: 16 / 9; /* アスペクト比固定 */
}
12-5. このセクションのまとめ
- content + padding + border + margin
- box-sizing: border-boxが定石
- marginの縦方向は相殺
- max/min-widthで柔軟性
- aspect-ratioで比率
13. 色・フォント・タイポグラフィ
13-1. 色
color: red; /* キーワード */
color: #ff0000; /* hex */
color: #f00; /* hex短縮 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);
color: oklch(50% 0.2 30); /* モダンな色空間 */
color: color-mix(in srgb, red 50%, blue 50%); /* 混色 */
13-2. フォント
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 16px;
font-weight: 400; /* 100〜900 */
font-style: italic;
line-height: 1.6;
letter-spacing: 0.05em;
text-align: left;
}
システムフォントスタック
font-family: system-ui, -apple-system, sans-serif;
各OSのシステムフォントを使う最新の方法。読み込み速度ゼロ。
13-3. Webフォント
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body { font-family: 'Roboto', sans-serif; }
@font-face
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-weight: 400;
font-display: swap; /* フォント読み込み中も既存フォントを表示 */
}
13-4. テキスト装飾
text-decoration: underline;
text-decoration: line-through;
text-decoration: underline wavy red;
text-transform: uppercase;
text-overflow: ellipsis; /* 省略記号 */
white-space: nowrap; /* 改行禁止 */
word-break: break-all;
overflow-wrap: break-word;
text-shadow: 1px 1px 2px black;
1行省略
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
複数行省略
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
13-5. このセクションのまとめ
- colorはhex / rgba / hsl / oklch
- system-uiでシステムフォント
- @font-face + font-display: swap
- text-overflow: ellipsisで省略
- line-heightは単位なし数値(1.5)が推奨
14. レイアウト：displayとposition
14-1. display
block縦に積む(div, p, h1)
inline横に並ぶ(span, a, em)
inline-block横に並ぶ + サイズ指定可
none非表示(DOMには残る)
flex Flexbox
grid CSS Grid
contents自分は消える、子要素だけ
tableテーブル風
list-item list要素
14-2. position
position: static; /* デフォルト */
position: relative; /* 通常位置から相対 */
position: absolute; /* 親のrelative/absoluteからの絶対 */
position: fixed; /* viewport固定 */
position: sticky; /* スクロール途中で固定 */
top: 10px; right: 20px; bottom: 10px; left: 20px;
inset: 10px; /* 全方向 */
z-index: 10; /* 重なり順序 */
14-3. stickyの使い所
.header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
スクロールするとくっつくヘッダ・サイドナビ。JSなしで実現。
14-4. z-indexとstacking context
.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 999; }
/* parentのz-indexで全体が決まる、childの999はparent内のみ有効 */
「スタッキングコンテキスト」を理解しないと、z-indexで詰まることが多い。
14-5. このセクションのまとめ
- display: block / inline / inline-block / flex / grid
- position: static / relative / absolute / fixed / sticky
- absoluteは親のpositionあり要素を基準
- stickyでスクロール固定
- z-indexは同じstacking context内のみ
15. Flexbox
「1次元レイアウト」(横一列または縦一列)の決定版。
15-1. 基本
.container {
display: flex;
flex-direction: row; /* row / column / row-reverse / column-reverse */
flex-wrap: wrap; /* nowrap(デフォルト)/ wrap */
justify-content: center; /* 主軸の整列 */
align-items: center; /* 交差軸の整列 */
gap: 1rem; /* 子要素間のスペース */
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
15-2. justify-content
flex-start左寄せ(main軸の開始)
flex-end右寄せ
center中央
space-between両端と均等
space-around両端も均等(半分の隙間)
space-evenly完全に均等
15-3. align-items
stretch高さを揃える(デフォルト)
flex-start上揃え
flex-end下揃え
center縦中央
baselineテキスト基線
15-4. flexプロパティ(子要素)
.item {
flex: 1; /* grow=1, shrink=1, basis=0 */
flex-grow: 1; /* 余白を分け合う比率 */
flex-shrink: 1; /* 縮む比率 */
flex-basis: 200px; /* 基本サイズ */
align-self: flex-end; /* 自分だけ別の整列 */
order: 2; /* 順序変更 */
}
15-5. 中央寄せ
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
「完全な中央寄せ」が3行で書ける。CSSの最大の進化のひとつ。
15-6. このセクションのまとめ
- 1次元レイアウト(横or縦の一列)
- flex-directionで軸を決定
- justify-content(主軸)/ align-items(交差軸)
- gapで子要素間スペース
- flex: 1で柔軟な伸縮
16. CSS Grid
「2次元レイアウト」(行と列)の決定版。Flexboxの上位互換ではなく、用途が違う。
16-1. 基本
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 3列 */
grid-template-rows: 100px auto; /* 2行 */
gap: 1rem;
}
fr は fraction(分数)。残りスペースを分け合う比率。
16-2. 領域定義(grid-template-areas)
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"nav main"
"footer footer";
height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
「ASCIIアート風」のレイアウト指定が可能。
16-3. 自動配置とrepeat
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
「最低200px、入る分だけ列を増やす」レスポンシブグリッド。メディアクエリ不要で要素が自動的に折り返す。
16-4. アイテムの配置
.item {
grid-column: 1 / 3; /* 1〜3列目(2列分)*/
grid-row: 2 / span 3; /* 2行目から3行分 */
grid-column: 1 / -1; /* 1から最後まで(全幅)*/
}
16-5. justifyとalign
.container {
justify-items: center; /* セル内での横位置 */
align-items: center; /* セル内での縦位置 */
justify-content: center; /* グリッド全体の横位置 */
align-content: center; /* グリッド全体の縦位置 */
}
16-6. Subgrid
.parent { display: grid; grid-template-columns: ...; }
.child {
display: grid;
grid-template-columns: subgrid; /* 親のグリッドを継承 */
}
入れ子グリッドが親に揃う(モダンブラウザ)。
16-7. このセクションのまとめ
- 2次元レイアウト
- grid-template-columns / rowsで構造
- grid-template-areasで名前付き領域
- repeat(auto-fill, minmax(...)) でレスポンシブ
- subgridで入れ子の整列
- FlexboxとGridは補完関係
17. レスポンシブデザイン
17-1. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
モバイル対応の 必須。これがないとモバイルで意図せず縮小表示。
17-2. メディアクエリ
/* モバイルファースト(推奨)*/
.container { padding: 1rem; }
@media (min-width: 768px) {
.container { padding: 2rem; }
}
@media (min-width: 1024px) {
.container { padding: 3rem; max-width: 1200px; margin: 0 auto; }
}
/* その他のクエリ */
@media (max-width: 767px) { ... } /* モバイル */
@media (orientation: landscape) { ... }
@media (prefers-color-scheme: dark) { ... } /* ダークモード */
@media (prefers-reduced-motion: reduce) { ... } /* アニメ抑制 */
@media print { ... }
17-3. 単位
絶対: px, pt, mm, cm, in
相対: em(親フォントサイズ), rem(rootフォントサイズ)
%(親要素相対)
viewport: vw, vh, vmin, vmax, dvh(dynamic viewport)
svh(small viewport), lvh(large viewport)
/* モバイルSafariのbottom bar問題に対応 */
.full-height {
height: 100dvh; /* iPhoneのアドレスバー考慮 */
}
17-4. clamp / min / max
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* 最小1.5rem、推奨4vw、最大3rem */
}
.container {
width: min(90%, 1200px);
}
メディアクエリなしで 連続的レスポンシブ。
17-5. fluid typography
:root {
--font-base: clamp(1rem, 0.5rem + 1vw, 1.25rem);
}
body { font-size: var(--font-base); }
17-6. このセクションのまとめ
- viewport metaは必須
- モバイルファースト + min-width
- prefers-color-schemeでダークモード
- clamp() / min() / max() で連続的レスポンシブ
- dvhでモバイル全画面
18. CSS変数(カスタムプロパティ)
:root {
--primary: #3b82f6;
--secondary: #8b5cf6;
--space-md: 1rem;
--space-lg: 2rem;
}
.button {
background: var(--primary);
padding: var(--space-md);
}
/* テーマ切り替え */
[data-theme="dark"] {
--primary: #60a5fa;
}
JSから動的に変更可能:
document.documentElement.style.setProperty('--primary', '#ff0000');
「動的に変更可能なテーマ」をCSSのみで実現。
19. アニメーションとトランジション
19-1. transition
.button {
background: blue;
transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
19-2. @keyframesとanimation
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
19-3. パフォーマンス
「transform / opacityだけアニメーションする」のが速い(GPUで処理)。width / top などはレイアウト再計算で重い。
19-4. prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
ユーザがアニメ抑制を望んでいる場合に対応。A11y必須。
20. CSSの現代的機能(@layer / :has / Container Queries等)
20-1. :has()(親セレクタ)
form:has(input:invalid) {
border: 2px solid red;
}
.card:has(> img) {
padding: 0;
}
「子要素を持つ親」を選択。長年待望された機能。
20-2. @layer(カスケードレイヤー)
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; }
}
@layer components {
.button { ... }
}
カスケードを 明示的に層別にする。!important地獄を避ける。
20-3. Container Queries
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { display: flex; }
}
「ビューポートではなく、親要素のサイズ」でレスポンシブ。コンポーネント単位で完結する。
20-4. 新しい色関数
color: oklch(50% 0.2 30); /* 知覚的均一な色空間 */
color: color-mix(in srgb, red 50%, blue 50%); /* 混色 */
color: light-dark(black, white); /* テーマに応じて */
20-5. このセクションのまとめ
- :has() で親セレクタ
- @layerでカスケード制御
- Container Queriesでコンポーネント単位レスポンシブ
- oklch / color-mix / light-dark
21. CSSフレームワークと方法論
21-1. 主要フレームワーク
Tailwind CSS: ユーティリティファースト(classを多用)
Bootstrap: コンポーネントベース、伝統的
Bulma: 軽量
Foundation: エンタープライズ
Material UI: Google Material Design
Chakra / shadcn: Reactと統合
21-2. CSS-in-JS
// styled-components
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
padding: 8px 16px;
`;
// Emotion
// CSS Modules
// vanilla-extract(型安全)
21-3. 方法論
BEM: Block__Element--Modifier
SMACSS: カテゴリ分け
OOCSS: オブジェクト指向
ITCSS: 逆三角形(reset → base → components)
Atomic CSS: ユーティリティクラス(Tailwindの祖先)
CUBE CSS: composition / utility / block / exception
21-4. このセクションのまとめ
- Tailwind CSSが現代の主流
- BEMがクラス命名の定番
- CSS-in-JSはReact系で人気
- shadcn/uiのような「コピペ系」も最近は人気
22. パフォーマンスとレンダリング
22-1. レンダリングパイプライン
HTML → DOM構築
CSS → CSSOM構築
DOM + CSSOM → Render Tree
Render Tree → Layout(位置計算)
→ Paint(ピクセル描画)
→ Composite(レイヤー合成)
22-2. 重い操作
Layout(reflow): width/height/position変更で発生
Paint: 色変更などで発生
Composite: transform/opacityのみで発生(速い)
「transform / opacityをアニメーションせよ」の根拠。
22-3. CSSのロード戦略
<!-- preload -->
<link rel="preload" href="critical.css" as="style">
<!-- 非同期ロード -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<!-- font-display: swapでFOUT回避 -->
22-4. Core Web Vitals
LCP (Largest Contentful Paint): 最大要素表示時間(2.5秒以下)
INP (Interaction to Next Paint): 応答性(200ms以下)
CLS (Cumulative Layout Shift): レイアウト安定性(0.1以下)
Googleの検索順位にも影響。
22-5. このセクションのまとめ
- Layout/Paint/Compositeの重さを意識
- transform/opacityは速い
- preload / font-display: swap
- Core Web VitalsがSEO指標
23. ブラウザ間互換性
23-1. Caniuse
caniuse.com で各機能のブラウザ対応を確認。新機能を使う前に必ずチェック。
23-2. ベンダープレフィックス
.element {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
現代ではAutoprefixerなどのツールが自動付与。手書きは避ける。
23-3. プログレッシブエンハンスメント
.button {
background: blue; /* 全ブラウザ */
}
@supports (backdrop-filter: blur(10px)) {
.button {
backdrop-filter: blur(10px); /* 対応ブラウザのみ */
}
}
「新機能は対応ブラウザだけに適用、古いブラウザでも基本機能は動く」。
23-4. このセクションのまとめ
- caniuseで対応確認
- @supportsでフォールバック
- Autoprefixerでベンダーprefix自動化
- プログレッシブエンハンスメント
24. ツールとビルド
24-1. プリプロセッサ
Sass / SCSS: 入れ子・変数・mixin
Less: Sassの代替
PostCSS: CSS変換ツール(Tailwindの基盤)
$primary: blue;
.card {
color: $primary;
.title { font-weight: bold; }
}
CSSにネスト構文が入った今(モダンブラウザ)、Sassの必要性は減少しつつあります。
24-2. ビルドツール
Vite: 超高速、現代の標準
webpack: 老舗、複雑だが柔軟
esbuild: Go製、超高速
parcel: 設定不要
24-3. 開発ワークフロー
HTML/CSS/JS → ビルド → minify / autoprefix / bundle → 配信
25. デバッグとDevTools
25-1. Chrome DevTools
Elements: DOM / CSSの確認・編集
Console: JSデバッグ
Sources: ブレークポイント
Network: リクエスト / 応答
Performance: レンダリング解析
Lighthouse: 品質監査(A11y / SEO / Performance)
Coverage: 未使用CSS/JS検出
25-2. CSSデバッグの技
/* 全要素の輪郭を可視化 */
* { outline: 1px solid red; }
/* テキスト見えるか確認 */
* { background: rgba(255, 0, 0, 0.1); }
DevToolsの **「Inspect」→「Computed」**で適用された全プロパティを確認。
25-3. このセクションのまとめ
- DevToolsのElementsでリアルタイム編集
- Lighthouseで品質監査
- Computedで実際の値を確認
- outlineで要素境界を可視化
26. よくある落とし穴FAQ
Q1. divだらけのコードが続いている
<div> を <header>、<nav>、<article>、<section>、<button>、<aside>、<footer> などのセマンティック要素に置き換える。A11yとSEOに貢献。
Q2. marginがcollapseして困る
縦方向の隣接marginは相殺。Flexbox / Gridを使えば起きない。padding で代替も可。
Q3. position: absoluteで親基準にならない
親に position: relative を付ける必要がある(またはabsolute / fixed)。
Q4. z-indexが効かない
position が必要。スタッキングコンテキストの確認。
Q5. 中央寄せができない
display: flex;
justify-content: center;
align-items: center;
これで縦横中央。
Q6. 100vhがiPhoneでおかしい
100dvh(dynamic viewport height)を使う。
Q7. メディアクエリが多すぎる
clamp() / min() / max() で連続レスポンシブにする。
Q8. レイアウトが崩れる
box-sizing: border-box を全体に。Reset CSS / Normalize.cssも検討。
Q9. アクセシビリティどう確認？
Lighthouse、axe DevTools、スクリーンリーダー(VoiceOver / NVDA)で実機確認。
Q10. CSS-in-JSとTailwindどっち？
CSS-in-JS: 動的スタイル、コンポーネント中心
Tailwind: ユーティリティクラス、高速、デザインシステム
新規プロジェクトはTailwindが多数派。
Q11. ダークモード対応
@media (prefers-color-scheme: dark) { ... }
[data-theme="dark"] { ... }
CSS変数で値を切り替え。
Q12. 印刷スタイル
@media print {
nav, .ads { display: none; }
a::after { content: " (" attr(href) ")"; }
}
Q13. アクセシビリティの基本3点
1. セマンティックHTML
2. キーボード操作
3. alt / label / aria-label
Q14. CSSの特殊文字
.foo\:bar { ... } /* class="foo:bar" 用エスケープ */
.\35 0\% { ... } /* class="50%" */
Q15. CSSリセット必要？
モダンCSSではNormalize / Resetの必要性は減ったが、* { box-sizing: border-box; margin: 0; } あたりは入れておくと安心。
27. 実践パターン集
27-1. ハンバーガーメニュー(CSSのみ)
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">☰</label>
<nav class="menu">...</nav>
#menu-toggle { display: none; }
.menu { display: none; }
#menu-toggle:checked ~ .menu { display: block; }
27-2. カードホバー
.card {
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
27-3. レスポンシブグリッド
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
27-4. スティッキーフッタ
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1; }
27-5. 中央寄せ完全版
.center {
display: grid;
place-items: center;
min-height: 100vh;
}
28. 学習ロードマップ(30日)
Week 1: HTML基礎
- DOCTYPE / html / head / body
- セマンティック要素
- フォーム
- アクセシビリティ基礎
Week 2: CSS基礎
- セレクタ・カスケード
- ボックスモデル
- 色・フォント
- position
Week 3: モダンレイアウト
- Flexbox完全マスター
- CSS Grid
- レスポンシブ
- CSS変数
Week 4: 実践
- 自分のサイトを作る
- Tailwindを試す
- Lighthouseで監査
- DevTools駆使
29. 用語集
あ行
- アクセシビリティ(A11y): すべての人が使える設計
- インライン要素: 文中に入るspan/aなど
- オーバーフロー: 内容がはみ出る挙動
か行
さ行
- 詳細度(specificity): セレクタの強さ
- 疑似クラス: :hover / :focus等
- 疑似要素: ::before / ::after等
た行
- タイポグラフィ: 文字組み
- トランジション: スタイル変化のアニメ
な行
は行
- ビューポート: ブラウザ表示領域
- フレックスボックス: 1次元レイアウト
- プリプロセッサ: Sass / Less
ま行
- メディアクエリ: 画面サイズ等で条件分岐
A〜Z
- A11y: Accessibility(11文字)
- ARIA: Accessible Rich Internet Applications
- BEM: Block Element Modifier
- CLS: Cumulative Layout Shift
- DOM: Document Object Model
- FOIT/FOUT: Flash of Invisible/Unstyled Text
- LCP: Largest Contentful Paint
- OG: Open Graph
- SVG: Scalable Vector Graphics
- WAI-ARIA: Web Accessibility Initiative ARIA
- WCAG: Web Content Accessibility Guidelines
発展: CSS設計とアクセシビリティ
ここからはHTML/CSSの各機能を 実例とともに深掘り。レイアウト、レスポンシブ、アニメーション、アクセシビリティ、CSS Grid、現代的機能(@layer、:has、Container Queries)まで詳細に。
31. CSSのカスケードとレイヤー
31-1. カスケードの優先順位
1. 重要度(!important)
2. オリジン
- User Agent(ブラウザデフォルト)
- User(ユーザスタイル)
- Author(開発者スタイル)
3. レイヤー(@layer、新しい)
4. 詳細度
5. 出現順序
31-2. @layer(カスケードレイヤー)
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
body { font-family: sans-serif; }
}
@layer components {
.button { padding: 8px 16px; }
}
@layer utilities {
.mt-4 { margin-top: 16px; }
}
「詳細度ではなくレイヤー順序で優先順位」を制御。!important 地獄を避ける現代的解決策。
31-3. @layerの実用例
@layer base {
button { background: gray; color: white; }
}
@layer overrides {
button.primary { background: blue; }
}
/* layerに属さないルールは最も強い */
button.special { background: red; }
reset → base → components → utilities という順序付けで CSSの混乱を整理。
31-4. このセクションのまとめ
- カスケードは複雑だが体系化されている
- @layerで意図的な優先順位制御
- !importantより @layerが現代的
- Tailwind / shadcnでも採用
32. Flexbox完全活用
32-1. 親プロパティの全て
.flex-container {
display: flex; /* またはinline-flex */
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
flex-flow: row wrap; /* direction + wrapの短縮 */
justify-content: center; /* 主軸の整列 */
align-items: center; /* 交差軸の整列(単一行)*/
align-content: center; /* 交差軸の整列(複数行時)*/
gap: 1rem; /* 隙間 */
row-gap: 1rem;
column-gap: 0.5rem;
}
32-2. justify-content / align-itemsの値
flex-start開始側
flex-end終了側
center中央
space-between両端配置
space-around各要素に均等な間隔
space-evenly完全に均等
align-items:
stretch高さを揃える(default)
baselineベースライン揃え
32-3. 子プロパティの全て
.flex-item {
flex: 1; /* grow=1, shrink=1, basis=0 */
flex-grow: 1; /* 余白を分け合う比率 */
flex-shrink: 0; /* 縮まない */
flex-basis: 200px; /* 基本サイズ */
align-self: flex-end; /* 自分だけ別の整列 */
order: -1; /* 表示順序を変更 */
}
32-4. レイアウト実例
中央寄せ
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
等間隔ナビ
nav {
display: flex;
justify-content: space-between;
padding: 1rem;
}
サイドバー + メイン
.layout {
display: flex;
gap: 1rem;
}
.sidebar {
flex: 0 0 250px; /* 固定幅 */
}
.main {
flex: 1; /* 残り全部 */
}
スティッキーフッタ
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* 残り全部 = フッタを下へ押す */
}
32-5. このセクションのまとめ
- 1次元レイアウト(横or縦)
- justify-content(主軸)/ align-items(交差軸)
- flex: 1で柔軟な伸縮
- gapで隙間(marginより便利)
- align-selfで個別調整
33. CSS Grid完全活用
33-1. grid-templateの全て
.grid {
display: grid;
/* 列の定義 */
grid-template-columns: 100px 1fr 2fr; /* 3列 */
grid-template-columns: repeat(3, 1fr); /* 等幅3列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自動 */
grid-template-columns: minmax(200px, 1fr) 2fr;
/* 行の定義 */
grid-template-rows: auto 1fr auto; /* header / main / footer */
/* 領域定義 */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 1rem;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
33-2. グリッドアイテムの配置
.item {
grid-column: 1 / 3; /* 1〜3列目(2列分)*/
grid-row: 2 / span 3; /* 2行目から3行分 */
grid-column: 1 / -1; /* 1から最後まで(全幅)*/
}
/* 名前付き */
.item {
grid-column: main-start / main-end;
}
/* 短縮 */
.item {
grid-area: 1 / 1 / 3 / 3; /* row-start col-start row-end col-end */
}
33-3. レスポンシブグリッド
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
「最低250px、入る分だけ列を増やす」。メディアクエリなしで完全レスポンシブ。
33-4. 12カラムグリッド
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
Bootstrap風。
33-5. Subgrid
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* 親のグリッドを継承 */
}
入れ子グリッドが親に揃う。長年の願望機能がモダンブラウザで実装。
33-6. Flexbox vs Grid
Flexbox: 1次元(横一列or縦一列)、コンテンツ駆動
Grid: 2次元(行と列)、レイアウト駆動
組み合わせて使う:
外側: Gridでページ全体
内側: Flexboxで各セクションのレイアウト
33-7. このセクションのまとめ
- 2次元レイアウト
- grid-template-columns / rows / areas
- repeat(auto-fill, minmax(...)) で自動レスポンシブ
- subgridで入れ子の整列
- FlexboxとGridは補完
34. レスポンシブデザイン詳細
34-1. ブレークポイント設計
/* モバイルファースト */
.container { padding: 1rem; }
@media (min-width: 640px) { /* タブレット縦 */
.container { padding: 2rem; }
}
@media (min-width: 768px) { /* タブレット横 */
...
}
@media (min-width: 1024px) { /* デスクトップ */
...
}
@media (min-width: 1280px) { /* 大画面 */
...
}
「モバイルから徐々に広げる」のが現代の主流。
34-2. メディアクエリの種類
/* 画面サイズ */
@media (min-width: 768px) { ... }
@media (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 1023px) { ... }
/* 向き */
@media (orientation: landscape) { ... }
@media (orientation: portrait) { ... }
/* 解像度 */
@media (min-resolution: 2dppx) { ... } /* Retina */
/* ユーザ設定 */
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (prefers-contrast: high) { ... }
/* hover可能 */
@media (hover: hover) { ... } /* マウス */
@media (hover: none) { ... } /* タッチ */
/* print */
@media print { ... }
34-3. Container Queries(モダン)
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card { display: flex; }
}
「ビューポートではなく、親要素のサイズ」でレスポンシブ。コンポーネント単位で完結。長年の願望機能。
34-4. fluid typography
:root {
--fluid-min: 16px;
--fluid-max: 24px;
--fluid-vw: 1.5vw;
font-size: clamp(var(--fluid-min), var(--fluid-vw), var(--fluid-max));
}
h1 {
font-size: clamp(1.5rem, 4vw + 1rem, 4rem);
}
clamp(min, ideal, max) で メディアクエリなしの連続的レスポンシブ。
34-5. Modern viewport units
.full-height {
height: 100vh; /* viewport height */
height: 100dvh; /* dynamic(モバイルURL bar考慮)*/
height: 100svh; /* small(最小)*/
height: 100lvh; /* large(最大)*/
}
iPhone Safariの アドレスバー問題に対応。
34-6. このセクションのまとめ
- モバイルファースト + min-width
- prefers-color-schemeでダークモード
- Container Queriesでコンポーネントレスポンシブ
- clamp() で連続的レスポンシブ
- dvhで正しいモバイル全画面
35. CSS変数(Custom Properties)詳細
35-1. 基本
:root {
--primary: #3b82f6;
--secondary: #8b5cf6;
--space-md: 1rem;
--space-lg: 2rem;
--font-base: -apple-system, sans-serif;
}
.button {
background: var(--primary);
padding: var(--space-md);
font-family: var(--font-base);
}
35-2. デフォルト値
.element {
color: var(--text-color, black); /* 未定義ならblack */
margin: var(--gap, var(--default-gap, 1rem)); /* ネスト */
}
35-3. テーマ切り替え
:root {
--bg: white;
--text: black;
}
[data-theme="dark"] {
--bg: #1a1a1a;
--text: white;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
document.documentElement.setAttribute('data-theme', 'dark');
35-4. JSから動的に変更
document.documentElement.style.setProperty('--primary', '#ff0000');
const value = getComputedStyle(document.documentElement).getPropertyValue('--primary');
35-5. スコープ(カスケード)
.parent {
--color: red;
}
.parent .child {
color: var(--color); /* red */
}
.parent.special {
--color: blue; /* 子全部blue */
}
CSS変数は カスケードするので、親で定義すると子全部に伝わる。
35-6. このセクションのまとめ
- :rootでグローバル変数
- var(--name, fallback) でデフォルト
- data-themeでテーマ切替
- JSからsetPropertyで動的変更
- カスケードで継承
36. CSSアニメーションとトランジション
36-1. transition
.button {
background: blue;
transform: scale(1);
transition:
background 0.3s ease,
transform 0.2s ease-out 0.1s; /* delay 0.1s */
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
timing function
linear一定速度
easeデフォルト
ease-in
ease-out
ease-in-out
cubic-bezier(0.25, 0.1, 0.25, 1) カスタム
steps(5) ステップ
36-2. @keyframesとanimation
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fade-in {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.spinner {
animation: spin 1s linear infinite;
}
.fade-in {
animation: fade-in 0.5s ease-out forwards;
}
/* 短縮 */
.element {
animation: name 1s ease 0s 1 normal forwards;
/* name dur tf delay count direction fill */
}
animation-fill-mode
none開始前後はデフォルトに
forwards終了状態を維持
backwards開始前は最初の状態
both forwards + backwards
36-3. パフォーマンス
/* 高速(GPU合成) */
transform: translateX(100px);
opacity: 0.5;
/* 遅い(レイアウト/ペイント発生)*/
left: 100px;
width: 200px;
background-color: red;
「transformとopacityだけ」アニメーションするのが性能の鍵。
36-4. will-change
.element {
will-change: transform; /* ブラウザに最適化を予告 */
}
GPUレイヤーへ昇格。乱用するとメモリを消費。
36-5. prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
ユーザの設定を尊重。A11y必須。
36-6. このセクションのまとめ
- transitionで属性変化のアニメ
- @keyframes + animationでフレーム指定
- transform / opacityが最速
- will-changeはヒント、控えめに
- prefers-reduced-motionで配慮
37. アクセシビリティ深掘り
37-1. semantic HTMLが基本
<!-- Bad -->
<div class="button" onclick="...">Click</div>
<!-- Good -->
<button onclick="...">Click</button>
スクリーンリーダーが「ボタン」と認識、Enter / Spaceで操作可能。
37-2. ARIAの3原則
1. ネイティブ要素を優先(<button> > div role="button")
2. ARIAを使うなら正しく
3. すべての操作可能要素はキーボードでも操作可能
37-3. ARIA rolesとstates
<!-- ボタンの状態 -->
<button aria-pressed="false">Toggle</button>
<button aria-expanded="false">Menu</button>
<button aria-disabled="true">Disabled</button>
<!-- ライブリージョン -->
<div role="alert">エラー！</div>
<div aria-live="polite">通知...</div>
<!-- カスタム要素 -->
<div role="tablist">
<div role="tab" aria-selected="true">Tab 1</div>
<div role="tab" aria-selected="false">Tab 2</div>
</div>
<div role="tabpanel">Content</div>
37-4. キーボードナビゲーション
/* フォーカススタイル(重要！)*/
:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
/* outlineを消すなら別の指標を */
button:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.4);
}
フォーカスを見えるようにするのはA11yの基本。
37-5. skip link
<a href="#main" class="skip-link">Skip to main content</a>
<nav>...</nav>
<main id="main">...</main>
.skip-link {
position: absolute;
top: -40px;
left: 0;
}
.skip-link:focus {
top: 0;
}
スクリーンリーダーやキーボードユーザがナビをスキップしてメインに飛べる。
37-6. コントラスト比
WCAG AA: 通常テキスト4.5:1、大きいテキスト3:1
WCAG AAA: 通常7:1、大きい4.5:1
ツール: Lighthouse、axe DevTools、Chrome DevToolsのColor picker。
37-7. フォームA11y
<label for="email">メール</label>
<input type="email" id="email" name="email" required aria-describedby="email-hint">
<small id="email-hint">例: name@example.com</small>
<!-- エラー -->
<input type="email" aria-invalid="true" aria-describedby="email-error">
<div id="email-error" role="alert">不正な形式です</div>
37-8. このセクションのまとめ
- semantic HTML第一
- ARIAは補助
- キーボード操作可能
- フォーカス可視化
- skip linkでナビ飛ばし
- コントラスト4.5:1(WCAG AA)
- label / aria-describedbyでフォーム
38. CSSの現代的機能
38-1. :has() 親セレクタ
/* 子にimgを持つcard */
.card:has(img) {
padding: 0;
}
/* チェック済みのチェックボックスを持つラベル */
label:has(input:checked) {
background: lightblue;
}
/* 入力が無効なform */
form:has(input:invalid) {
border: 2px solid red;
}
「子要素を持つ親」を選択。長年待望された機能。
38-2. :is() / :where()
/* 重複削減 */
.card :is(h1, h2, h3) {
margin-top: 0;
}
/* 等価: .card h1, .card h2, .card h3 */
/* :where() は詳細度0 */
:where(.button, .link):hover {
opacity: 0.8;
}
38-3. nesting(CSSネスト)
.card {
padding: 1rem;
& .title {
font-size: 1.5rem;
}
&:hover {
background: lightgray;
}
@media (min-width: 768px) {
padding: 2rem;
}
}
Sass / Lessと同じ書き方が CSS標準で可能に。
38-4. modern color functions
color: oklch(70% 0.15 200);
color: lab(50% 30 -50);
color: hwb(120 0% 50%);
color: color-mix(in srgb, red 50%, blue 50%);
color: light-dark(black, white); /* テーマ自動 */
/* 相対色 */
color: oklch(from var(--base) calc(l - 10%) c h);
38-5. scroll-driven animations(実験的)
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fade auto;
animation-timeline: scroll();
}
スクロールに応じてアニメ。Chrome 115+。
38-6. View Transitions API
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
}
document.startViewTransition(() => {
updateDOM();
});
「ページ遷移をアニメ化」するAPI。
38-7. このセクションのまとめ
- :has() で親セレクタ
- :is() / :where() でグループ化
- ネスト書き
- oklch / color-mix / light-dark
- scroll-driven animations
- View Transitions
39. CSS-in-JSと現代の選択
39-1. 主要なCSS-in-JSライブラリ
styled-components: テンプレートリテラル
Emotion: styled-components互換 + 軽量
CSS Modules: ファイル単位でスコープ
vanilla-extract: 型安全なCSS-in-TS
linaria: ゼロランタイム
39-2. styled-components
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
`;
<Button primary>Click me</Button>
39-3. Tailwind CSS
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Click me
</button>
ユーティリティファースト。classを組み合わせてスタイル。現代の主流。
39-4. shadcn/ui
npx shadcn-ui@latest add button
「コピペ可能なコンポーネント」配信モデル。Tailwind + Radix UIベース。現代のReact/Next.jsの主流。
39-5. このセクションのまとめ
- styled-components / Emotion: CSS-in-JS
- CSS Modules: スコープ化
- Tailwind: ユーティリティクラス
- shadcn/ui: コピペコンポーネント
- 用途・チームで選ぶ
40. ツールとビルドパイプライン
40-1. Sass / SCSS
$primary: blue;
.card {
color: $primary;
.title {
font-weight: bold;
}
&:hover {
background: lightblue;
}
}
@mixin button($color) {
padding: 8px 16px;
background: $color;
border: none;
}
.btn-primary {
@include button(blue);
}
CSSネストが標準化された今は必要性が減ったが、変数・mixin・関数は依然便利。
40-2. PostCSS
npm install postcss autoprefixer postcss-import postcss-nested
CSS変換ツール。Autoprefixer(vendor prefix自動)、postcss-preset-env(新機能を古いブラウザで)。
40-3. Vite
npm create vite@latest my-app
cd my-app
npm install
npm run dev
超高速dev server。Sass / PostCSS / CSS Modulesすべて統合。現代の標準。
40-4. CSSのminifyとバンドル
- Vite / Webpack / Parcelが自動で
- minifyで改行・スペース除去
- 1ファイルにバンドル
- gzip / brotli圧縮
40-5. このセクションのまとめ
- Sassはネスト・変数・mixinに
- PostCSSで変換
- Viteが現代の標準
- 自動minify / bundle
41. パフォーマンス最適化
41-1. Critical CSS
<head>
<style>
/* Above-the-foldの最小スタイル */
body { font-family: sans-serif; margin: 0; }
.hero { ... }
</style>
<link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'">
</head>
「最初に見える部分のスタイルだけインラインで」、残りは非同期読み込み。
41-2. Font loading
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap; /* フォント読み込み中もテキスト表示 */
/* font-display: optionalはもっと厳密 */
}
41-3. 画像最適化
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero" width="800" height="600" loading="lazy">
</picture>
画像形式の優先順位:
AVIF > WebP > JPEG(写真)
AVIF > WebP > PNG(透過)
SVG(アイコン・ロゴ)
41-4. CSS containment
.widget {
contain: layout paint;
}
「この要素のレイアウト・ペイントは外に影響しない」と保証。ブラウザが効率化。
41-5. content-visibility
.section {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* 仮のサイズ */
}
ビューポート外を レンダーしない。長いページで効果絶大。
41-6. このセクションのまとめ
- Critical CSSをインライン
- font-display: swapでFOUT回避
- AVIF / WebPで画像軽量化
- contain / content-visibilityで局所化
- Core Web Vitalsを継続監視
42. デバッグ詳細
42-1. Chrome DevToolsの活用
Elements:
- DOM/CSSのリアルタイム編集
- Computedで実際の値
- Box Model可視化
- Layout(Flexbox/Grid)バッジ
Lighthouse:
- Performance / Accessibility / SEO / Best Practices
Coverage:
- 未使用CSS/JSを検出
- リファクタリングのヒント
Performance:
- レンダリング解析
- 長いタスク検出
Network:
- リクエスト確認
- キャッシュ確認
42-2. CSSデバッグの技
/* 全要素に枠 */
* { outline: 1px solid red; }
/* エラー検出 */
[role="button"][onclick] { outline: 4px solid red; } /* buttonタグを使うべき */
/* レイアウトトラブル */
.flex-container { background: rgba(255, 0, 0, 0.1); }
42-3. このセクションのまとめ
- DevToolsのElementsでリアルタイム
- Lighthouseで品質監査
- Coverageで未使用検出
- outline / backgroundで可視化
43. CSSフレームワーク詳細
43-1. Tailwind CSS
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
<img class="w-12 h-12 rounded-full" src="..." alt="">
<div>
<h3 class="text-lg font-semibold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
</div>
ユーティリティファースト。classを覚えれば早い、設計が分散しがちという賛否両論。
tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
primary: '#3b82f6',
},
},
},
};
43-2. Bootstrap
<div class="container">
<div class="row">
<div class="col-md-6">Left</div>
<div class="col-md-6">Right</div>
</div>
</div>
伝統的、コンポーネント豊富。
43-3. shadcn/ui
npx shadcn-ui@latest init
npx shadcn-ui@latest add button
「コピペで導入」型コンポーネント。Tailwind + Radix UI。React/Next.jsで2024年の主流。
43-4. このセクションのまとめ
- Tailwind: ユーティリティ、生産性
- Bootstrap: コンポーネント、伝統
- shadcn/ui: コピペ、現代主流
- Radix UI: ヘッドレス、A11y
44. SEOとHTML構造
44-1. 適切なタグ
<head>
<title>具体的なページタイトル | サイト名</title>
<meta name="description" content="120-160文字のページ説明">
<link rel="canonical" href="https://example.com/page">
</head>
<body>
<h1>主見出し(1ページに1つ)</h1>
<article>
<h2>節</h2>
<p>...</p>
</article>
</body>
44-2. 構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"image": "https://example.com/image.jpg",
"author": {
"@type": "Person",
"name": "Author Name"
},
"datePublished": "2024-04-29",
"publisher": {
"@type": "Organization",
"name": "Publisher"
}
}
</script>
リッチスニペット用。
44-3. Open Graph
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="...">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sitehandle">
44-4. Core Web Vitals
LCP(Largest Contentful Paint): 2.5s以下
INP(Interaction to Next Paint): 200ms以下
CLS(Cumulative Layout Shift): 0.1以下
Googleの検索順位指標。Lighthouse / PageSpeed Insightsで測定。
44-5. このセクションのまとめ
- title / description / canonical
- 1ページにh1一つ
- semantic HTML
- 構造化データ + OG
- Core Web Vitals改善
- alt属性、A11yもSEOに効く
45. ブラウザ互換性詳細
caniuse.comで機能ごとに確認
サポート状況:
Latest 2 versions of major browsersが現代の最低ライン
IE 11はもはや無視(公式サポート終了)
確認方法:
caniuse.com
MDNの各ページにBrowser compatibilityあり
@supportsで動的判定
@supports (display: grid) {
.layout { display: grid; }
}
@supports not (backdrop-filter: blur(10px)) {
.glass { background: rgba(255,255,255,0.9); }
}
46. CSSアンチパターン集
1. !importantの乱用
2. 詳細度の高すぎるセレクタ(#main .container > div.box.active)
3. インラインスタイル
4. tagNameセレクタの過度使用(p { ... })
5. レイアウト目的のtable
6. 100vhでiPhoneのバグ
7. transform以外でアニメーション
8. メディアクエリの乱発(clampで済む場合)
9. 色のハードコード(変数化)
10. 命名なしのクラス(.box1, .div-2)
CSSのアンチパターンは、見た目が崩れる瞬間よりも、変更できなくなる過程で問題になる。!important や詳細度の高いセレクタは短期的には効くが、次の修正でさらに強い指定が必要になる。結果として、どこを直せばよいか分からないスタイルシートになる。
避けるには、コンポーネント単位の命名、低い詳細度、デザイントークン、レイアウト責務の分離を徹底する。色、余白、フォント、影を直接ばらまかず、意味のある変数やユーティリティへ寄せる。CSSは小さな例では簡単だが、規模が出るほど「上書きしない設計」が効いてくる。
47. HTML/CSS拡張FAQ
Q1. divかsectionかarticleか
section: 一般的なセクション、見出しを持つ
article: 独立して意味を持つコンテンツ
div: セマンティクスがない、最後の手段
Q2. CSS GridかFlexboxか
2次元ならGrid、1次元ならFlexbox。両方使ってもいい。
Q3. remとemの違い
rem: ルート(html)のフォントサイズ基準
em: 親要素のフォントサイズ基準
rem が予測しやすく推奨。
Q4. Tailwindで混乱
最初はclassが長くて辛いが、慣れると速い。コンポーネント化でクラスを再利用。
Q5. CSS Modules vs Tailwind
CSS Modules: ファイル単位でスコープ、伝統的
Tailwind: ユーティリティ、生産性
新規プロジェクトはTailwind系が増えている。
Q6. ダークモードの実装
@media (prefers-color-scheme: dark) { ... }
[data-theme="dark"] { ... }
CSS変数 + data属性 + JSで切替。
Q7. メディアクエリのブレークポイント
640 / 768 / 1024 / 1280が一般的(Tailwindデフォルト)
プロジェクトに応じて調整
Q8. アクセシビリティ確認方法
- Lighthouse Audit
- axe DevTools
- スクリーンリーダー(VoiceOver / NVDA)
- キーボードのみで操作
- コントラストチェッカー
Q9. CSS-in-JSとTailwind共存
可能。Tailwindでデザインシステム、CSS-in-JSで動的スタイル。
Q10. View Transitions API
document.startViewTransition(() => {
updateDOM();
});
ページ遷移をアニメ化。Chrome / Edge / Safari 18+。
48. HTML/CSS学習ロードマップ
Week 1: HTML基礎
- HTML5構造
- セマンティック要素
- フォーム
- メタ情報
Week 2: CSS基礎
- セレクタ、カスケード
- ボックスモデル
- 色、フォント
- position
Week 3: モダンレイアウト
- Flexbox完全マスター
- CSS Grid
- レスポンシブデザイン
- CSS変数
Week 4: 実践
- アクセシビリティ
- パフォーマンス(Critical CSS)
- アニメーション
- ダークモード
Week 5: ツール
- Sass / PostCSS
- Vite
- Tailwind CSS
- shadcn/ui
Week 6: 上級
- :has() / Container Queries
- View Transitions
- scroll-driven animations
- CSS containment
49. HTML/CSS用語集
あ行
- アクセシビリティ(A11y): 全員が使える設計
- インライン要素: 文中に並ぶ要素
か行
さ行
- 詳細度(specificity): セレクタの強さ
- 疑似クラス: :hover / :focus等
- 疑似要素: ::before / ::after等
た行
- タイポグラフィ: 文字組み
- トランジション: 属性変化アニメ
は行
- ビューポート: ブラウザ表示領域
- フレックスボックス: 1次元レイアウト
- プリプロセッサ: Sass / Less
ま行
- メディアクエリ: 画面サイズで条件分岐
A〜Z
- A11y: Accessibility
- ARIA: Accessible Rich Internet Applications
- BEM: Block Element Modifier
- CLS: Cumulative Layout Shift
- DOM: Document Object Model
- FOIT/FOUT: Flash of Invisible/Unstyled Text
- LCP: Largest Contentful Paint
- OG: Open Graph
- SVG: Scalable Vector Graphics
- WCAG: Web Content Accessibility Guidelines
実践: プロジェクト構成
51. 実装パターン集
51-1. ヒーローセクション
<section class="hero">
<div class="hero-content">
<h1>Hero Title</h1>
<p>Subtitle</p>
<a href="#cta" class="button">Get Started</a>
</div>
</section>
.hero {
min-height: 80vh;
display: grid;
place-items: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-align: center;
}
.hero-content {
max-width: 600px;
padding: 2rem;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
margin-bottom: 1rem;
}
51-2. カード
<article class="card">
<img src="thumb.jpg" alt="">
<div class="card-body">
<h3>Title</h3>
<p>Description</p>
<a href="#">Read more</a>
</div>
</article>
.card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card-body {
padding: 1rem;
}
51-3. ナビゲーション
<nav class="nav">
<a href="/" class="logo">Logo</a>
<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="menu-button">☰</label>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.menu {
display: flex;
gap: 1.5rem;
list-style: none;
}
@media (max-width: 768px) {
.menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: white;
}
.menu-button {
display: block;
font-size: 1.5rem;
cursor: pointer;
}
#menu-toggle:checked ~ .menu {
display: flex;
}
}
「JSなしのモバイルメニュー」。
51-4. モーダル
<dialog id="my-dialog">
<h2>Modal Title</h2>
<p>Content</p>
<button onclick="this.parentElement.close()">Close</button>
</dialog>
<button onclick="document.getElementById('my-dialog').showModal()">Open</button>
<dialog> 要素は モダンブラウザ標準で、自動でmodal表示・フォーカストラップ・ESCで閉じる。
51-5. このセクションのまとめ
- ヒーロー: grid place-items: center
- カード: hover transition + transform
- ナビ: flex + checkbox hack
- モーダル: <dialog> 標準
52. アニメーション実例
52-1. ボタンのhover
.button {
background: blue;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.button:hover {
background: darkblue;
}
.button:active {
transform: scale(0.98);
}
52-2. ローディングスピナ
<div class="spinner"></div>
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
52-3. fade-in(スクロール時)
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s, transform 0.6s;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('visible');
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
52-4. このセクションのまとめ
- transitionで属性変化
- @keyframes + animationで繰り返し
- IntersectionObserverでスクロール連動
- transform / opacityが高速
53. 実プロジェクトの構成例
my-app/
├── index.html
├── css/
│ ├── reset.css # 標準化(normalize.css等)
│ ├── variables.css # CSS変数
│ ├── base.css # body / typography
│ ├── layout.css # grid / flexbox
│ ├── components/
│ │ ├── button.css
│ │ ├── card.css
│ │ └── nav.css
│ ├── utilities.css # ユーティリティクラス
│ └── main.css # @importを集約
├── js/
└── assets/
またはTailwindなら:
my-app/
├── index.html
├── styles/
│ └── globals.css # Tailwindディレクティブ
├── tailwind.config.js
└── ...
54. CSSフレームワーク選択ガイド
小規模 / 個人:
Tailwindが無難
またはvanilla CSS
中規模:
Tailwind + shadcn/ui
大規模 / デザインシステム:
独自CSS(Sass + BEM)
またはTailwind + 独自コンポーネント
エンタープライズ:
Bootstrap(既存資産)
Material UI(React)
参照: HTML/CSSリファレンス
56. すべてのCSSプロパティ(カテゴリ別)
56-1. ボックスモデル
display, position, top, right, bottom, left, z-index, float, clear,
width, height, min/max-width/height, aspect-ratio,
margin, padding, border, box-sizing, outline, overflow
56-2. Flexbox
flex-direction, flex-wrap, flex-flow,
justify-content, align-items, align-content,
flex-grow, flex-shrink, flex-basis, flex,
align-self, order, gap, row-gap, column-gap
56-3. Grid
grid-template-rows, grid-template-columns, grid-template-areas,
grid-row, grid-column, grid-area,
gap, justify-items, align-items, place-items,
justify-content, align-content, place-content,
justify-self, align-self
56-4. テキスト
font-family, font-size, font-weight, font-style, font-variant,
line-height, letter-spacing, word-spacing,
text-align, text-decoration, text-transform, text-shadow,
text-overflow, white-space, word-break, overflow-wrap,
direction, writing-mode
56-5. 背景
background-color, background-image, background-position,
background-size, background-repeat, background-attachment,
background-origin, background-clip, background-blend-mode,
background(短縮)
56-6. ボーダー
border-width, border-style, border-color,
border-radius, border-top-left-radius, ...,
border-image, border-collapse, border-spacing
56-7. アニメーション
transition, transition-property, transition-duration,
transition-timing-function, transition-delay,
animation, animation-name, animation-duration,
animation-timing-function, animation-delay,
animation-iteration-count, animation-direction,
animation-fill-mode, animation-play-state,
@keyframes
57. すべてのHTML要素(カテゴリ別)
57-1. メタデータ
html, head, title, base, link, meta, style, script, noscript
57-2. セクショニング
body, header, nav, main, article, section, aside, footer,
h1〜h6, hgroup, address, search
57-3. テキスト
p, hr, pre, blockquote, ol, ul, menu, li, dl, dt, dd,
figure, figcaption, div
57-4. インラインテキスト
a, em, strong, small, s, cite, q, dfn, abbr, ruby, rt, rp,
data, time, code, var, samp, kbd, sub, sup, i, b, u, mark,
bdi, bdo, span, br, wbr
57-5. 埋め込み
img, picture, source, iframe, embed, object, video, audio,
track, map, area, math, svg
57-6. テーブル
table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td
57-7. フォーム
form, label, input, button, select, datalist, optgroup, option,
textarea, output, progress, meter, fieldset, legend
57-8. インタラクティブ
details, summary, dialog
57-9. スクリプト
script, noscript, template, slot, canvas
58. CSS Selector完全リファレンス
/* 単純 */
* 全要素
elemタグ名
.classクラス
#id ID
/* 属性 */
[attr] 属性あり
[attr="value"] 完全一致
[attr~="word"] 単語一致
[attr|="lang"] 言語サブコード
[attr^="prefix"] 前方一致
[attr$="suffix"] 後方一致
[attr*="substr"] 部分一致
[attr operator value i] 大文字小文字無視
/* 関係 */
A B子孫
A > B直接の子
A + B直後の兄弟
A ~ Bすべての後の兄弟
/* 疑似クラス */
:hover, :focus, :active, :visited, :link
:focus-visible, :focus-within
:checked, :disabled, :enabled, :required, :optional
:valid, :invalid
:first-child, :last-child, :nth-child(n)
:first-of-type, :last-of-type, :nth-of-type(n)
:only-child, :only-of-type
:empty, :root, :target
:not(selector), :is(s1, s2), :where(s1, s2)
:has(selector), :scope, :default
:lang(en), :dir(ltr)
:placeholder-shown, :read-only, :read-write
:in-range, :out-of-range
:user-invalid(モダン)
:state(custom)(モダン、Custom Element)
/* 疑似要素 */
::before, ::after
::first-line, ::first-letter
::placeholder, ::selection
::marker, ::backdrop
::file-selector-button
::view-transition*(モダン)
59. CSSの単位
絶対:
pxピクセル
pt, pc印刷
cm, mm, in物理的
相対:
em親フォントサイズ
remルートフォントサイズ
ex, ch文字基準
ビューポート:
vw, vh viewportの1%
vmin小さい方の1%
vmax大きい方の1%
dvw, dvh dynamic(モバイルURL bar考慮)
svw, svh small(最小)
lvw, lvh large(最大)
その他:
% 親要素相対
deg角度
rad, turn角度
s, ms時間
fr grid分数
Q 1/4mm
60. 完全なスターターテンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#3b82f6">
<title>サイト名</title>
<meta name="description" content="ページの説明">
<link rel="canonical" href="https://example.com/">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="サイト名">
<meta property="og:description" content="...">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@handle">
<!-- スタイル -->
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
<nav>...</nav>
</header>
<main id="main">...</main>
<footer>...</footer>
<script src="/script.js" defer></script>
</body>
</html>
61. CSS Reset / Normalize
/* シンプルなモダンReset */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
Josh Comeauの有名なリセット。
補遺: 応用パターン
63. 完全な1ページサイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<style>
:root {
--primary: #3b82f6;
--bg: #ffffff;
--text: #1a1a1a;
--muted: #6b7280;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #ffffff;
--muted: #9ca3af;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, sans-serif;
line-height: 1.6;
background: var(--bg);
color: var(--text);
}
.hero {
min-height: 90vh;
display: grid;
place-items: center;
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.hero h1 {
font-size: clamp(2rem, 6vw, 4rem);
margin-bottom: 1rem;
}
.button {
display: inline-block;
padding: 12px 32px;
background: white;
color: var(--primary);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.features {
padding: 4rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature {
text-align: center;
padding: 2rem;
}
.feature h2 {
margin-bottom: 1rem;
color: var(--primary);
}
footer {
padding: 2rem;
text-align: center;
color: var(--muted);
}
</style>
</head>
<body>
<section class="hero">
<div>
<h1>Welcome to Our Service</h1>
<p>The best way to do amazing things</p>
<a href="#features" class="button">Learn More</a>
</div>
</section>
<section id="features" class="features">
<article class="feature">
<h2>Fast</h2>
<p>Lightning-fast performance.</p>
</article>
<article class="feature">
<h2>Reliable</h2>
<p>99.99% uptime guarantee.</p>
</article>
<article class="feature">
<h2>Secure</h2>
<p>Bank-level encryption.</p>
</article>
</section>
<footer>
<p>© 2024 My Company</p>
</footer>
</body>
</html>
これだけで 完全なランディングページ。レスポンシブ、ダークモード、アニメーション全部入り。
64. Formの完全実装
<form id="contact-form" novalidate>
<fieldset>
<legend>お問い合わせ</legend>
<div class="field">
<label for="name">名前 <span class="required">*</span></label>
<input type="text" id="name" name="name" required minlength="2" maxlength="50">
<small class="hint">2文字以上50文字以下</small>
</div>
<div class="field">
<label for="email">メール <span class="required">*</span></label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone" pattern="[0-9-]+">
</div>
<div class="field">
<label for="message">メッセージ <span class="required">*</span></label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div class="field">
<label>
<input type="checkbox" name="agree" required>
プライバシーポリシーに同意します
</label>
</div>
<button type="submit">送信</button>
</fieldset>
</form>
<style>
.field {
margin-bottom: 1rem;
}
.field label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}
.field input,
.field textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 4px;
font: inherit;
}
.field input:focus,
.field textarea:focus {
outline: 2px solid #3b82f6;
outline-offset: -1px;
border-color: #3b82f6;
}
.field input:user-invalid,
.field textarea:user-invalid {
border-color: #ef4444;
}
.required {
color: #ef4444;
}
.hint {
color: #6b7280;
font-size: 0.875rem;
}
button[type="submit"] {
padding: 0.75rem 2rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
</style>
A11y、バリデーション、エラー表示全部入り。
まとめ
HTMLとCSSは、見た目を作るだけの技術ではなく、文書構造、アクセシビリティ、レスポンシブ設計、パフォーマンスを支える基礎です。意味のあるHTMLを先に置き、CSSでレイアウトと状態を整理し、JavaScriptに頼りすぎない構造を作ることが、保守しやすいフロントエンドにつながります。