conatct-input,textareaを枠内におさめたい

前提・実現したいこと

表題の通り、レスポンシブ時に枠内に収めたい

発生している問題・エラーメッセージ

width: ;がエラーになっており、反映されない

試したこと

下記のサイトで計算方法を復習しなおしました。また、IEで開いていますが、使えないサイトでもなさそうです。

calc　使い方

・Googleサイトでも確認しています。が同じ現象です。

ご教授いただけると幸いです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="robots" content="noindex">
8    <title>コーディング</title>
9
10 <link rel="stylesheet" href="./CSS/destyle.css">
11 <link rel="stylesheet" href="./CSS/style.css">
12</head>
13<body>
14 <section class="contact" id="contact-link">
15            <div class="container">
16                <p class="jp-ttl con-ttl">お問い合わせ</p><!-- /.jp-ttl -->
17                <p class="en-ttl con-ttl">contact</p><!-- /.en-ttl -->
18            
19                <p class="message">コーディングの人出が足りないとき、<br> あなたの力になります</p>
20                <div class="form-bg aos-init aos-animate" data-aos="zoom-in" >
21                    <form class="form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfyhr5CGpd1GWI1uP0lrjBuJWEFlpVsisPENuAR06FGfxUGwQ/formResponse">
22                        <div class="form-item">
23                            <div class="form-fx">
24                                <p class="item">お名前</p><!-- /.item -->
25                                <p class="necessary">必須</p><!-- /.necessary -->
26                            </div><!-- /.form-fx -->
27                            <input type="text" name="name">
28                        </div><!-- /.form-item -->
29                       
30                        <div class="form-item">
31                            <div class="form-fx">
32                                <p class="item">メールアドレス</p><!-- /.item -->
33                                <p class="necessary">必須</p><!-- /.necessary -->
34                            </div><!-- /.form-fx -->
35                            <input type="text" name="e-mail">
36                        </div><!-- /.form-item -->
37                        
38                        <div class="form-item">
39                            <div class="form-fx">
40                                <p class="item">お問い合わせ内容</p><!-- /.item -->
41                                <p class="necessary">必須</p><!-- /.necessary -->
42                            </div><!-- /.form-fx -->
43                            <textarea name="entry" type="text"　rows="4" cols="60"></textarea>
44                        </div><!-- /.form-item -->
45                        
46                        <div class="agree">
47                            <label class="policy" for="policy">
48                                <input class="checkbox" type="checkbox" name="policy" value="required">プライバシーポリシーに同意する<!-- /.agree -->
49                               </label>
50                        </div><!-- /.agree -->
51                        <div class="sent-btn cmn-link">
52                            <input type="submit" value="送信する">
53                        </div><!-- /.sent-btn -->
54                    </form>
55                </div><!-- /.form-bg -->
56            </div><!-- /.container -->
57        </section><!-- /.contact -->
58</body>
59</html>

CSS
1
2.contact {
3  width: 100%;
4  height: 1027px;
5  background: -webkit-gradient(linear, left top, right top, from(#05A5FA), color-stop(#63FBD7), to(#67FFD6));
6  background: -webkit-linear-gradient(left, #05A5FA, #63FBD7, #67FFD6);
7  background: linear-gradient(to right, #05A5FA, #63FBD7, #67FFD6);
8}
9
10.con-ttl {
11  color: #fff;
12}
13
14.message {
15  color: #fff;
16  text-align: center;
17}
18
19@media screen and (max-width: 576px) {
20  .message {
21    margin: 16px 0px;
22  }
23}
24
25@media screen and (max-width: 992px) {
26  .message {
27    margin: 16px 0px;
28  }
29}
30
31.form-bg {
32  width: 70%;
33  height: 67%;
34  background-color: #fff;
35  border: 1px solid #00000029;
36  -webkit-box-shadow: 0px 3px 6px #00000029;
37          box-shadow: 0px 3px 6px #00000029;
38  margin: 0 auto;
39  margin: 44px 230px auto;
40}
41
42@media screen and (max-width: 576px) {
43  .form-bg {
44    padding: 35px 0px;
45    margin: 0 auto;
46  }
47}
48
49@media screen and (max-width: 992px) {
50  .form-bg {
51    padding: 35px 0px;
52    margin: 0 auto;
53  }
54}
55
56.form-bg .form {
57  width: 85%;
58  margin: 0 auto;
59  padding: 35px 4vw;
60}
61
62@media screen and (max-width: 769px) {
63  .form-bg .form {
64    margin: 0 auto;
65  }
66}
67
68.form-bg .form-item {
69  padding-left: 62px;
70}
71
72.form-bg .form-item .form-fx {
73  display: -webkit-box;
74  display: -webkit-flex;
75  display: -ms-flexbox;
76  display: flex;
77  -webkit-box-align: center;
78  -webkit-align-items: center;
79      -ms-flex-align: center;
80          align-items: center;
81  padding-top: 34px;
82}
83
84.form-bg .form-item .form-fx + .form-item {
85  padding-top: 27px;
86}
87
88.form-bg .form-item .form-fx .item {
89  margin-right: 20px;
90}
91
92.form-bg .form-item .form-fx .necessary {
93  display: block;
94  background-color: #0C449B;
95  width: 60px;
96  height: 30px;
97  border-radius: 10px;
98  color: #fff;
99  font-size: 1.4rem;
100  text-align: center;
101  padding: 5px;
102}
103
104.form-bg .form-item input {
105  width: calc(500px/908px*100%);
106  height: calc(43px/689px*100%);
107  border-radius: 3px;
108  background-color: #EEFBFB;
109  margin-top: 39px;
110}
111
112@media screen and (max-width: 769px) {
113  .form-bg .form-item input {
114    width: calc(783/908px*100%);
115    height: 43px;
116  }
117}
118
119.form-bg .form-item textarea {
120  background-color: #EEFBFB;
121  margin-top: 39px;
122  width: calc(783/908px*100%);
123  height: calc(180px/689px*100%);
124}
125
126@media screen and (max-width: 769px) {
127  .form-bg .form-item textarea {
128    width: 60%;
129    height: 50%;
130  }
131}
132
133@media screen and (max-width: 576px) {
134  .form-bg .form-item textarea {
135    width: 60%;
136    height: 50%;
137  }
138}
139
140@media screen and (max-width: 992px) {
141  .form-bg .form-item textarea {
142    width: 60%;
143    height: 50%;
144  }
145}
146
147.form-bg .agree {
148  display: block;
149  display: -webkit-box;
150  display: -webkit-flex;
151  display: -ms-flexbox;
152  display: flex;
153  -webkit-box-align: center;
154  -webkit-align-items: center;
155      -ms-flex-align: center;
156          align-items: center;
157  vertical-align: baseline;
158}
159
160.form-bg .agree .policy {
161  display: block;
162  margin: 0 auto;
163  padding-top: 27px;
164  padding-bottom: 30px;
165}
166
167.form-bg .sent-btn {
168  display: block;
169  margin-bottom: 35px;
170  margin: 0 auto;
171}
172
173.form-bg .sent-btn input {
174  display: block;
175  color: #fff;
176  margin: 0 auto;
177  -webkit-box-align: center;
178  -webkit-align-items: center;
179      -ms-flex-align: center;
180          align-items: center;
181  padding: 10px;
182}

行動規範の内容に同意します

回答1件

ベストアンサー

文法エラーだと思います。

乗算です。引数の少なくとも 1 つは <number> でなければなりません。
...
除算です。右側は <number> でなければなりません。
[calc() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/calc(%29)

投稿2021/10/20 08:13