Skip to content

Commit 188b289

Browse files
nakatermnakaterm
authored
CSS の章で使用するタグを div タグに統一・div タグの説明を追加 (#767)
1 parent e8dbab8 commit 188b289

File tree

7 files changed

+22
-12
lines changed

7 files changed

+22
-12
lines changed

‎docs/1-trial-session/12-css/_samples/red-hello-world/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
<title>Title</title>
77
</head>
88
<body>
9-
Hello <strong id="world">World</strong>!
9+
<div id="greeting">Hello World!</div>
1010
</body>
1111
</html>

‎docs/1-trial-session/12-css/_samples/red-hello-world/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
#world {
1+
#greeting {
22
color: red;
33
}

‎docs/1-trial-session/12-css/begin-css.png‎

-35.2 KB
Loading

‎docs/1-trial-session/12-css/index.mdx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: CSS
66

77
![Web 開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
88

9-
CSS の書き方を学び、「World」の文字を赤くしてみましょう。
9+
CSS の書き方を学び、「Hello World!」の文字を赤くしてみましょう。
1010

1111
![Hello World!](./red-hello-world.png)
1212

@@ -16,7 +16,7 @@ CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と
1616

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

19-
次の例では、`Hello World` の `World` の部分を赤色にしています。
19+
次の例では、`Hello World!` を赤色にしています。
2020

2121
```html title="index.html"
2222
<!doctype html>
@@ -27,19 +27,25 @@ CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と
2727
<title>Title</title>
2828
</head>
2929
<body>
30-
Hello <strong id="world">World</strong>!
30+
<div id="greeting">Hello World!</div>
3131
</body>
3232
</html>
3333
```
3434

3535
```css title="style.css"
36-
#world {
36+
#greeting {
3737
color: red;
3838
}
3939
```
4040

4141
<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
4242

43+
:::tip[`div` 要素]
44+
45+
[`div` 要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。
46+
47+
:::
48+
4349
## `link` 要素
4450

4551
```html title="index.html"
@@ -52,9 +58,9 @@ CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と
5258

5359
CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。このために用いることができるのが、HTML 要素の `id` 属性です。(上の例では、`index.html` の 9行目)
5460

55-
![セレクタ](selector.png)
61+
![セレクタ](selector.drawio.svg)
5662

57-
そして、CSS 側に書くのが**セレクタ**です。上の例では、`style.css` の 1 行目の `#world` がセレクタで、「`id` 属性が `world` である要素」を示します。
63+
そして、CSS 側に書くのが**セレクタ**です。上の例では、`style.css` の 1 行目の `#greeting` がセレクタで、「`id` 属性が `greeting` である要素」を示します。
5864

5965
`id` 属性は、全ての HTML 要素に対して開発者が自由に設定できますが、ひとつの HTML 内に同じ `id` 属性を持つ要素が複数存在してはならない、というルールがあります。
6066

@@ -85,7 +91,7 @@ CSS を記述する際には、まずスタイルを適用する対象となる
8591
いよいよ仕上げです。
8692

8793
```css title="style.css"
88-
#world {
94+
#greeting {
8995
color: red;
9096
}
9197
```
@@ -94,7 +100,7 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
94100

95101
上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
96102

97-
これで、`Hello World!` の `World` の文字が赤くなりました。
103+
これで、`Hello World!` の文字が赤くなりました。
98104

99105
:::note
100106

@@ -104,10 +110,10 @@ CSS の `{` から `}` で囲まれたブロックの中に、<Term type="cssPro
104110
:::
105111

106112
:::tip[HTMLの <Term>`style` 属性</Term>]
107-
`style.css` を作らずとも、HTML 内に直接 CSS を指定することもできます。例えば、`p` <Term>要素</Term> の <Term>`style` 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
113+
`style.css` を作らずとも、HTML 内に直接 CSS を指定することもできます。例えば、`div` <Term>要素</Term> の <Term>`style` 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
108114

109115
```html title="index.html"
110-
<p style="color: red">Hello CSS!</p>
116+
<div style="color: red">Hello World!</div>
111117
```
112118

113119
<ViewSource url={import.meta.url} path="_samples/first-css" />

‎docs/1-trial-session/12-css/red-hello-world.png‎

-25.3 KB
Loading

‎docs/1-trial-session/12-css/selector.drawio.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎docs/1-trial-session/12-css/selector.png‎

-60.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)