Skip to content

Commit 3cf3625

Browse files
E-nana17E-nana17
authored
Merge pull request #249 from ut-code/add-exercise5-samples
第 5 回課題(ブロックレベル要素とインライン要素)のレビュー反映
2 parents 9d76a38 + fbb9c9e commit 3cf3625

File tree

8 files changed

+165
-18
lines changed

8 files changed

+165
-18
lines changed

‎docs/6-exercise/4-css/_samples/1_fixed/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,21 @@ h3 {
5555
.not-needed {
5656
background-color: lightgreen;
5757
}
58+
59+
.block {
60+
background-color: lightcoral;
61+
width: 100px;
62+
height: 50px;
63+
margin: 10px;
64+
padding: 10px;
65+
font-size: 30px;
66+
}
67+
68+
.inline {
69+
background-color: lightblue;
70+
width: 100px;
71+
height: 50px;
72+
margin: 10px;
73+
padding: 10px;
74+
font-size: 30px;
75+
}

‎docs/6-exercise/4-css/_samples/block-inline1/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="block">block</div>
10+
<span class="inline">inline</span>
11+
</body>
12+
</html>

‎docs/6-exercise/4-css/_samples/block-inline1/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.block {
2+
background-color: lightcoral;
3+
width: 100px;
4+
height: 50px;
5+
margin: 10px;
6+
padding: 30px;
7+
font-size: 30px;
8+
}
9+
10+
.inline {
11+
background-color: lightblue;
12+
width: 100px;
13+
height: 50px;
14+
margin: 10px;
15+
padding: 30px;
16+
font-size: 30px;
17+
}

‎docs/6-exercise/4-css/_samples/block-inline2/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Title</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="box1">
10+
A
11+
<div class="box2">B</div>
12+
C
13+
</div>
14+
</body>
15+
</html>

‎docs/6-exercise/4-css/_samples/block-inline2/style.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.box1 {
2+
background-color: lightcoral;
3+
width: 100px;
4+
height: 100px;
5+
margin: 10px;
6+
padding: 30px;
7+
font-size: 30px;
8+
}
9+
10+
.box2 {
11+
background-color: lightblue;
12+
}

‎docs/6-exercise/4-css/divElement.png‎

29.5 KB
Loading

‎docs/6-exercise/4-css/index.md‎

Lines changed: 91 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,108 @@ import Details from "@theme/Details";
1616

1717
## 1. ブロックレベル要素とインライン要素
1818

19-
1. 以下の点について、ブロックレベル要素とインライン要素の挙動の違いを確認してみましょう。見た目だけでなく、開発者ツールを用いて値がどうなっているか調べてみましょう。
19+
### 問題 1
2020

21-
- `width`, `height` の設定が反映されるかどうか。
22-
- `margin` の設定が反映されるかどうか。
23-
- `padding` を設定するとどのように表示されるか。
24-
- `font-size` を設定し、`width`, `height` を設定しないとき、要素の大きさはどうなるか。
21+
以下の点について、ブロックレベル要素とインライン要素の挙動の違いを確認してみましょう。見た目だけでなく、開発者ツールを用いて値がどうなっているか調べてみましょう。
2522

26-
2. 以下のように、`div` 要素の中に `div` 要素を配置するとどのように表示されるでしょうか。`span` 要素の中に `span` 要素を配置した場合はどうでしょうか。また、上に挙げた CSS プロパティを外側の要素にのみ設定した場合や、内側の要素にも値を設定した場合にどうなるか調べてみましょう。
23+
- `width`, `height` の設定が反映されるかどうか。
24+
- `margin` の設定が反映されるかどうか。
25+
- `padding` を設定するとどのように表示されるか。
26+
- `font-size` を設定し、`width`, `height` を設定しないとき、要素の大きさはどうなるか。
2727

28-
```html title="index.html"
29-
<body>
30-
<div class="box1">
31-
A
32-
<div class="box2">B</div>
33-
C
34-
</div>
35-
</body>
36-
```
28+
#### 解説
3729

38-
### 解説
30+
<Answer>
3931

40-
<Details summary={<summary>解説</summary>}>
32+
以下に示したコードの CSS プロパティの値を変えてみて、挙動を調べてみましょう。
4133

4234
- ブロックレベル要素は `width`, `height` の値を設定できますが、インライン要素はできません。
4335
- ブロックレベル要素は `margin` を上下左右に設定できますが、インライン要素は左右しか設定できません。
4436
- ブロックレベル要素に上下の `padding` を設定すると、余白が他の要素に被らないように縦の位置が調整されます。一方、インライン要素に上下の `padding` を設定した場合、要素の縦の位置が調整されず他の要素に被って表示されます。
4537
- ブロックレベル要素の `height` やインライン要素の `width`, `height` の初期値は、中身の要素の大きさによって決まるので、`font-size` を変更することで大きさが変化します。また、開発者ツールで値を調べてみると、インライン要素の大きさは文字の大きさと同じになるのに対し、ブロックレベル要素の `height` は `font-size` の 1.5 倍になることがわかります。
4638

47-
</Details>
39+
```html title="index.html"
40+
<!DOCTYPE html>
41+
<html lang="ja">
42+
<head>
43+
<meta charset="utf-8" />
44+
<title>Title</title>
45+
<link rel="stylesheet" href="style.css" />
46+
</head>
47+
<body>
48+
<div class="block">block</div>
49+
<span class="inline">inline</span>
50+
</body>
51+
</html>
52+
```
53+
54+
```css title="style.css"
55+
.block {
56+
background-color: lightcoral;
57+
width: 100px;
58+
height: 50px;
59+
margin: 10px;
60+
padding: 30px;
61+
font-size: 30px;
62+
}
63+
64+
.inline {
65+
background-color: lightblue;
66+
width: 100px;
67+
height: 50px;
68+
margin: 10px;
69+
padding: 30px;
70+
font-size: 30px;
71+
}
72+
```
73+
74+
<ViewSource url={import.meta.url} path="_samples/block-inline1" />
75+
76+
</Answer>
77+
78+
### 問題 2
79+
80+
以下のように、`div` 要素の中に `div` 要素を配置するとどのように表示されるでしょうか。`span` 要素の中に `span` 要素を配置した場合はどうでしょうか。また、上に挙げた CSS プロパティを外側の要素にのみ設定するとどうなるか調べてみましょう。
81+
82+
```html title="index.html"
83+
<body>
84+
<div class="box1">
85+
A
86+
<div class="box2">B</div>
87+
C
88+
</div>
89+
</body>
90+
```
91+
92+
#### 解説
93+
94+
<Answer>
95+
96+
- 画像のように、`div` 要素の場合は縦方向に、`span` 要素の場合は横方向に挟まるように表示されます。
97+
98+
![div要素の場合](divElement.png)
99+
![span要素の場合](spanElement.png)
100+
101+
- CSS プロパティの一部は、親要素のものが継承されます。例えば `font-size` は、外側の要素に設定した値が自動的に内側の要素にも反映されます(もちろん、手動で別の値を設定することも可能です)。一方、`margin` や `padding` などは反映されません。以下のような CSS ファイルを作成して、挙動を調べてみましょう。
102+
103+
```css title="style.css"
104+
.box1 {
105+
background-color: lightcoral;
106+
width: 100px;
107+
height: 100px;
108+
margin: 10px;
109+
padding: 30px;
110+
font-size: 30px;
111+
}
112+
113+
.box2 {
114+
background-color: lightblue;
115+
}
116+
```
117+
118+
<ViewSource url={import.meta.url} path="_samples/block-inline2" />
119+
120+
</Answer>
48121

49122
---
50123

‎docs/6-exercise/4-css/spanElement.png‎

18.5 KB
Loading

0 commit comments

Comments
 (0)