回答編集履歴
3
レスポンシブ対応
test
CHANGED
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
|
|
29
29
|
<style>
|
|
30
30
|
|
|
31
|
-
.t
|
|
31
|
+
.txt_center {
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
text-align: center;
|
|
34
34
|
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
margin-left: -1.5rem; /* 変更 */
|
|
52
52
|
|
|
53
|
-
padding: .5em
|
|
53
|
+
padding: .5em .5em; /* 変更 */
|
|
54
54
|
|
|
55
55
|
text-align: center;
|
|
56
56
|
|
|
@@ -62,11 +62,39 @@
|
|
|
62
62
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
+
|
|
66
|
+
|
|
65
67
|
.taiken input[type="radio"]:checked + label,
|
|
66
68
|
|
|
67
69
|
.taiken label:hover {
|
|
68
70
|
|
|
69
71
|
background: #f5c4ac;
|
|
72
|
+
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
/* 以下のCSSを追加 */
|
|
78
|
+
|
|
79
|
+
@media (max-width:480px) {
|
|
80
|
+
|
|
81
|
+
.taiken .answer-wrapper {
|
|
82
|
+
|
|
83
|
+
text-align: center;
|
|
84
|
+
|
|
85
|
+
font-size: smaller;
|
|
86
|
+
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@media (min-width:481px) {
|
|
92
|
+
|
|
93
|
+
.taiken label {
|
|
94
|
+
|
|
95
|
+
padding: .5em 1em;
|
|
96
|
+
|
|
97
|
+
}
|
|
70
98
|
|
|
71
99
|
}
|
|
72
100
|
|
|
@@ -102,7 +130,7 @@
|
|
|
102
130
|
|
|
103
131
|
|
|
104
132
|
|
|
105
|
-
<p><input type="submit" name="送信" value="診断"></p>
|
|
133
|
+
<p class="txt_center"><input type="submit" name="送信" value="診断"></p>
|
|
106
134
|
|
|
107
135
|
</form>
|
|
108
136
|
|
2
幅調整 & ラジオボタン選択時のハイライトが見えるのを解決
test
CHANGED
|
@@ -18,89 +18,97 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
```<
|
|
21
|
+
```<html lang="ja">
|
|
22
22
|
|
|
23
|
-
<h
|
|
23
|
+
<head>
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
<meta charset="utf-8">
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
<title>サンプル</title>
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
<style>
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
.taiken .answer-wrapper {
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
/*margin-left: 1.5rem;*/
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
}
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
.taiken input[type="radio"] {
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
/* label に背景色を設定したくないなら opacity: 0; で見えなくする */
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
width: 1rem; /* 追加 */
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
margin-right: .5rem; /* 追加 */
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
}
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
.taiken label {
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
display: inline-block;
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
margin-left: -1.5rem; /* 変更 */
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
padding: .5em 1em;
|
|
54
54
|
|
|
55
|
-
|
|
55
|
+
text-align: center;
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
background-color: #FFF;
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
border: 1px solid silver;
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
border-radius: 3px;
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
}
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
.taiken input[type="radio"]:checked + label,
|
|
66
66
|
|
|
67
|
+
.taiken label:hover {
|
|
68
|
+
|
|
69
|
+
background: #f5c4ac;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
</style>
|
|
74
|
+
|
|
67
|
-
|
|
75
|
+
</head>
|
|
68
76
|
|
|
69
77
|
|
|
70
78
|
|
|
71
79
|
|
|
72
80
|
|
|
73
|
-
|
|
81
|
+
<body>
|
|
74
82
|
|
|
75
|
-
|
|
83
|
+
<!-- https://teratail.com/questions/141946 -->
|
|
76
84
|
|
|
77
85
|
|
|
78
86
|
|
|
79
|
-
|
|
87
|
+
<form action="#" method="post" class="taiken">
|
|
80
88
|
|
|
81
|
-
|
|
89
|
+
<p><span>Q14.</span> きちょうめんな性格だと思う</p>
|
|
82
90
|
|
|
83
91
|
|
|
84
92
|
|
|
85
|
-
|
|
93
|
+
<p class="answer-wrapper">
|
|
86
94
|
|
|
87
|
-
|
|
95
|
+
<input type="radio" name="q14" value="3" required id="q14answer3"><label for="q14answer3">そう思う</label>
|
|
88
96
|
|
|
89
|
-
|
|
97
|
+
<input type="radio" name="q14" value="2" required id="q14answer2"><label for="q14answer2">どちらでもない</label>
|
|
90
98
|
|
|
91
|
-
|
|
99
|
+
<input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label>
|
|
92
100
|
|
|
93
|
-
|
|
101
|
+
</p>
|
|
94
102
|
|
|
95
103
|
|
|
96
104
|
|
|
97
|
-
|
|
105
|
+
<p><input type="submit" name="送信" value="診断"></p>
|
|
98
106
|
|
|
99
|
-
|
|
107
|
+
</form>
|
|
100
108
|
|
|
101
109
|
|
|
102
110
|
|
|
103
|
-
|
|
111
|
+
</body>
|
|
104
112
|
|
|
105
113
|
</html>
|
|
106
114
|
|
1
誤字修正
test
CHANGED
|
@@ -18,9 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
<!doctype html>
|
|
21
|
+
```<!doctype html>
|
|
24
22
|
|
|
25
23
|
<html lang="ja">
|
|
26
24
|
|
|
@@ -106,12 +104,4 @@
|
|
|
106
104
|
|
|
107
105
|
</html>
|
|
108
106
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
107
|
```
|