回答編集履歴
9
修正
test
CHANGED
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
|
|
67
67
|
---
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
以下のパーツについては、画像の下部に文字を表示したい意図だと思われます。
|
|
70
70
|
|
|
71
71
|
```HTML
|
|
72
72
|
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
こちらは以下のように記述したほうがいいと考えます。
|
|
86
86
|
|
|
87
87
|
```HTML
|
|
88
88
|
|
|
@@ -124,6 +124,10 @@
|
|
|
124
124
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
/* 画像とテキストの縦並びとは関係がないですが、クラスの使い方としての例です。 */
|
|
130
|
+
|
|
127
131
|
.xxxx {
|
|
128
132
|
|
|
129
133
|
/* 「画像とテキストのセット」同士の余白など、共通で指定したい記述 */
|
|
@@ -132,7 +136,7 @@
|
|
|
132
136
|
|
|
133
137
|
.xxxx2 .pic {
|
|
134
138
|
|
|
135
|
-
/* 2番目の要素にだけなにか特殊なことを指定したい場合の記述 */
|
|
139
|
+
/* 2番目の要素の画像にだけなにか特殊なことを指定したい場合の記述 */
|
|
136
140
|
|
|
137
141
|
}
|
|
138
142
|
|
|
@@ -162,20 +166,24 @@
|
|
|
162
166
|
|
|
163
167
|
|
|
164
168
|
|
|
165
|
-
「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン観点でいうと致し方なくそうなってしまっているのであり、コーディングの知識がないデザイナーの視点だと「コーディングの技量不足」と受け取られかねないシチュエーションです。
|
|
169
|
+
「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン観点でいうと致し方なく、そうなってしまっているのであり、特にコーディングの知識がないデザイナーの視点だと「コーディングの技量不足」と受け取られかねないシチュエーションです。
|
|
166
170
|
|
|
167
171
|
|
|
168
172
|
|
|
169
|
-
その「コーディングの技量不足」の状態の見た目を模写する際に、無理やり`<br>`などで再現するのはよくないと考えます。.wholeや.yokoなどに`width`、`padding`などを指定して横幅を調整し、その結果文
|
|
173
|
+
その「コーディングの技量不足」の状態の見た目を模写する際に、無理やり`<br>`などで再現するのはよくないと考えます。.wholeや.yokoなどに`width`、`padding`などを指定して横幅を調整し、その結果文末が「プログラミング学」で (やむなく) 途切れてしまっている、というソースコードのほうがいいです。
|
|
170
174
|
|
|
171
175
|
|
|
172
176
|
|
|
173
|
-
そのため私なら、例えば以下のようにコーディングします。
|
|
177
|
+
そのため私なら、例えば以下のようにコーディングします。(<span>は不要かもしれません。)
|
|
174
178
|
|
|
175
179
|
```HTML
|
|
176
180
|
|
|
177
|
-
<
|
|
181
|
+
<p>
|
|
178
182
|
|
|
183
|
+
<span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。</span><br>
|
|
184
|
+
|
|
179
|
-
<span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>
|
|
185
|
+
<span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>
|
|
186
|
+
|
|
187
|
+
</p>
|
|
180
188
|
|
|
181
189
|
```
|
8
修正
test
CHANGED
|
@@ -86,11 +86,11 @@
|
|
|
86
86
|
|
|
87
87
|
```HTML
|
|
88
88
|
|
|
89
|
-
<div class="xxxx"><!-- この要素には何かしらクラスをしていたほうが便利です。 -->
|
|
89
|
+
<div class="xxxx xxxx2"><!-- この要素には何かしらクラスをしていたほうが便利です。xxxxはダミーです。 -->
|
|
90
90
|
|
|
91
|
-
<img src="images/デイトラ/img/web_second.png" class="pic
|
|
91
|
+
<img src="images/デイトラ/img/web_second.png" class="pic"><!-- 親要素に1、2、3、といった数字を指定しているため、子要素には1、2、3...の数字は不要 -->
|
|
92
92
|
|
|
93
|
-
<span class="let
|
|
93
|
+
<span class="let">HTML/ CSS/ JavaScript/ jQuery</span><!-- -->
|
|
94
94
|
|
|
95
95
|
</div>
|
|
96
96
|
|
|
@@ -100,11 +100,11 @@
|
|
|
100
100
|
|
|
101
101
|
```HTML
|
|
102
102
|
|
|
103
|
-
<figure>
|
|
103
|
+
<figure class="xxxx xxxx2">
|
|
104
104
|
|
|
105
|
-
<img src="images/デイトラ/img/web_second.png" class="pic
|
|
105
|
+
<img src="images/デイトラ/img/web_second.png" class="pic">
|
|
106
106
|
|
|
107
|
-
<figcaption class="let
|
|
107
|
+
<figcaption class="let">HTML/ CSS/ JavaScript/ jQuery</figcaption>
|
|
108
108
|
|
|
109
109
|
</figure>
|
|
110
110
|
|
|
@@ -112,13 +112,27 @@
|
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
1つの方法ですが、CSS側には以下のように指定します。
|
|
116
116
|
|
|
117
117
|
```CSS
|
|
118
118
|
|
|
119
119
|
.pic {
|
|
120
120
|
|
|
121
|
+
/* 縦並びにしたい画像や、前後のテキストには`display: block;`を指定することをおすすめします。 */
|
|
122
|
+
|
|
121
123
|
display: block;
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.xxxx {
|
|
128
|
+
|
|
129
|
+
/* 「画像とテキストのセット」同士の余白など、共通で指定したい記述 */
|
|
130
|
+
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.xxxx2 .pic {
|
|
134
|
+
|
|
135
|
+
/* 2番目の要素にだけなにか特殊なことを指定したい場合の記述 */
|
|
122
136
|
|
|
123
137
|
}
|
|
124
138
|
|
7
修正
test
CHANGED
|
@@ -122,6 +122,8 @@
|
|
|
122
122
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
+
```
|
|
126
|
+
|
|
125
127
|
|
|
126
128
|
|
|
127
129
|
---
|
6
修正
test
CHANGED
|
@@ -66,6 +66,66 @@
|
|
|
66
66
|
|
|
67
67
|
---
|
|
68
68
|
|
|
69
|
+
こちらについて、画像の下部に文字を表示したい意図だと思われます。
|
|
70
|
+
|
|
71
|
+
```HTML
|
|
72
|
+
|
|
73
|
+
<div>
|
|
74
|
+
|
|
75
|
+
<img src="images/デイトラ/img/web_second.png" class="pic2">
|
|
76
|
+
|
|
77
|
+
<br><span class="let2">HTML/ CSS/ JavaScript/ jQuery</span></br>
|
|
78
|
+
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
例えば以下のように記述したほうがいいと考えます。
|
|
86
|
+
|
|
87
|
+
```HTML
|
|
88
|
+
|
|
89
|
+
<div class="xxxx"><!-- この要素には何かしらクラスをしていたほうが便利です。 -->
|
|
90
|
+
|
|
91
|
+
<img src="images/デイトラ/img/web_second.png" class="pic pic2">
|
|
92
|
+
|
|
93
|
+
<span class="let2">HTML/ CSS/ JavaScript/ jQuery</span>
|
|
94
|
+
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
もしくは
|
|
100
|
+
|
|
101
|
+
```HTML
|
|
102
|
+
|
|
103
|
+
<figure>
|
|
104
|
+
|
|
105
|
+
<img src="images/デイトラ/img/web_second.png" class="pic pic2">
|
|
106
|
+
|
|
107
|
+
<figcaption class="let2">HTML/ CSS/ JavaScript/ jQuery</figcaption>
|
|
108
|
+
|
|
109
|
+
</figure>
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
加えてCSS側には以下のように、縦並びにしたい画像や、前後のテキストには`display: block;`を指定することをおすすめします。
|
|
116
|
+
|
|
117
|
+
```CSS
|
|
118
|
+
|
|
119
|
+
.pic {
|
|
120
|
+
|
|
121
|
+
display: block;
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
69
129
|
別件として、
|
|
70
130
|
|
|
71
131
|
まず以下の文章の区切り方には (デザイナーとして) 強い違和感があります。
|
5
修正
test
CHANGED
|
@@ -86,11 +86,11 @@
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン
|
|
89
|
+
「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン観点でいうと致し方なくそうなってしまっているのであり、コーディングの知識がないデザイナーの視点だと「コーディングの技量不足」と受け取られかねないシチュエーションです。
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
93
|
-
その「コーディングの技量不足」の状態の見た目を
|
|
93
|
+
その「コーディングの技量不足」の状態の見た目を模写する際に、無理やり`<br>`などで再現するのはよくないと考えます。.wholeや.yokoなどに`width`、`padding`などを指定して横幅を調整し、その結果文字が「プログラミング学」で (やむなく) 途切れてしまっている、というソースのほうがいいです。
|
|
94
94
|
|
|
95
95
|
|
|
96
96
|
|
4
修正
test
CHANGED
|
@@ -19,6 +19,8 @@
|
|
|
19
19
|
数について、違和感はありません。きれいな方だと思います！
|
|
20
20
|
|
|
21
21
|
|
|
22
|
+
|
|
23
|
+
---
|
|
22
24
|
|
|
23
25
|
> また、タグのつけ方が曖昧で、spanタグを多用しているのですがこれは使えわない方がいいんでしょうか？
|
|
24
26
|
|
|
@@ -59,3 +61,45 @@
|
|
|
59
61
|
</section>
|
|
60
62
|
|
|
61
63
|
```
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
別件として、
|
|
70
|
+
|
|
71
|
+
まず以下の文章の区切り方には (デザイナーとして) 強い違和感があります。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
```HTML
|
|
76
|
+
|
|
77
|
+
<span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学</span><br>
|
|
78
|
+
|
|
79
|
+
<span>習アプリです。毎日設定された課題をこなしていくだけで、未経</span><br>
|
|
80
|
+
|
|
81
|
+
<span>験から30日でプログラミングスキルが身につきます。</span><br>
|
|
82
|
+
|
|
83
|
+
<span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
「学」と「習」、「未経」と「験」が改行で隔てられてしまっているのは、デザイン上は致し方なくそうなってしまっているのであり、コーディングができないデザイナー視点だと「コーディングの技量不足」です。
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
その「コーディングの技量不足」の状態の見た目を無理やり模写する際に<br>などで再現するのはあまりよくないと考えます。.wholeや.yokoなどにwidth、paddingなどを指定して横幅を調整し、その結果文字が「プログラミング学」で (やむなく) 途切れてしまっている、というソースのほうがいいです。
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
そのため私なら、例えば以下のようにコーディングします。
|
|
98
|
+
|
|
99
|
+
```HTML
|
|
100
|
+
|
|
101
|
+
<span>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。</span><br>
|
|
102
|
+
|
|
103
|
+
<span>1日一第30日でプロにWebエンジニアを目指しましょう！</span>
|
|
104
|
+
|
|
105
|
+
```
|
3
修正
test
CHANGED
|
@@ -24,4 +24,38 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
+
<span>には、それほど違和感はないのですが、<section>や<p>は使ったほうがいいと思います。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
```HTML
|
|
32
|
+
|
|
33
|
+
<section class="whole"><!-- こちらはdivでなくsectionにしたほうがよさそうです。 -->
|
|
34
|
+
|
|
35
|
+
<h2 class="deitora">
|
|
36
|
+
|
|
37
|
+
<span>デイトラとは</span>
|
|
38
|
+
|
|
39
|
+
</h2>
|
|
40
|
+
|
|
41
|
+
<div class="yoko">
|
|
42
|
+
|
|
43
|
+
<img class="pic" src="images/デイトラ/img/about.png" alt="実際のコースの写真です。" >
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
27
|
-
こちらは
|
|
47
|
+
<!-- ↓こちらは<p>タグのほうがよさそうです。 -->
|
|
48
|
+
|
|
49
|
+
<p class="ex">
|
|
50
|
+
|
|
51
|
+
デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。<br>
|
|
52
|
+
|
|
53
|
+
1日一第30日でプロにWebエンジニアを目指しましょう！
|
|
54
|
+
|
|
55
|
+
</p>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
```
|
2
修正
test
CHANGED
|
@@ -7,3 +7,21 @@
|
|
|
7
7
|
参考URL:
|
|
8
8
|
|
|
9
9
|
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/br](https://developer.mozilla.org/ja/docs/Web/HTML/Element/br)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
> 僕のコードのclass属性の数は多すぎるでしょうか？
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
数について、違和感はありません。きれいな方だと思います！
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
> また、タグのつけ方が曖昧で、spanタグを多用しているのですがこれは使えわない方がいいんでしょうか？
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
こちらは結構、熟練者も画一的な答えがなかったりするようです。
|
1
修正
test
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
`<br><span class="s3">毎日設定された課題をこなすだけ！未経験から</span></br>`
|
|
2
2
|
|
|
3
|
-
上記は間違いです。<br>は開始タグ
|
|
3
|
+
上記は間違いです。<br>は「開始タグと閉じタグで囲う」タイプのタグではありません。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
参考URL:
|
|
8
|
+
|
|
7
|
-
https://developer.mozilla.org/ja/docs/Web/HTML/Element/br
|
|
9
|
+
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/br](https://developer.mozilla.org/ja/docs/Web/HTML/Element/br)
|