From 5d6a1e370c31289a16d63c3c1835a02700f978c9 Mon Sep 17 00:00:00 2001 From: WATAHIKI Yuto Date: Tue, 6 May 2025 17:48:50 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E3=80=8CCSS=E3=80=8D=E3=81=AE=E7=AB=A0?= =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=81=AE=E5=B4=A9?= =?UTF-8?q?=E3=82=8C=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index d0cc29a8..96cb1269 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -8,10 +8,8 @@ title: CSS ## `style`属性 -**`style`属性**は、全てのHTML要素 -に対して定義されている、CSS -を記述するための属性です。次の例では、`div`要素の`style`属性にCSS -を指定して、文字色を赤色にしています。 +{/* prettier-ignore */} +**`style`属性**は、全てのHTML要素に対して定義されている、CSSを記述するための属性です。次の例では、`div`要素の`style`属性にCSSを指定して、文字色を赤色にしています。 ```html title="index.html"
Hello World!
@@ -21,8 +19,8 @@ title: CSS ![Hello World!](./red-hello-world.png) -`style`属性には、**プロパティ** -と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。 +{/* prettier-ignore */} +`style`属性には、**プロパティ**と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。 この例では、`color`というプロパティに`red`という値を設定し、`font-size`というプロパティに`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。 @@ -34,14 +32,11 @@ title: CSS ## 構造とスタイルの分離 -`style`属性を用いてCSSを記述する方法は簡単ですが、 -CSSを必要とする要素が増えるにつれ、管理が難しくなってきます。 -CSSをHTML -から分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。 +{/* prettier-ignore */} +`style`属性を用いてCSSを記述する方法は簡単ですが、CSSを必要とする要素が増えるにつれ、管理が難しくなってきます。CSSをHTMLから分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。 -HTMLファイルから独立してCSS -ファイルを作成する場合、拡張子として`.css`を指定することが一般的です。`index.html`に加えて、`style.css`を作成しましょう。次の例では、`Hello -World!`を赤色にしています。 +{/* prettier-ignore */} +HTMLファイルから独立してCSSファイルを作成する場合、拡張子として`.css`を指定することが一般的です。`index.html`に加えて、`style.css`を作成しましょう。次の例では、`Hello World!`を赤色にしています。 ![CSSを書き始める](./begin-css.png) @@ -79,8 +74,8 @@ World!`を赤色にしています。 HTMLファイルとCSSファイルを分けて作成する場合、`style`属性を用いる場合とは異なり、どのスタイルを、どの要素に設定するのかを紐づけるための情報が必要です。 -HTML要素 -の`id`属性は、ひとつのHTML要素を、同じファイル内で一意に識別するための値を指定する属性で、CSSからHTML要素を探す際によく用いられます。`id`属性の値は、別の要素間で重複させることはできません。 +{/* prettier-ignore */} +HTML要素の`id`属性は、ひとつのHTML要素を、同じファイル内で一意に識別するための値を指定する属性で、CSSからHTML要素を探す際によく用いられます。`id`属性の値は、別の要素間で重複させることはできません。 **セレクタ**は、CSSを記述する際に、スタイルが適用するHTML要素の条件を指定するための構文です。この例では、`style.css`の1行目の`#greeting`がセレクタで、「`id`属性が`greeting`である要素」を示しています。 From 977cf5c6fffce1f1f942eaa6d0cc95d3880cc1f8 Mon Sep 17 00:00:00 2001 From: WATAHIKI Yuto Date: Tue, 6 May 2025 18:39:41 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=8CCSS=E3=80=8D=E3=81=AE=E7=AB=A0?= =?UTF-8?q?=E3=81=AE=E3=82=BF=E3=82=A4=E3=83=9D=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 96cb1269..6ec61b5f 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -33,7 +33,7 @@ title: CSS ## 構造とスタイルの分離 {/* prettier-ignore */} -`style`属性を用いてCSSを記述する方法は簡単ですが、CSSを必要とする要素が増えるにつれ、管理が難しくなってきます。CSSをHTMLから分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。 +`style`属性を用いてCSSを記述する方法は簡単ですが、CSSを必要とする要素が増えるにつれ、管理が難しくなってきます。CSSをHTMLから分離し、見た目と構造を分離して記述することで、この負担を軽減することができます。 {/* prettier-ignore */} HTMLファイルから独立してCSSファイルを作成する場合、拡張子として`.css`を指定することが一般的です。`index.html`に加えて、`style.css`を作成しましょう。次の例では、`Hello World!`を赤色にしています。