# 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ページを魅力的にデザインしてみましょう！ 😊 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developer.mixeder.net/start-from-biginner/web-dictionary/csstoha.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.