回答編集履歴

6

ちょっと言葉修正

2022/12/12 03:23

投稿

Cocode
Cocode

スコア2314

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

ついき

2022/12/12 02:35

投稿

Cocode
Cocode

スコア2314

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

誤字

2022/12/12 00:40

投稿

Cocode
Cocode

スコア2314

test CHANGED
@@ -47,7 +47,7 @@
47
47
  object-fit: contain;
48
48
  }
49
49
 
50
- .lesson-desctiption {
50
+ .lesson-description {
51
51
  padding-right: 10%;
52
52
  padding-left: 10%;
53
53
  }

3

fix

2022/12/11 15:38

投稿

Cocode
Cocode

スコア2314

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

2022/12/11 15:35

投稿

Cocode
Cocode

スコア2314

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="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
13
+ <p class="lesson-description">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
14
14
  </div>
15
15
 
16
16
  <!-- 省略 -->

1

add

2022/12/11 15:32

投稿

Cocode
Cocode

スコア2314

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;