# CSSとは？ CSS（Cascading Style Sheets）は、HTMLで作成したWebページの見た目（デザインやレイアウト）を指定するための言語です。\ **文字の色やサイズ、背景色、余白、レイアウトの調整**など、Webページを美しく整えるために使用します。 *** ### CSSの基本的な使い方 CSSを適用するには3つの方法があります。 #### 1. **インラインスタイル** HTML要素に直接スタイルを指定する方法です。 ```html

これは赤い文字の段落です。

``` **メリット**: 簡単に使える。\ **デメリット**: スタイルが分散して管理しづらい。 *** #### 2. **内部スタイルシート** HTML文書の``内に`

これは青い文字の段落です。

``` **メリット**: HTMLファイル内でスタイルをまとめて記述可能。\ **デメリット**: 他のHTMLファイルには適用できない。 *** #### 3. **外部スタイルシート** CSSを別ファイルに分けて管理する方法です。 **HTMLファイル**（例: `index.html`） ```html

これは外部スタイルシートでスタイルを適用しています。

``` **CSSファイル**（例: `styles.css`） ```css p { color: green; font-size: 16px; } ``` **メリット**: 複数のHTMLファイルで同じCSSを使える。管理が簡単。\ **デメリット**: HTMLとCSSファイルを分ける必要がある。 *** ### CSSの基本構文 CSSは以下のような構文を持っています。 ```css セレクタ { プロパティ: 値; } ``` #### 例 ```css h1 { color: red; /* 文字色を赤に設定 */ font-size: 24px; /* フォントサイズを24pxに設定 */ } ``` #### 各部分の説明 * **セレクタ**: スタイルを適用したいHTML要素（例: `h1`）。 * **プロパティ**: 変更したい属性（例: `color`や`font-size`）。 * **値**: プロパティに設定する値（例: `red`や`24px`）。 *** ### よく使うCSSプロパティ #### 文字関連 ```css color: blue; /* 文字の色 */ font-size: 20px; /* 文字のサイズ */ font-family: Arial, sans-serif; /* フォントの種類 */ font-weight: bold; /* 太字 */ text-align: center; /* テキストの中央揃え */ ``` #### 背景関連 ```css background-color: lightgray; /* 背景色 */ background-image: url('background.jpg'); /* 背景画像 */ ``` #### 余白関連 ```css margin: 20px; /* 外側の余白 */ padding: 10px; /* 内側の余白 */ ``` #### ボーダー（枠線） ```css border: 2px solid black; /* 枠線の太さ、種類、色 */ border-radius: 10px; /* 枠線の角を丸くする */ ``` *** ### CSSのセレクタ セレクタは、どの要素にスタイルを適用するかを指定します。 #### 1. **タグセレクタ** HTMLタグ全体に適用します。 ```css p { color: green; } ``` #### 2. **クラスセレクタ** 特定の要素に適用します。クラス名は`.`で指定します。 ```html

これは重要な段落です。

``` ```css .important { font-weight: bold; color: red; } ``` #### 3. **IDセレクタ** 特定の1つの要素に適用します。ID名は`#`で指定します。 ```html

これはハイライトされた段落です。

``` ```css #highlight { background-color: yellow; } ``` *** ### 簡単なサンプル 以下のHTMLとCSSを使って、簡単なスタイル付きWebページを作ってみましょう。 #### HTMLファイル（`index.html`） ```html CSSの基本

CSSでスタイルを学ぼう！

この段落はハイライトされています。

普通の段落ももちろん表示できます。

``` #### CSSファイル（`styles.css`） ```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ページ作成がさらに楽しくなります。 1. **レスポンシブデザイン**: スマホやタブレットでも見やすいページを作る方法。 2. **CSSアニメーション**: 動きのあるデザインを作る方法。 CSSを使って、あなたのWebページを魅力的にデザインしてみましょう！ 😊