CSS（Cascading Style Sheets）は、HTMLで作成したWebページの見た目（デザインやレイアウト）を指定するための言語です。
文字の色やサイズ、背景色、余白、レイアウトの調整など、Webページを美しく整えるために使用します。
CSSの基本的な使い方
CSSを適用するには3つの方法があります。
1. インラインスタイル
HTML要素に直接スタイルを指定する方法です。
<p style="color: red; font-size: 20px;">これは赤い文字の段落です。</p>
メリット: 簡単に使える。
デメリット: スタイルが分散して管理しづらい。
2. 内部スタイルシート
HTML文書の<head>内に<style>タグで記述する方法です。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>これは青い文字の段落です。</p>
</body>
</html>
メリット: HTMLファイル内でスタイルをまとめて記述可能。
デメリット: 他のHTMLファイルには適用できない。
3. 外部スタイルシート
CSSを別ファイルに分けて管理する方法です。
HTMLファイル（例: index.html）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>これは外部スタイルシートでスタイルを適用しています。</p>
</body>
</html>
CSSファイル（例: styles.css）
p {
color: green;
font-size: 16px;
}
メリット: 複数のHTMLファイルで同じCSSを使える。管理が簡単。
デメリット: HTMLとCSSファイルを分ける必要がある。
CSSの基本構文
CSSは以下のような構文を持っています。
例
h1 {
color: red; /* 文字色を赤に設定 */
font-size: 24px; /* フォントサイズを24pxに設定 */
}
各部分の説明
セレクタ: スタイルを適用したいHTML要素（例: h1）。
プロパティ: 変更したい属性（例: colorやfont-size）。
値: プロパティに設定する値（例: redや24px）。
よく使うCSSプロパティ
文字関連
color: blue; /* 文字の色 */
font-size: 20px; /* 文字のサイズ */
font-family: Arial, sans-serif; /* フォントの種類 */
font-weight: bold; /* 太字 */
text-align: center; /* テキストの中央揃え */
背景関連
background-color: lightgray; /* 背景色 */
background-image: url('background.jpg'); /* 背景画像 */
余白関連
margin: 20px; /* 外側の余白 */
padding: 10px; /* 内側の余白 */
ボーダー（枠線）
border: 2px solid black; /* 枠線の太さ、種類、色 */
border-radius: 10px; /* 枠線の角を丸くする */
CSSのセレクタ
セレクタは、どの要素にスタイルを適用するかを指定します。
1. タグセレクタ
HTMLタグ全体に適用します。
2. クラスセレクタ
特定の要素に適用します。クラス名は.で指定します。
<p class="important">これは重要な段落です。</p>
.important {
font-weight: bold;
color: red;
}
3. IDセレクタ
特定の1つの要素に適用します。ID名は#で指定します。
<p id="highlight">これはハイライトされた段落です。</p>
#highlight {
background-color: yellow;
}
簡単なサンプル
以下のHTMLとCSSを使って、簡単なスタイル付きWebページを作ってみましょう。
HTMLファイル（index.html）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSSの基本</title>
</head>
<body>
<h1>CSSでスタイルを学ぼう！</h1>
<p class="highlight">この段落はハイライトされています。</p>
<p>普通の段落ももちろん表示できます。</p>
</body>
</html>
CSSファイル（styles.css）
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
padding: 20px;
}
h1 {
color: blue;
text-align: center;
}
.highlight {
color: white;
background-color: orange;
padding: 10px;
border-radius: 5px;
}
次に進むには？
CSSを学んだら、次は以下を学ぶとWebページ作成がさらに楽しくなります。
レスポンシブデザイン: スマホやタブレットでも見やすいページを作る方法。
CSSアニメーション: 動きのあるデザインを作る方法。
CSSを使って、あなたのWebページを魅力的にデザインしてみましょう！ 😊
