質問編集履歴

3

誤字

2021/04/01 12:50

投稿

M_Ren
M_Ren

スコア4

test CHANGED
File without changes
test CHANGED
@@ -124,6 +124,6 @@
124
124
 
125
125
  aタグにheight: 100%;を指定したところ、このようになりました。白色のところまでクリック範囲が拡大させれましたが、角が丸くなっているところまで、子要素のが広がっていないのが今の問題です。
126
126
 
127
- これは、子要素にも親要素と同じように、border-radius: 100vw;を指定するしかないのでしょうか?
127
+ これは、子要素にも親要素と同じように、border-radiusを指定するして合わせにいくしかないのでしょうか?
128
128
 
129
129
  ![イメージ説明](f5e07c596cbd98310261e3e62e67e376.png)

2

追記

2021/04/01 12:50

投稿

M_Ren
M_Ren

スコア4

test CHANGED
File without changes
test CHANGED
@@ -101,3 +101,29 @@
101
101
  aタグの「ここをクリック」の位置が変わるのではなく、親要素にmargin-topが効いている
102
102
 
103
103
  ![イメージ説明](d2faf7cf63aca55da9ad031407bb9db4.gif)
104
+
105
+
106
+
107
+ ###追記2
108
+
109
+
110
+
111
+ 実現したいこと
112
+
113
+
114
+
115
+ このように、クリック範囲が親要素いっぱいに広がっているようにしたいです。(現状は、テキストの部分のみ)
116
+
117
+ ![イメージ説明](1485b58adde44a8c135d3ef4fb8a83b7.gif)
118
+
119
+
120
+
121
+ 現状の状態
122
+
123
+
124
+
125
+ aタグにheight: 100%;を指定したところ、このようになりました。白色のところまでクリック範囲が拡大させれましたが、角が丸くなっているところまで、子要素のが広がっていないのが今の問題です。
126
+
127
+ これは、子要素にも親要素と同じように、border-radius: 100vw;を指定するしかないのでしょうか?
128
+
129
+ ![イメージ説明](f5e07c596cbd98310261e3e62e67e376.png)

1

追記

2021/04/01 12:48

投稿

M_Ren
M_Ren

スコア4

test CHANGED
File without changes
test CHANGED
@@ -61,3 +61,43 @@
61
61
  上記の2つをためしましたがだめでした。
62
62
 
63
63
  display: block;が正しくしていされていないのでしょうか?
64
+
65
+
66
+
67
+ ###追記
68
+
69
+
70
+
71
+ コード(修正後)
72
+
73
+ ```
74
+
75
+ .a{
76
+
77
+ background-color: #da6b64;
78
+
79
+ border-radius: 100vw;
80
+
81
+ padding: 0 40px;
82
+
83
+ height: 100px;
84
+
85
+ }
86
+
87
+
88
+
89
+ .a a{
90
+
91
+ display: block;
92
+
93
+ margin-top: 100px;
94
+
95
+ }
96
+
97
+ ```
98
+
99
+ 状態 
100
+
101
+ aタグの「ここをクリック」の位置が変わるのではなく、親要素にmargin-topが効いている
102
+
103
+ ![イメージ説明](d2faf7cf63aca55da9ad031407bb9db4.gif)