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