@@ -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
7180HTMLファイルと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