1. CSS の基本概念

CSS (Cascading Style Sheets) は、ウェブページの見た目やレイアウトを指定するためのスタイルシート言語です。HTML が文書の構造を定義するのに対して、CSS はその文書の表示方法を制御します。このセクションでは、CSS の基本概念を学びます。

1.1 CSS とは

CSS は、以下のような要素のスタイリングを可能にします：

色の設定
フォントの指定
要素の位置や大きさの指定
レイアウトの調整

1.1.1 CSS の利点

セパレーション・オブ・コンサーンズ：HTML と CSS を分離することで、コードの可読性と保守性が向上します。
再利用性の向上：同じ CSS ファイルを複数の HTML ファイルで使い回すことができます。
効率的なデザイン変更：一つの CSS ファイルを変更することで、関連する全ての HTML ファイルのスタイルが更新されます。

1.2 CSS の適用方法

CSS を HTML に適用する方法は主に 3 つあります：

インラインスタイル
内部スタイルシート
外部スタイルシート

1.2.1 インラインスタイル

HTML の要素内に直接スタイルを記述する方法です。

<p style="color: blue; font-size: 20px;">これは青いテキストです。</p>

1.2.2 内部スタイルシート

HTML ファイルの<head>内に<style>タグを使ってスタイルを記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>内部スタイルシートの例</title>
    <style>
      p {
        color: blue;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>これは青いテキストです。</p>
  </body>
</html>

1.2.3 外部スタイルシート

外部 CSS ファイルをリンクする方法です。コードの再利用性が最も高いです。

<!-- HTMLファイル -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>外部スタイルシートの例</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>これは青いテキストです。</p>
  </body>
</html>

/* styles.cssファイル */
p {
  color: blue;
  font-size: 20px;
}

1.3 CSS の基本構文

CSS の基本構文は以下のように記述します：

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

1.3.1 セレクタ

セレクタは、スタイルを適用したい HTML 要素を指定します。セレクタには以下の種類があります：

要素セレクタ: HTML 要素名を指定 (p, h1, div など)
クラスセレクタ: クラス名を指定 (.classname)
ID セレクタ: ID 名を指定 (#idname)

1.3.2 プロパティと値

プロパティはスタイルの種類を、値はそのスタイルの具体的な内容を指定します。複数のプロパティはセミコロンで区切ります。

/* 例 */
p {
  color: blue;
  font-size: 20px;
  margin: 10px;
}

1.4 コメント

CSS 内でコメントを追加するには、/* コメント */を使用します。これにより、コードの可読性が向上します。

/* これはコメントです */
p {
  color: blue; /* このプロパティはテキストの色を青にします */
  font-size: 20px;
}

1.5 CSS の継承とカスケード

CSS は「継承」と「カスケード」という特性を持ちます。

1.5.1 継承

ある要素のスタイルを、その子要素が引き継ぐことを継承と呼びます。例えば、<body>に設定したフォントが、全ての子要素にも適用されます。

body {
  font-family: Arial, sans-serif;
}

1.5.2 カスケード

CSS は「カスケード」機能により、複数のスタイルルールが競合した場合に優先順位を決定します。優先順位のルールは以下の通りです：

インラインスタイル（最も強い）
ID セレクタ
クラスセレクタ、属性セレクタ、および擬似クラス
要素セレクタ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>カスケードの例</title>
    <style>
      p {
        color: red;
      }
      .blue-text {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p class="blue-text" style="color: green;">これは緑のテキストです。</p>
  </body>
</html>

この例では、インラインスタイルが一番強いので、テキストは緑色になります。

以上が CSS の基本概念です。次のセクションでは、具体的なセレクタとプロパティについて学びます。実際に手を動かし、CSS の基礎をしっかりと理解しましょう。