teratail
回答率
85.47%
質問するログイン新規登録
トップCSS3に関する質問webkidの意味がでこない

編集履歴

質問編集履歴

2

ああああああああ！

2022/08/13 08:32

投稿

gujhufiugho
gujhufiugho

スコア245

test CHANGED
@@ -1 +1 @@
1
- IOSでパララックスがきちんと表示されない。（androidでは表示されてます。）
1
+ webkidの意味がでこない
test CHANGED
@@ -1,170 +1,24 @@
1
- IOSのOSのスマホでパララックスの表示の背景がおかしくなって表示されます。（androidでは表示されてます。）２枚の各付属画像下。
2
-
3
- **試したこと**
1
+ でてきません
4
- 原因を検証するために、書いたコードを消去していくと、（提示コード）で、パララックスの背景はきちんと表示されるようですが、今度はIOSのパパラックスの効果だけが適応されなくなってしまいます。Andoroidはきちんと表示されています。
5
-
6
- 以下のサイトも調べて、parallax-bg２の部分に適応していますが、治らないです。
7
- [【パララックス・iOS】background-attachment: fixedがスマホで効かない！？原因と解決法を解説 ](https://taku0.com/ios-parallax)
8
-
9
- **提示コードについてと実際の写真**
10
-
11
- パララックスはparallax-bg3を一番外側に表示し（1500px以上のみ）、parallax-bg２が中央の背景に適応（すべての幅）。CSSのコードに2000以下と500以下の各下の方にパパラックスのコードがあります。どっちも同じコードです。
12
-
13
- parallax-bg２がおかしくなって見えています。または、ＩＯＳのパパラックスの効果が適応されてません。
14
-
15
- **実際に作成した自分のサイトのURL**
2
+ -moz-appearance: none;
16
- [https://rensyuu12.tokyo/PHPMailer/LPmouth1.php](https://rensyuu12.tokyo/PHPMailer/LPmouth1.php)
3
+ -webkit-appearance: none;
17
-
4
+ position : absolute;
18
- **Andoroidの画像**
5
+ z-index : 2;
19
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-04/189b593f-a965-47e1-992d-2a54190cd885.jpeg)
20
- **IOSの画像**
6
+ w-moz-appearance: none;
21
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-04/5fd32def-aa83-4d02-854b-1a729ee49ee8.png)
22
- ```html
7
+ -webkit-appearance: none;
23
- <!DOCTYPE html>
8
+ position : absolute;
24
-
25
- <html lang="ja">
26
-
27
- <head>
9
+ z-index : 2;
28
- <meta content="text/html; charset=utf-8" />
29
- <meta name="viewport" content="width=device-width, initial-scale=1">
30
-
31
-
32
- <link rel="stylesheet" href="0LPcoderesponsive2000orless.css">
33
-
34
- <link rel="stylesheet" href="7LPcoderesponsive500orless.css">
35
-
36
- <title></title>
37
-
38
-
39
-
40
- <style>
10
+ width : 48px;
41
-
42
- .wrapper{
11
+ height : 48px;
12
+ left : -48px;
43
- overflow: hidden;
13
+ top : 1px;
14
+ margin : 0px;
15
+ box-shadow : 26px -1px #FFF;
44
16
  }
45
-
46
- </style>
47
-
48
- </head>
49
- <body>
50
-
51
- <div class="wrapper">
52
-
53
-
54
-
55
- <!--1500px以上のみ左右にパパラックス適応parallax-bg3-->
56
- <div class="parallax-bg3" style="display: contents;">
57
- <!--PCで横並び２つの画像-->
58
- <div class="wrap0001">
59
-
60
- <div class="item2 parallax-bg2"><!--ぼかし画像のパパラックス適応parallax-bg2-->
61
- <img src="https://rensyuu12.tokyo/PHPMailer/image3/image4.png" alt="" id="sumaho3" class=""><!--スライドイン画像-->
62
- </div>
63
-
64
- <div class="item2 parallax-bg2">
65
- <img src="https://rensyuu12.tokyo/PHPMailer/image3/image5.png" alt="" id="sumaho4" class=""><!--スライドイン画像-->
66
- </div>
67
-
68
-
69
-
70
- </div>
71
- </div>
72
-
73
-
74
- </div>
75
- </body>
76
-
77
- </html>
78
- ```
79
-
80
- ```CSS
81
- /* 画面幅（2000px以下の時までの適応）指定 */
82
- @media screen and (max-width: 2000px){
17
+ label.radio_text input[idth : 48px;
83
- /* 画像の設定 */
84
- #sumaho3{
85
- width:80px;
86
- height: 100px;
18
+ height : 48px;
19
+ left : -48px;
20
+ top : 1px;
87
- margin-left: 0px;
21
+ margin : 0px;
88
- margin-top: 8px;
89
- filter: drop-shadow(3px 3px 1.5px rgb(13, 13, 13));
90
-
91
- }
92
-
93
- /*画像の設定 */
94
- #sumaho4{
95
- width:80px;
96
- height: 100px;
97
- margin-left: 5px;
98
- margin-top: 8px;
99
- filter: drop-shadow(3px 3px 1.5px rgb(13, 13, 13));
100
-
101
- }
102
- /*650px以上表示パパラックス*/
22
+ box-shadow : 26px -1px #FFF;
103
- .parallax-bg {
104
- background-image: url('image/45mouth.png');
105
- background-attachment: fixed;
106
- background-position: center;
107
- background-size: cover;
108
- background-repeat: no-repeat;
109
23
  }
110
-
111
- /*パパラックスぼかし画像*/
112
- .parallax-bg2 {
113
- background-image: url('image/48mouth.png');
114
- background-attachment: fixed;
115
- background-position: center;
116
- background-size: cover;
117
- background-repeat: no-repeat;
24
+ label.radio_text input[なぜですか。
118
- }
119
- /*※1500以上のみ両脇表示特定の場所。パパラックス画像両脇表示*/
120
- .parallax-bg3 {
121
- background-image: url('image/45mouth.png');
122
- background-attachment: fixed;
123
- background-position: center;
124
- background-size: cover;
125
- background-repeat: no-repeat;
126
- }
127
- /* 画面幅（500px以下の時までの適応）指定 */
128
- @media screen and (max-width: 500px){
129
- /* 画像の設定 */
130
- #sumaho3{
131
- width:80px;
132
- height: 100px;
133
- margin: 0 auto;/* スマホサイズ中央配置 */
134
- }
135
-
136
- /* 画像の設定 */
137
- #sumaho4{
138
- width:80px;
139
- height: 100px;
140
- margin: 0 auto;/* スマホサイズ中央配置 */
141
-
142
- }
143
- /*650px以上表示パパラックス*/
144
- .parallax-bg {
145
- background-image: url('image/45mouth.png');
146
- background-attachment: fixed;
147
- background-position: center;
148
- background-size: cover;
149
- background-repeat: no-repeat;
150
- }
151
-
152
- /*パパラックスぼかし画像*/
153
- .parallax-bg2 {
154
- background-image: url('image/48mouth.png');
155
- background-attachment: fixed;
156
- background-position: center;
157
- background-size: cover;
158
- background-repeat: no-repeat;
159
- }
160
- /*※1500以上のみ両脇表示特定の場所。パパラックス画像両脇表示*/
161
- .parallax-bg3 {
162
- background-image: url('image/45mouth.png');
163
- background-attachment: fixed;
164
- background-position: center;
165
- background-size: cover;
166
- background-repeat: no-repeat;
167
- }
168
-
169
- }
170
- ```
CSS3SCSSCSS

1

文章まちがえです

2022/07/04 09:06

投稿

gujhufiugho
gujhufiugho

スコア245

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
  **提示コードについてと実際の写真**
10
10
 
11
- パララックスはparallax-bg3を一番外側に表示し（1500px以上のみ）、parallax-bg２が中央の背景に適応（すべての幅）。CSSのコードに2000以下と500以下のの各したの方にパパラックスのコードがあります。どっちも同じコードです。
11
+ パララックスはparallax-bg3を一番外側に表示し（1500px以上のみ）、parallax-bg２が中央の背景に適応（すべての幅）。CSSのコードに2000以下と500以下の各下の方にパパラックスのコードがあります。どっちも同じコードです。
12
12
 
13
- parallax-bg２がおかしくなって見えてまいます。
13
+ parallax-bg２がおかしくなって見えています。または、ＩＯＳのパパラックスの効果が適応されてません。
14
14
 
15
15
  **実際に作成した自分のサイトのURL**
16
16
  [https://rensyuu12.tokyo/PHPMailer/LPmouth1.php](https://rensyuu12.tokyo/PHPMailer/LPmouth1.php)
CSS3SCSSCSS