diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index d0cc29a8..6ec61b5f 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`である要素」を示しています。