LTech

レッスン1: はじめてのCSS！できること＆基本の書き方を学ぼう

CSSの役割と基本的な記述方法について学びます。

🎯 学習目標

  • CSSの役割と仕組みを理解する
  • CSSの3つの記述方法を具体的に説明できる
  • CSSの基本構文を理解する
  • 実際にCSSを書いて、見た目を変える体験をする

📘 目次

  1. CSSとは何か
  2. CSSの基本構文
  3. CSSの3つの記述方法
  4. 今日のまとめ
  5. 演習：CSSを実際に書いてみよう
  6. 理解度チェック

📚 レッスン

1. CSSとは何か

CSS（Cascading Style Sheets）は、Webページの見た目（スタイル）を指定する言語です。HTMLが「構造（内容）」を定義するのに対し、CSSは「見た目（デザイン）」を設定します。

CSSでできること（一例）

  • 文字の色・サイズ・フォントの変更
  • 背景色や画像の設定
  • レイアウト（余白、配置）の調整
  • ボタンやリンクのホバー時の効果
  • モバイル対応のレスポンシブデザイン

なぜCSSを使うのか？

  • HTMLだけでは見た目が整えられない
  • CSSを分離して書くことで保守性と再利用性が高くなる
  • サイト全体のデザインを一括で変更可能

2. CSSの基本構文

CSSでは、次のような形式でスタイルを指定します。

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

たとえば、段落（<p>）の文字色を赤にするには

p {
  color: red;
}

用語の解説

用語 意味
セレクタ どのHTML要素にスタイルを適用するかを指定（例：p, .class, #id）
プロパティ 「どんなスタイルを変更するか」を指定（例：color, font-size）
値 プロパティに対する具体的な設定内容（例：red, 20px）

3. CSSの3つの記述方法

① インラインスタイル（HTMLタグに直接記述）

<p style="color: red; font-size: 16px;">これは赤くて16pxの文字です。</p>
  • メリット：すぐに反映できる。1つの要素だけに適用したいときに便利
  • デメリット：再利用ができない

② 内部スタイル（<style> タグをHTML内に記述）

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>これは青くて18pxの文字です。</p>
</body>
</html>
  • HTMLファイル内でスタイルを定義
  • 小規模なページに向いている

③ 外部スタイルシート（.cssファイルとして分離）

HTMLファイル

<link rel="stylesheet" href="style.css">
<p>これは外部CSSでスタイルが指定されています。</p>

style.css

p {
  color: green;
  font-size: 20px;
}
  • メリット：複数のHTMLページで同じスタイルを共有できる
  • デメリット：ファイルが増えるため管理が複雑になることもあるが、実務では主流

今日のまとめ

  • CSSはWebページにスタイル（見た目）を加えるための言語
  • 基本構文は「セレクタ { プロパティ: 値; }
  • インライン、内部、外部の3つの記述方法がある

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

演習1：インラインスタイル

<p style="color: red; font-size: 16px;">この文章の色とサイズを変更してみましょう。</p>

やってみよう！

  1. 右側のインラインエディタにサンプルコードを貼り付けて、文章の色とサイズが変わることを確認する
  2. colorとfont-sizeを以下のように変更してみる
    • color を「blue」に変更
    • font-size を「20px」に変更

演習2：内部スタイル

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>この段落のスタイルを変更してみましょう。</p>
</body>
</html>

やってみよう！

  1. 右側のインラインエディタにサンプルコードを貼り付けて、文章の色とサイズが変わることを確認する
  2. colorとfont-sizeを以下のように変更してみる
    • 色を purple に変更
    • フォントサイズを 24px に変更

📚 リファレンス

このレッスンで学んだCSSプロパティの詳細については、リファレンスページで確認できます。

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. CSSは何の略でしょうか？

2. 以下のCSS構文で間違っている部分はどこですか？

h1 {
  color = red;
}

3. CSSのインラインスタイルについて正しい説明はどれですか？

📘 次回予告

次回（レッスン2）はCSSの基本構文（セレクタ・プロパティ・値）とコメントの書き方について学びます。

« チュートリアル一覧へ戻る レッスン2へ進む »

インラインエディタ