HTML Living Standard/CSS

CSS（Cascading Style Sheets）は、HTMLやXML（例: SVG、MathML）で構造化された文書の外観を記述するスタイルシート言語です。CSSは文書の視覚的なプレゼンテーションを制御するために使用され、色、フォント、レイアウト、アニメーションなど、多岐にわたるデザインを実現できます。

CSSの役割

CSSは以下の役割を果たします：

外観の分離: コンテンツ（HTML）とデザイン（CSS）を分離することで、メンテナンス性が向上します。
再利用性の向上: 同じCSSを複数のHTMLファイルで使用可能です。
適応デザイン: デバイスの種類や画面サイズに応じたレスポンシブデザインを実現します。

CSSの基本構文

CSSはセレクターと宣言ブロックで構成されます。

セレクター: スタイルを適用するHTML要素を指定します。
宣言ブロック: 中括弧 {} の中にプロパティとその値を記述します。

例

h1 {
  color: blue;
  font-size: 24px;
}

この例では、<h1> 要素の文字色を青、文字サイズを24pxに設定しています。

CSSの適用方法

HTMLにCSSを適用する方法は以下の3つです：

1. インラインスタイル

HTML要素に直接スタイルを記述します。

<h1 style="color: red;">インラインスタイル</h1>

2. 内部スタイルシート

<style> 要素を使用してHTML文書内に記述します。

<style>
  h1 {
    color: green;
  }
</style>

3. 外部スタイルシート

外部ファイルとしてCSSを分離し、<link> 要素で読み込みます。

<link rel="stylesheet" href="styles.css">

CSSの重要な概念

CSSを理解するうえで重要な概念を以下に示します。

カスケード（Cascade）

複数のスタイルが適用される場合、スタイルの優先順位を決定します。

優先順位のルール: インライン > 内部 > 外部。
!important: 特定のスタイルを強制的に優先させるために使用します。

継承（Inheritance）

特定のプロパティは親要素から子要素に継承されます。

継承されるプロパティ: color, font-family など。
継承されないプロパティ: margin, padding など。

ボックスモデル

すべてのHTML要素は、以下の構造で表現されます：

コンテンツ: 要素の内容。
パディング: コンテンツ周囲のスペース。
ボーダー: パディングの外側の枠線。
マージン: ボーダーの外側のスペース。

メディアクエリ

デバイスの特性（画面サイズ、解像度など）に応じて異なるスタイルを適用します。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

CSSのバリエーション

CSSには複数のバージョンが存在し、現在は CSS3 や CSS4 の仕様が利用されています。それぞれが新しいプロパティや機能を追加しています。

CSSの使用例

以下は、基本的なCSSを使用した簡単なHTMLとCSSの例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>CSSの例</h1>
  <p>この文はスタイルが適用されています。</p>
</body>
</html>

CSS（styles.css）

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  line-height: 1.5;
}

まとめ

CSSは、ウェブページの外観を制御するための強力なツールです。HTMLと組み合わせて使用することで、美しく機能的なウェブサイトを構築することができます。基本を理解したうえで、応用的な技術（アニメーション、レスポンシブデザインなど）を学ぶと、より洗練されたデザインが可能になります。