第4回：CSS基礎

🎯 学習目標

CSSの基本構文を理解する
セレクターの種類と詳細度を理解する
色、フォント、サイズを適切に指定できる
ボックスモデルを完全に理解する

📚 導入（5分）

HTMLからCSSへのステップアップ

これまでHTMLで文書構造を作ってきました。今回からは、その構造に「デザイン」を加えていきます。


<!-- HTML：構造 -->
<h1>タイトル</h1>
 
<!-- CSS：装飾 -->
<style>
h1 {
    color: blue;
    font-size: 32px;
}
</style>

デザインの重要性について

ユーザビリティ向上：見やすく使いやすいサイトに
ブランディング：独自性のあるデザインで差別化
情報の階層化：重要度に応じた視覚的表現

💡 理論学習（30分）

CSSの基本（15分）

CSSの3つの記述方法

1. インライン（非推奨）


<p style="color: red; font-size: 16px;">赤い文字</p>

デメリット：

HTMLとCSSが混在して保守性が低い
再利用できない
詳細度が高すぎる

2. 内部スタイルシート


<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>青い文字</p>
</body>
</html>

メリット：

1ページ完結の場合は管理しやすい
外部ファイルの読み込みが不要

3. 外部スタイルシート（推奨）


<!-- HTML -->
<head>
    <link rel="stylesheet" href="style.css">
</head>


/* style.css */
p {
    color: green;
    font-size: 16px;
}

メリット：

HTMLとCSSの分離
複数ページで共有可能
キャッシュによる高速化

セレクターの種類と詳細度

基本セレクター


/* 要素セレクター */
p {
    color: black;
}
 
/* クラスセレクター */
.highlight {
    background-color: yellow;
}
 
/* IDセレクター */
#header {
    height: 100px;
}
 
/* 全称セレクター */
* {
    margin: 0;
    padding: 0;
}

複合セレクター


/* 子孫セレクター（スペース） */
article p {
    line-height: 1.6;
}
 
/* 子セレクター（>） */
ul > li {
    list-style: none;
}
 
/* 隣接セレクター（+） */
h2 + p {
    margin-top: 0;
}
 
/* 一般兄弟セレクター（~） */
h2 ~ p {
    color: gray;
}
 
/* 複数セレクター（,） */
h1, h2, h3 {
    font-family: sans-serif;
}

属性セレクター


/* 属性の存在 */
input[required] {
    border-color: red;
}
 
/* 属性の値が完全一致 */
input[type="text"] {
    padding: 5px;
}
 
/* 属性の値が部分一致 */
a[href*="google"] {
    color: blue;
}
 
/* 属性の値が前方一致 */
a[href^="https"] {
    font-weight: bold;
}
 
/* 属性の値が後方一致 */
a[href$=".pdf"] {
    background-image: url('pdf-icon.png');
}

疑似クラス


/* リンクの状態 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
 
/* フォーカス状態 */
input:focus {
    outline: 2px solid blue;
}
 
/* 子要素の位置 */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-child(odd) { background: #ffffff; }

疑似要素


/* 最初の文字 */
p::first-letter {
    font-size: 2em;
    float: left;
}
 
/* 最初の行 */
p::first-line {
    font-weight: bold;
}
 
/* 前に挿入 */
.required::before {
    content: "※";
    color: red;
}
 
/* 後に挿入 */
.new::after {
    content: "NEW!";
    color: red;
    font-size: 0.8em;
}

詳細度（Specificity）の計算

詳細度は以下の順で計算されます：

セレクター	詳細度	例
インラインスタイル	1000	`style="..."`
IDセレクター	100	`#header`
クラス・属性・疑似クラス	10	`.class`, `[type]`, `:hover`
要素・疑似要素	1	`p`, `::before`


/* 詳細度: 001 */
p { color: black; }
 
/* 詳細度: 010 */
.text { color: blue; }
 
/* 詳細度: 011 */
p.text { color: green; }
 
/* 詳細度: 100 */
#content { color: red; }
 
/* 詳細度: 110 */
#content .text { color: purple; }
 
/* 詳細度: 111 */
#content p.text { color: orange; }

ボックスモデル（15分）

ボックスモデルの構成要素


.box {
    /* コンテンツ */
    width: 200px;
    height: 100px;
    
    /* パディング（内側の余白） */
    padding: 20px;
    
    /* ボーダー（境界線） */
    border: 5px solid black;
    
    /* マージン（外側の余白） */
    margin: 10px;
}


┌─────────────────────────────┐ ← マージン
│ ┌─────────────────────────┐ │
│ │ ┌───────────────────┐   │ │ ← ボーダー
│ │ │ ┌───────────────┐ │   │ │
│ │ │ │               │ │   │ │ ← パディング
│ │ │ │   コンテンツ    │ │   │ │
│ │ │ │               │ │   │ │
│ │ │ └───────────────┘ │   │ │
│ │ └───────────────────┘   │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

box-sizingプロパティ


/* デフォルト（content-box） */
.box1 {
    box-sizing: content-box;
    width: 200px;  /* コンテンツの幅 */
    padding: 20px;
    border: 5px solid black;
    /* 実際の幅: 200 + 20*2 + 5*2 = 250px */
}
 
/* border-box（推奨） */
.box2 {
    box-sizing: border-box;
    width: 200px;  /* ボーダーまで含めた幅 */
    padding: 20px;
    border: 5px solid black;
    /* 実際の幅: 200px */
}
 
/* すべての要素にborder-boxを適用（推奨） */
*, *::before, *::after {
    box-sizing: border-box;
}

マージンの相殺


/* 垂直マージンは相殺される */
.element1 {
    margin-bottom: 20px;
}
 
.element2 {
    margin-top: 30px;
}
/* 要素間の実際の余白: 30px（大きい方） */

🛠️ 実習（50分）

前回のHTMLにスタイリング適用（45分）

プロジェクト構造


lesson04/
├── index.html
├── css/
│   └── style.css
└── images/
    └── profile.jpg

HTML（index.html）


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山田太郎のポートフォリオ</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="site-header">
        <h1 class="site-title">山田太郎のポートフォリオ</h1>
        <nav class="main-nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="#about" class="nav-link">私について</a></li>
                <li class="nav-item"><a href="#skills" class="nav-link">スキル</a></li>
                <li class="nav-item"><a href="#works" class="nav-link">作品</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="main-content">
        <section id="about" class="section">
            <h2 class="section-title">私について</h2>
            <div class="profile">
                <img src="https://via.placeholder.com/200" alt="プロフィール写真" class="profile-image">
                <div class="profile-text">
                    <p>はじめまして、<span class="highlight">山田太郎</span>です。</p>
                    <p>Web制作の勉強を始めて3ヶ月になります。</p>
                </div>
            </div>
        </section>
        
        <section id="skills" class="section">
            <h2 class="section-title">スキル</h2>
            <div class="skill-list">
                <div class="skill-item">
                    <h3 class="skill-name">HTML</h3>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 70%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <h3 class="skill-name">CSS</h3>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 50%;"></div>
                    </div>
                </div>
                <div class="skill-item">
                    <h3 class="skill-name">JavaScript</h3>
                    <div class="skill-bar">
                        <div class="skill-progress" style="width: 20%;"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer class="site-footer">
        <p class="copyright">&copy; 2024 山田太郎. All rights reserved.</p>
    </footer>
</body>
</html>

CSS（css/style.css）


/* ==========================================
   リセットCSS
========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
/* ==========================================
   基本スタイル
========================================== */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    background-color: #f5f5f5;
}
 
a {
    color: #007bff;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
 
/* ==========================================
   ヘッダー
========================================== */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
 
.site-title {
    text-align: center;
    font-size: 24px;
    color: #333333;
    margin-bottom: 10px;
}
 
.main-nav {
    text-align: center;
}
 
.nav-list {
    list-style: none;
    display: inline-block;
}
 
.nav-item {
    display: inline-block;
    margin: 0 15px;
}
 
.nav-link {
    display: block;
    padding: 5px 10px;
    color: #666666;
    font-weight: bold;
    transition: color 0.3s ease;
}
 
.nav-link:hover {
    color: #007bff;
    text-decoration: none;
}
 
/* ==========================================
   メインコンテンツ
========================================== */
.main-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}
 
.section {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
.section-title {
    font-size: 28px;
    color: #333333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid #007bff;
}
 
/* ==========================================
   プロフィールセクション
========================================== */
.profile {
    display: flex;
    align-items: center;
    gap: 30px;
}
 
.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #007bff;
}
 
.profile-text {
    flex: 1;
}
 
.profile-text p {
    margin-bottom: 10px;
}
 
.highlight {
    background-color: #ffeb3b;
    padding: 2px 4px;
    font-weight: bold;
}
 
/* ==========================================
   スキルセクション
========================================== */
.skill-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
 
.skill-item {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
}
 
.skill-name {
    font-size: 18px;
    margin-bottom: 10px;
    color: #495057;
}
 
.skill-bar {
    width: 100%;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}
 
.skill-progress {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #00bcd4);
    border-radius: 10px;
    transition: width 1s ease;
}
 
/* ==========================================
   フッター
========================================== */
.site-footer {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
}
 
.copyright {
    font-size: 14px;
}
 
/* ==========================================
   レスポンシブ対応（基礎）
========================================== */
@media (max-width: 768px) {
    .site-title {
        font-size: 20px;
    }
    
    .nav-item {
        display: block;
        margin: 5px 0;
    }
    
    .profile {
        flex-direction: column;
        text-align: center;
    }
    
    .section {
        padding: 20px;
    }
    
    .section-title {
        font-size: 24px;
    }
}

スタイリングのポイント

色の指定方法


/* 色の名前 */
color: red;
 
/* 16進数（6桁） */
color: #ff0000;
 
/* 16進数（3桁） */
color: #f00;
 
/* RGB */
color: rgb(255, 0, 0);
 
/* RGBA（透明度付き） */
color: rgba(255, 0, 0, 0.5);
 
/* HSL */
color: hsl(0, 100%, 50%);
 
/* HSLA（透明度付き） */
color: hsla(0, 100%, 50%, 0.5);

フォントの指定


/* フォントファミリー */
font-family: 'Georgia', serif;
 
/* フォントサイズ */
font-size: 16px;    /* ピクセル */
font-size: 1rem;    /* ルート要素の倍率 */
font-size: 1.5em;   /* 親要素の倍率 */
 
/* フォントの太さ */
font-weight: normal;  /* 400 */
font-weight: bold;    /* 700 */
font-weight: 300;     /* 細い */
 
/* フォントスタイル */
font-style: italic;
 
/* 一括指定 */
font: italic bold 16px/1.5 Georgia, serif;

単位の使い分け

単位	説明	使用例
px	絶対単位	ボーダー、細かい調整
%	親要素に対する相対単位	幅、高さ
em	親要素のフォントサイズ基準	余白、サイズ
rem	ルート要素のフォントサイズ基準	フォントサイズ、余白
vw	ビューポート幅の1%	レスポンシブな幅
vh	ビューポート高さの1%	フルスクリーン要素

📝 まとめ・質疑応答（5分）

ボックスモデルの理解確認

✅ チェックリスト

CSSの3つの記述方法を理解した
セレクターの種類を使い分けられる
詳細度の計算ができる
ボックスモデルを理解した
box-sizing: border-boxの利点を理解した

次回予告：Flexboxレイアウト

次回学習する内容：

Flexboxの基本概念
コンテナとアイテムのプロパティ
レスポンシブデザインの基礎
メディアクエリの使い方

🏠 宿題

カラーパレットの作成

5色以上の配色を決める
変数（カスタムプロパティ）で管理


:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
}

タイポグラフィの設定
- 見出し（h1-h6）のスタイル定義
- 本文のフォントサイズと行間の調整
ボタンコンポーネントの作成
- 3種類以上のボタンスタイル
- ホバーエフェクトの実装

📚 参考リソース

次回もお楽しみに！ 🎨