Summary  
This chapter introduces CSS fundamentals, covering methods to include CSS (inline, internal, external), selector types (element, class, ID), and common styling properties for defining the appearance of HTML elements.

General domain of usage  
Front-end web development

CSS（カスケーディング・スタイル・シート）は、ウェブページに視覚的な外観を与える技術。HTMLが構造を提供する一方で、CSSは色、フォント、余白、レイアウトなどを制御し、家の装飾やインテリアデザインが外観を決定するのと同様の役割を果たす。

# HTMLを装飾するためのCSSの追加

CSSは主に3つの方法で適用可能。

## インラインスタイル
`style` 属性を使用して、単一の要素に素早くスタイルを適用。

PHAgc3R5bGU9ImNvbG9yOiBibHVlOyBmb250LXNpemU6IDE2cHg7Ij5UaGlzIGlzIGEgcGFyYWdyYXBoIG9mIHRleHQgd2l0aCBpbmxpbmUgc3R5bGVzLjwvcD4=

## 内部スタイル
同じページ内の要素にスタイルを適用するため、`<style>` 内に `<head>` ブロックを追加。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICBwIHsKICAgICAgICBjb2xvcjogYmx1ZTsKICAgICAgICBmb250LXNpemU6IDE2cHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyBhIHBhcmFncmFwaCBvZiB0ZXh0IHdpdGggaW50ZXJuYWwgc3R5bGVzLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

## 外部スタイルシート
大規模なプロジェクトでは、CSSを別ファイルに分けてHTMLにリンク。

例の `index.html` と `index.css` ファイルを確認。

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyBhIHBhcmFncmFwaCBvZiB0ZXh0IHdpdGggZXh0ZXJuYWwgc3R5bGVzLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgY29sb3I6IGJsdWU7CiAgZm9udC1zaXplOiAxNnB4Owp9

# CSSセレクタ
セレクタは、特定のスタイルを適用する要素を定義。

## 要素セレクタ
特定の種類のすべての要素を対象。
```css
p {
  /* styles */
}
```

## クラスセレクタ
特定のclass属性を持つ要素を対象。
```css
.highlight {
  /* styles */
}
```

## IDセレクタ
一意のID属性を持つ特定の要素を対象。
```css
#header {
  /* styles */
}
```

# CSSプロパティ
CSSプロパティは、選択された要素のスタイル方法を定義。
一般的なCSSプロパティの例：
- `color` テキストの色を設定；
- `background-color` 要素の背景色を設定；
- `font-size` テキストサイズを設定；
- `margin` 要素の周囲に余白を追加。

HTML要素にCSSスタイルを適用することで、ウェブページの外観をカスタマイズし、視覚的に魅力的でユーザーフレンドリーな体験を実現。
#### 例：

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkhlbGxvLCBXb3JsZCE8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPldlbGNvbWUgdG8gTXkgV2Vic2l0ZTwvaDE+CiAgICA8YSBocmVmPSJodHRwczovL3d3dy5nb29nbGUuY29tLyIgdGFyZ2V0PSJfYmxhbmsiPlZpc2l0IEdvb2dsZSBob21lIHBhZ2U8L2E+PGJyIC8+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8yZDIxOGMxNS0wMjY0LTRiN2QtYWZiNi1lOTFhZDRhNDJkYWEvc2VjdGlvbi0yL2ltYWdlLWV4YW1wbGUtZG9nLmpwZyIKICAgICAgYWx0PSJQdXBweSBpbiBhIHN1aXQiCiAgICAgIHdpZHRoPSIyNDAiCiAgICAvPgogIDwvYm9keT4KPC9odG1sPg==

aDEgewogIGNvbG9yOiBicm93bjsKICBmb250LXNpemU6IDI0cHg7Cn0KCmEgewogIGJhY2tncm91bmQtY29sb3I6IHJlZDsKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBwYWRkaW5nOiAxMHB4Owp9CgppbWcgewogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgbWFyZ2luLXRvcDogMjBweDsKfQ==

次のうち、HTMLページにCSSスタイルを適用する有効な方法はどれですか？

ChatGPTなどのAIツールを活用しながら、ウェブ開発の基礎を学びます。HTML、CSS、JavaScriptがウェブサイト構築において果たす役割と、AIがコーディングの速度や創造性をどのように高めるかを理解します。効果的なプロンプトの作成や、ChatGPTを用いたコード生成を実践します。AI支援開発を活用して、ゼロから完全なブログウェブサイトを構築し、ウェブプロジェクトに役立つ実践的なスキルを身につけます。

ウェブ開発の主要な概念と技術、そして現代のコーディングにおけるAIの役割について紹介します。このセクションでは、ウェブ開発の基礎と、AIがコーディングにおける生産性、創造性、効率性をどのように向上させるかを取り上げ、学習の基盤を築きます。

ウェブ開発の基本的な技術を学びます。HTML、CSS、JavaScriptの基礎を掘り下げ、それぞれの機能とデジタル環境を形成する上での役割を解明します。

ChatGPTの強力な機能を探求し、その活用方法を学びます。プロンプトの作成やChatGPTを使ったコーディング作業についての知見を得られます。さまざまなアプリケーションでChatGPTを活用するための実践的なヒントも紹介します。

ブログウェブサイトを構築します。ChatGPTを活用したさまざまなウェブ開発技術を取り入れ、ゼロから完全かつ機能的なブログウェブサイトを作成します。

ウェブページのスタイリングのためのCSS入門

HTMLを装飾するためのCSSの追加

インラインスタイル

内部スタイル

外部スタイルシート

CSSセレクタ

要素セレクタ

クラスセレクタ

IDセレクタ

CSSプロパティ

例：

ビデオチュートリアル