LESSON 30分

ストーリー

先
先輩
HTMLで構造が作れるようになったね。でも、正直に言って今のページ… 見た目がシンプルすぎない？

確かに、白い背景に黒い文字だけで寂しいです…

先
先輩
そこでCSSの出番だよ。CSSを使えば、色、フォント、レイアウトを自由にデザインできるんだ

CSSとは

CSS は Cascading Style Sheets の略で、Webページの 見た目（デザイン） を制御する言語です。

HTMLとCSSの役割分担

技術役割例え
HTML構造・内容家の骨組み・間取り
CSS見た目・デザイン壁の色・家具の配置
HTML（構造）  +  CSS（見た目）  =  Webページ

CSSでできること

できること例
色の変更テキストや背景の色
フォントの変更文字の大きさ、書体
余白の調整要素間のスペース
レイアウトの変更要素の並び方
装飾枠線、影、角丸
アニメーションホバー時の変化、遷移

CSSの3つの書き方

方法1: インラインスタイル

HTMLタグに直接 style 属性で書く方法です。

<p style="color: red; font-size: 20px;">赤い大きな文字</p>
  • メリット: 手軽
  • デメリット: 管理しにくい、再利用できない

方法2: <style> タグ

<head> 内に <style> タグで書く方法です。

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
  • メリット: 1ファイルで完結
  • デメリット: 複数ページで共有できない

方法3: 外部CSSファイル（推奨）

別ファイル（.css）に書いて読み込む方法です。

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
/* style.css */
p {
  color: green;
  font-size: 16px;
}
  • メリット: 複数ページで共有できる、管理しやすい
  • デメリット: ファイルが増える

先輩「実際の開発では 外部CSSファイル を使うのが基本だよ。今後はこの方法で書いていこう」

CSSの基本構文

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

具体例

h1 {
  color: navy;
  font-size: 32px;
}
要素説明例
セレクタどの要素にスタイルを当てるかh1
プロパティ何を変えるかcolor, font-size
値どう変えるかnavy, 32px
宣言プロパティと値のセットcolor: navy;

読み方

h1 {
  color: navy;       /* h1の文字色を紺色にする */
  font-size: 32px;   /* h1の文字サイズを32pxにする */
}

実践：CSSを書いてみよう

ファイル構成

graph TD
    A["my-site/"] --> B["index.html"]
    A --> C["style.css<br>新しく作る"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#fef3c7,stroke:#d97706

style.css

/* ページ全体の設定 */
body {
  font-family: sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

/* 見出しの設定 */
h1 {
  color: #2c3e50;
}

h2 {
  color: #3498db;
}

/* 段落の設定 */
p {
  line-height: 1.8;
}

index.html に追加

<head>
  <meta charset="UTF-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="style.css">
</head>

ブラウザで開いて、文字の色や背景が変わったことを確認しましょう。

CSSのコメント

/* これはコメントです */
h1 {
  color: navy; /* 文字色を紺色に */
}

HTMLのコメント（<!-- -->）とは書き方が違うので注意してください。

まとめ

ポイント内容
CSSとはWebページの見た目を制御する言語
3つの書き方インライン、<style>タグ、外部ファイル
推奨外部CSSファイル（.css）を使う
基本構文セレクタ { プロパティ: 値; }
読み込み<link rel="stylesheet" href="style.css">

チェックリスト

  • CSSの役割（見た目の制御）を説明できる
  • CSSの3つの書き方を理解した
  • 外部CSSファイルの作り方と読み込み方が分かる
  • CSSの基本構文（セレクタ・プロパティ・値）を理解した
  • 実際にCSSファイルを作ってHTMLに適用できた

次のステップへ

CSSの基本が分かりました。次は、CSSの重要な概念「セレクタ」を詳しく学んでいきましょう。

推定読了時間: 30分