CSS（Cascading Style Sheets）とは、Webページの見た目やレイアウトを整えるためのスタイルシート言語です。HTMLがWebページの構造を定義するのに対し、CSSはその構造に対してデザインや装飾を適用します。
CSSの基本的な役割
CSSを使うことで、以下のようなスタイルをWebページに適用できます：
- 文字の色やフォントの変更：テキストの色やフォントスタイルを指定します。
- レイアウトの調整：要素の配置やサイズ、余白を設定します。
- 背景の設定：背景色や背景画像を指定します。
- ボーダーの設定：要素の枠線のスタイルや色、幅を指定します。
- アニメーションの追加：簡単なアニメーション効果を適用します。
CSSの基本構文
CSSはセレクタ、プロパティ、値の組み合わせで記述されます。以下は基本的な構文の例です：
/* セレクタ */
h1 {
/* プロパティ: 値 */
color: blue; /* 文字色を青に設定 */
font-size: 24px; /* フォントサイズを24ピクセルに設定 */
}- セレクタ：スタイルを適用するHTML要素を指定します（例：
h1）。 - プロパティ：変更したいスタイルの種類を指定します（例：
color、font-size）。 - 値：プロパティに対する具体的な設定値を指定します（例：
blue、24px）。
CSSの適用方法
CSSは以下の3つの方法でHTMLに適用できます：
- インラインスタイル：HTML要素内に直接スタイルを記述します。
<h1 style="color: blue; font-size: 24px;">見出し</h1>- 内部スタイルシート：HTML文書の内にスタイルを記述します。
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>- 外部スタイルシート：別ファイルにスタイルを記述し、HTMLからリンクします。
<head>
<link rel="stylesheet" href="styles.css">
</head>CSSの利点
- 再利用性：一度定義したスタイルを複数のHTMLファイルで再利用できます。
- メンテナンス性：スタイルを一箇所で管理できるため、デザインの変更が容易です。
- 一貫性：全てのページで統一されたデザインを適用できます。
CSSを使うことで、Webページのデザインを自由にカスタマイズし、ユーザーにとって魅力的なインターフェースを提供することができます。
