teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

レスポンシブ対応

2018/08/19 13:54

投稿

takna
takna

スコア784

answer CHANGED
@@ -13,8 +13,8 @@
13
13
  <meta charset="utf-8">
14
14
  <title>サンプル</title>
15
15
  <style>
16
+ .txt_center {
16
- .taiken .answer-wrapper {
17
+ text-align: center;
17
- /*margin-left: 1.5rem;*/
18
18
  }
19
19
  .taiken input[type="radio"] {
20
20
  /* label に背景色を設定したくないなら opacity: 0; で見えなくする */
@@ -24,16 +24,30 @@
24
24
  .taiken label {
25
25
  display: inline-block;
26
26
  margin-left: -1.5rem; /* 変更 */
27
- padding: .5em 1em;
27
+ padding: .5em .5em; /* 変更 */
28
28
  text-align: center;
29
29
  background-color: #FFF;
30
30
  border: 1px solid silver;
31
31
  border-radius: 3px;
32
32
  }
33
+
33
34
  .taiken input[type="radio"]:checked + label,
34
35
  .taiken label:hover {
35
36
  background: #f5c4ac;
36
37
  }
38
+
39
+ /* 以下のCSSを追加 */
40
+ @media (max-width:480px) {
41
+ .taiken .answer-wrapper {
42
+ text-align: center;
43
+ font-size: smaller;
44
+ }
45
+ }
46
+ @media (min-width:481px) {
47
+ .taiken label {
48
+ padding: .5em 1em;
49
+ }
50
+ }
37
51
  </style>
38
52
  </head>
39
53
 
@@ -50,7 +64,7 @@
50
64
  <input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label>
51
65
  </p>
52
66
 
53
- <p><input type="submit" name="送信" value="診断"></p>
67
+ <p class="txt_center"><input type="submit" name="送信" value="診断"></p>
54
68
  </form>
55
69
 
56
70
  </body>

2

幅調整 & ラジオボタン選択時のハイライトが見えるのを解決

2018/08/19 13:53

投稿

takna
takna

スコア784

answer CHANGED
@@ -8,47 +8,51 @@
8
8
  ラジオボタンの `display: none;` を消し、
9
9
  位置調整でラジオボタンが見えないようにしたら良いです。
10
10
 
11
- ```<!doctype html>
12
- <html lang="ja">
11
+ ```<html lang="ja">
13
- <head>
12
+ <head>
14
- <meta charset="utf-8">
13
+ <meta charset="utf-8">
15
- <title>サンプル</title>
14
+ <title>サンプル</title>
16
- <style>
15
+ <style>
16
+ .taiken .answer-wrapper {
17
+ /*margin-left: 1.5rem;*/
18
+ }
17
- .taiken input[type="radio"] {
19
+ .taiken input[type="radio"] {
18
- /* label に背景色を設定したくないなら opacity: 0; で見えなくする */
20
+ /* label に背景色を設定したくないなら opacity: 0; で見えなくする */
21
+ width: 1rem; /* 追加 */
22
+ margin-right: .5rem; /* 追加 */
19
- }
23
+ }
20
- .taiken label {
24
+ .taiken label {
21
- display:inline-block;
25
+ display: inline-block;
22
- margin-left: -1rem; /* 追加 */
26
+ margin-left: -1.5rem; /* 変更 */
23
- padding: .5em 1em;
27
+ padding: .5em 1em;
24
- text-align:center;
28
+ text-align: center;
25
- background-color: #FFF; /* 追加 */
29
+ background-color: #FFF;
26
- border: 1px solid silver;
30
+ border: 1px solid silver;
27
- border-radius: 3px;
31
+ border-radius: 3px;
28
- }
32
+ }
29
- .taiken input[type="radio"]:checked + label,
33
+ .taiken input[type="radio"]:checked + label,
30
- .taiken label:hover {
34
+ .taiken label:hover {
31
- background: #f5c4ac;
35
+ background: #f5c4ac;
32
- }
36
+ }
33
- </style>
37
+ </style>
34
- </head>
38
+ </head>
35
39
 
36
40
 
37
- <body>
41
+ <body>
38
- <!-- https://teratail.com/questions/141946 -->
42
+ <!-- https://teratail.com/questions/141946 -->
39
43
 
40
- <form action="#" method="post" class="taiken">
44
+ <form action="#" method="post" class="taiken">
41
- <p><span>Q14.</span> きちょうめんな性格だと思う</p>
45
+ <p><span>Q14.</span> きちょうめんな性格だと思う</p>
42
46
 
43
- <p>
47
+ <p class="answer-wrapper">
44
- <input type="radio" name="q14" value="3" required id="q14answer3"><label for="q14answer3">そう思う</label>
48
+ <input type="radio" name="q14" value="3" required id="q14answer3"><label for="q14answer3">そう思う</label>
45
- <input type="radio" name="q14" value="2" required id="q14answer2"><label for="q14answer2">どちらでもない</label>
49
+ <input type="radio" name="q14" value="2" required id="q14answer2"><label for="q14answer2">どちらでもない</label>
46
- <input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label>
50
+ <input type="radio" name="q14" value="1" required id="q14answer1"><label for="q14answer1">そう思わない</label>
47
- </p>
51
+ </p>
48
52
 
49
- <p><input type="submit" name="送信" value="診断"></p>
53
+ <p><input type="submit" name="送信" value="診断"></p>
50
- </form>
54
+ </form>
51
55
 
52
- </body>
56
+ </body>
53
57
  </html>
54
58
  ```

1

誤字修正

2018/08/19 13:24

投稿

takna
takna

スコア784

answer CHANGED
@@ -8,8 +8,7 @@
8
8
  ラジオボタンの `display: none;` を消し、
9
9
  位置調整でラジオボタンが見えないようにしたら良いです。
10
10
 
11
- ```
12
- <!doctype html>
11
+ ```<!doctype html>
13
12
  <html lang="ja">
14
13
  <head>
15
14
  <meta charset="utf-8">
@@ -52,8 +51,4 @@
52
51
 
53
52
  </body>
54
53
  </html>
55
-
56
-
57
-
58
-
59
54
  ```