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

質問編集履歴

3

誤字

2021/04/01 12:50

投稿

M_Ren
M_Ren

スコア4

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

2

追記

2021/04/01 12:50

投稿

M_Ren
M_Ren

スコア4

title CHANGED
File without changes
body CHANGED
@@ -49,4 +49,17 @@
49
49
  ```
50
50
  状態 
51
51
  aタグの「ここをクリック」の位置が変わるのではなく、親要素にmargin-topが効いている
52
- ![イメージ説明](d2faf7cf63aca55da9ad031407bb9db4.gif)
52
+ ![イメージ説明](d2faf7cf63aca55da9ad031407bb9db4.gif)
53
+
54
+ ###追記2
55
+
56
+ 実現したいこと
57
+
58
+ このように、クリック範囲が親要素いっぱいに広がっているようにしたいです。(現状は、テキストの部分のみ)
59
+ ![イメージ説明](1485b58adde44a8c135d3ef4fb8a83b7.gif)
60
+
61
+ 現状の状態
62
+
63
+ aタグにheight: 100%;を指定したところ、このようになりました。白色のところまでクリック範囲が拡大させれましたが、角が丸くなっているところまで、子要素のが広がっていないのが今の問題です。
64
+ これは、子要素にも親要素と同じように、border-radius: 100vw;を指定するしかないのでしょうか?
65
+ ![イメージ説明](f5e07c596cbd98310261e3e62e67e376.png)

1

追記

2021/04/01 12:48

投稿

M_Ren
M_Ren

スコア4

title CHANGED
File without changes
body CHANGED
@@ -29,4 +29,24 @@
29
29
  aタグのheight: 100%;
30
30
 
31
31
  上記の2つをためしましたがだめでした。
32
- display: block;が正しくしていされていないのでしょうか?
32
+ display: block;が正しくしていされていないのでしょうか?
33
+
34
+ ###追記
35
+
36
+ コード(修正後)
37
+ ```
38
+ .a{
39
+ background-color: #da6b64;
40
+ border-radius: 100vw;
41
+ padding: 0 40px;
42
+ height: 100px;
43
+ }
44
+
45
+ .a a{
46
+ display: block;
47
+ margin-top: 100px;
48
+ }
49
+ ```
50
+ 状態 
51
+ aタグの「ここをクリック」の位置が変わるのではなく、親要素にmargin-topが効いている
52
+ ![イメージ説明](d2faf7cf63aca55da9ad031407bb9db4.gif)