質問編集履歴

4

code: cssの不要な部分を削除

2021/09/15 05:16

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -70,8 +70,6 @@
70
70
 
71
71
  input[type='number'] {width:30px;}
72
72
 
73
- label:first-child{display:block;width:50px;float:left;}
73
+ label:first-child,span{display:block;width:50px;float:left;}
74
-
75
- span{display:block;width:50px;float:left;}
76
74
 
77
75
  ```

3

code: ''の統一,div

2021/09/15 05:16

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -4,13 +4,13 @@
4
4
 
5
5
  <span>xy</span>
6
6
 
7
- <label for="x">x:</label>
7
+ <label for='x'>x:</label>
8
8
 
9
- <input type="number" id="x">
9
+ <input type='number' id='x'>
10
10
 
11
- <label for="y">y:</label>
11
+ <label for='y'>y:</label>
12
12
 
13
- <input type="number" id="y">
13
+ <input type='number' id='y'>
14
14
 
15
15
  <!--xy自体を省く、<label for ='x'>xyなど。-->
16
16
 
@@ -46,17 +46,21 @@
46
46
 
47
47
  <span>xy</span>
48
48
 
49
- <label for="x">x</label>
49
+ <label for='x'>x</label>
50
50
 
51
- <input type="number" id="x">
51
+ <input type='number' id='x'>
52
52
 
53
- <label for="y">y</label>
53
+ <label for='y'>y</label>
54
54
 
55
- <input type="number" id="y">
55
+ <input type='number' id='y'>
56
56
 
57
57
  </div>
58
58
 
59
+ <div>
60
+
59
- <button type="submit">submit</button>
61
+ <button type="submit">submit</button>
62
+
63
+ </div>
60
64
 
61
65
  </form>
62
66
 

2

例の追加

2021/09/15 05:12

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -27,3 +27,47 @@
27
27
  *内部処理上の配慮
28
28
 
29
29
  htmlから構造を読み取って機能するようなプログラムがより適切に動くための配慮を指します。動作に関しては、できればxyによってxにフォーカスを与えたいですが(`<label for='x'>`)、この動作の実現は前文への配慮よりは優先されません。
30
+
31
+ *例:このような場合に改善の余地はあるのかどうか?
32
+
33
+ ```html
34
+
35
+ <form action='' method='post'>
36
+
37
+ <div>
38
+
39
+ <label for='name'>name</label>
40
+
41
+ <input type='text' id='name'>
42
+
43
+ </div>
44
+
45
+ <div>
46
+
47
+ <span>xy</span>
48
+
49
+ <label for="x">x</label>
50
+
51
+ <input type="number" id="x">
52
+
53
+ <label for="y">y</label>
54
+
55
+ <input type="number" id="y">
56
+
57
+ </div>
58
+
59
+ <button type="submit">submit</button>
60
+
61
+ </form>
62
+
63
+ ```
64
+
65
+ ```css
66
+
67
+ input[type='number'] {width:30px;}
68
+
69
+ label:first-child{display:block;width:50px;float:left;}
70
+
71
+ span{display:block;width:50px;float:left;}
72
+
73
+ ```

1

内部処理上の配慮

2021/09/15 05:09

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -21,3 +21,9 @@
21
21
  input {width:30px;}
22
22
 
23
23
  ```
24
+
25
+
26
+
27
+ *内部処理上の配慮
28
+
29
+ htmlから構造を読み取って機能するようなプログラムがより適切に動くための配慮を指します。動作に関しては、できればxyによってxにフォーカスを与えたいですが(`<label for='x'>`)、この動作の実現は前文への配慮よりは優先されません。