Skip to content

Commit 999de6c

Browse files
committed
fix format
1 parent 61a2a27 commit 999de6c

File tree

1 file changed

+15
-5
lines changed

1 file changed

+15
-5
lines changed

docs/1-trial-session/03-css/index.mdx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ title: CSS
88

99
## `style`属性
1010

11-
<Term>**`style`属性**</Term>は、全ての<Term>HTML要素</Term>に対して定義されている、<Term>CSS</Term>を記述するための属性です。次の例では、`div`要素の`style`属性に<Term>CSS</Term>を指定して、文字色を赤色にしています。
11+
<Term>**`style`属性**</Term>は、全ての<Term>HTML要素</Term>
12+
に対して定義されている、<Term>CSS</Term>
13+
を記述するための属性です。次の例では、`div`要素の`style`属性に<Term>CSS</Term>
14+
を指定して、文字色を赤色にしています。
1215

1316
```html title="index.html"
1417
<div style="color: red; font-size: 24px;">Hello World!</div>
@@ -18,7 +21,8 @@ title: CSS
1821

1922
![Hello World!](./red-hello-world.png)
2023

21-
<Term>`style`属性</Term>には、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
24+
<Term>`style`属性</Term>には、<Term type="cssProperty">**プロパティ**</Term>
25+
と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
2226

2327
この例では、`color`という<Term type="cssProperty">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term type="cssProperty">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
2428

@@ -30,9 +34,14 @@ title: CSS
3034

3135
## 構造とスタイルの分離
3236

33-
<Term>`style`属性</Term>を用いて<Term>CSS</Term>を記述する方法は簡単ですが、<Term>CSS</Term>を必要とする要素が増えるにつれ、管理が難しくなってきます。<Term>CSS</Term>を<Term>HTML</Term>から分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。
37+
<Term>`style`属性</Term>を用いて<Term>CSS</Term>を記述する方法は簡単ですが、
38+
<Term>CSS</Term>を必要とする要素が増えるにつれ、管理が難しくなってきます。
39+
<Term>CSS</Term>を<Term>HTML</Term>
40+
から分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。
3441

35-
<Term>HTML</Term>ファイルから独立して<Term>CSS</Term>ファイルを作成する場合、拡張子として`.css`を指定することが一般的です。`index.html`に加えて、`style.css`を作成しましょう。次の例では、`Hello World!`を赤色にしています。
42+
<Term>HTML</Term>ファイルから独立して<Term>CSS</Term>
43+
ファイルを作成する場合、拡張子として`.css`を指定することが一般的です。`index.html`に加えて、`style.css`を作成しましょう。次の例では、`Hello
44+
World!`を赤色にしています。
3645

3746
![CSSを書き始める](./begin-css.png)
3847

@@ -70,7 +79,8 @@ title: CSS
7079

7180
HTMLファイルとCSSファイルを分けて作成する場合、`style`属性を用いる場合とは異なり、どのスタイルを、どの要素に設定するのかを紐づけるための情報が必要です。
7281

73-
<Term>HTML要素</Term>の`id`属性は、ひとつのHTML要素を、同じファイル内で一意に識別するための値を指定する属性で、CSSからHTML要素を探す際によく用いられます。`id`属性の値は、別の要素間で重複させることはできません。
82+
<Term>HTML要素</Term>
83+
`id`属性は、ひとつのHTML要素を、同じファイル内で一意に識別するための値を指定する属性で、CSSからHTML要素を探す際によく用いられます。`id`属性の値は、別の要素間で重複させることはできません。
7484

7585
**セレクタ**は、CSSを記述する際に、スタイルが適用するHTML要素の条件を指定するための構文です。この例では、`style.css`の1行目の`#greeting`がセレクタで、「`id`属性が`greeting`である要素」を示しています。
7686

0 commit comments

Comments
 (0)