回答編集履歴
6
ちょっと言葉修正
test
CHANGED
@@ -60,7 +60,7 @@
|
|
60
60
|
|
61
61
|
> 「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか?
|
62
62
|
|
63
|
-
画像とHTML&CSSの2つを中央寄せにしたければ、「その2つだけ」を囲むタグ(containerやwrapperと呼ばれます)が必要です。
|
63
|
+
画像とHTML&CSSの2つを(水平・垂直方向両方を)中央寄せにしたければ、「その2つだけ」を囲むタグ(containerやwrapperと呼ばれます)が必要です。
|
64
64
|
ところが質問者様のHTMLでは、その2つにだけを囲うタグは存在せず、`<figcaption>`も含めて3つを囲う`<figure>`しかありませんでした。
|
65
65
|
|
66
66
|
```
|
5
ついき
test
CHANGED
@@ -55,3 +55,27 @@
|
|
55
55
|
|
56
56
|
こんな感じはいかがでしょう?
|
57
57
|
実際にブラウザで確認していないのでできるかどうかわかりませんが…
|
58
|
+
|
59
|
+
---
|
60
|
+
|
61
|
+
> 「HTMLの構造的に実現が難しい」とコメントいただきましたが、具体的にどの部分が難しくしてしまっていたのでしょうか?
|
62
|
+
|
63
|
+
画像とHTML&CSSの2つを中央寄せにしたければ、「その2つだけ」を囲むタグ(containerやwrapperと呼ばれます)が必要です。
|
64
|
+
ところが質問者様のHTMLでは、その2つにだけを囲うタグは存在せず、`<figcaption>`も含めて3つを囲う`<figure>`しかありませんでした。
|
65
|
+
|
66
|
+
```
|
67
|
+
# ✅ 理想
|
68
|
+
コンテイナー
|
69
|
+
画像
|
70
|
+
HTML&CSS
|
71
|
+
コンテイナー閉じ
|
72
|
+
本文
|
73
|
+
|
74
|
+
# 🚫 質問者様のコード
|
75
|
+
コンテイナー
|
76
|
+
画像
|
77
|
+
HTML&CSS
|
78
|
+
本文
|
79
|
+
コンテイナー閉じ
|
80
|
+
```
|
81
|
+
|
4
誤字
test
CHANGED
@@ -47,7 +47,7 @@
|
|
47
47
|
object-fit: contain;
|
48
48
|
}
|
49
49
|
|
50
|
-
.lesson-desc
|
50
|
+
.lesson-description {
|
51
51
|
padding-right: 10%;
|
52
52
|
padding-left: 10%;
|
53
53
|
}
|
3
fix
test
CHANGED
@@ -27,8 +27,6 @@
|
|
27
27
|
|
28
28
|
.lesson {
|
29
29
|
width: 25%;
|
30
|
-
padding-right: 10%;
|
31
|
-
padding-left: 10%;
|
32
30
|
}
|
33
31
|
|
34
32
|
.lesson-icon {
|
@@ -48,6 +46,11 @@
|
|
48
46
|
left: 0;
|
49
47
|
object-fit: contain;
|
50
48
|
}
|
49
|
+
|
50
|
+
.lesson-desctiption {
|
51
|
+
padding-right: 10%;
|
52
|
+
padding-left: 10%;
|
53
|
+
}
|
51
54
|
```
|
52
55
|
|
53
56
|
こんな感じはいかがでしょう?
|
2
change class
test
CHANGED
@@ -1,16 +1,16 @@
|
|
1
1
|
HTMLの構造的に実現が厳しいので、HTMLから変えます。
|
2
|
-
以下はProgateが提供してくれている公式のHTML
|
2
|
+
以下はProgateが提供してくれている公式のHTMLから少し変えています。
|
3
3
|
|
4
4
|
##### HTML
|
5
|
-
(https://prog-8.com/html/dojo/3/1
|
5
|
+
(参考:https://prog-8.com/html/dojo/3/1)
|
6
6
|
```html
|
7
7
|
<div class="lessons">
|
8
8
|
<div class="lesson">
|
9
9
|
<div class="lesson-icon">
|
10
10
|
<img src="https://prog-8.com/images/html/advanced/html.png">
|
11
|
-
<p>HTML & CSS</p>
|
11
|
+
<p class="lesson-language">HTML & CSS</p>
|
12
12
|
</div>
|
13
|
-
<p class="
|
13
|
+
<p class="lesson-description">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
|
14
14
|
</div>
|
15
15
|
|
16
16
|
<!-- 省略 -->
|
1
add
test
CHANGED
@@ -20,6 +20,17 @@
|
|
20
20
|
|
21
21
|
##### CSS
|
22
22
|
```css
|
23
|
+
.lessons {
|
24
|
+
display: flex;
|
25
|
+
width: 100%;
|
26
|
+
}
|
27
|
+
|
28
|
+
.lesson {
|
29
|
+
width: 25%;
|
30
|
+
padding-right: 10%;
|
31
|
+
padding-left: 10%;
|
32
|
+
}
|
33
|
+
|
23
34
|
.lesson-icon {
|
24
35
|
display: flex;
|
25
36
|
justify-content: center;
|