textareaが反映されません

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
6    <title>WCB Cafe-CONTACT</title>
7    <link rel="stylesheet" href="css/style.css">
8    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9    <link rel="stylesheet" href="htpps://fonts.googleapis.com/css?family=Philosopher">
10    <link rel="icon" type="image/png" href="images/favicon.png">
11
12</head>
13<body>
14    <div id="contact" class="big-bg">
15        <header class="page-header wrapper">
16            <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCB カフェホーム"></a></h1>
17            <nav>
18                <ul class="main-navi">
19                    <li><a href="news.html">News</a></li>
20                    <li><a href="menu.html">Menu</a></li>
21                    <li><a href="contact.html">Contact</a></li>
22                </ul>
23            </nav>
24        </header>
25       <div class="wrapper">
26           <h2 class="page-title">Contact</h2>
27           <form action="#">
28               <div>
29                   <label for="name">お名前</label>
30                   <input type="text" id="name" name="your-name">
31               </div>
32
33               <div>
34                    <label for="email">メールアドレス</label>
35                    <input type="email" id="email" name="your-email">
36               </div>
37
38               <div>
39                   <label for="message">メッセージ</label>
40                   <textarea name="your-message" id="message"></textarea>
41               </div>
42
43               <input type="submit" class="button" value="送信">
44           </form>
45       </div>
46       
47    </div>
48    <section id="location">
49        <div class="wrapper">
50            <div class="location-info">
51                <h3 class="sub-title">カフェ　東駅前店</h3>
52                <p>
53                    住所： 東京都〇〇区<br>
54                    〇〇〇〇〇〇〇 000-22-1<br>
55                    〇〇〇〇<br>
56                    電話： 03-1111-1111<br>
57                    営業時間： 10:00〜20:00<br>
58                    休日：水曜
59                </p>
60            </div><!--.location-info-->
61        
62            <div class="location-map">
63                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.4471894579833!2d139.73466315064783!3d35.66598938010076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b835942e165%3A0xb4897f1f4264c771!2z44CSMTA2LTAwMzIg5p2x5Lqs6YO95riv5Yy65YWt5pys5pyo77yS5LiB55uu77yU4oiS77yV!5e0!3m2!1sja!2sjp!4v1587871428542!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
64            </div>
65        </div><!--wrapper-->
66    </section>
67    <section id="sns">
68        <div class="wrapper">
69            <div class="sns-box">
70                <h3 class="sub-title">Facebook</h3>
71                Facebookプラグイン
72            </div>
73
74            <div class="sns-box">
75                <h3 class="sub-title">Twitter</h3>
76                Twitterプラグイン
77            </div>
78
79            <div class="sns-box">
80                <h3 class="sub-title">YouTube</h3>
81                YouTubeプラグイン
82            </div>
83        </div>
84    </section>
85 
86    
87    <footer>
88        <div class="wrapper">
89            <p><small>&copy; 2019 Manabox</small></p>
90        </div>
91    </footer>
92</body>
93</html>

css
1#contact {
2    background-image: url(../images/contact-bg.jpg);
3    min-height: 100vh;
4}
5form div {
6    margin-bottom: 14px;
7}
8label {
9    font-size: 1.125rem;
10    margin-bottom: 10px;
11    display: block;
12}
13input[type="text"],
14input[type="email"],
15textarea {
16    background: rgba(255, 255, 255, .5);
17    border: 1px #fff solid;
18    border-radius: 5px;
19    padding: 10px ;
20    font-size: 1rem;
21}
22input[type="text"],
23input[type="email"] {
24    width: 100%;
25    max-width: 240px;
26}
27textarea {
28    width: 100%;
29    max-width: 480px;
30    height: 6rem;
31 }  
32input[type="submit"] {
33    border: none;
34    cursor: pointer;
35    line-height: 1;
36}
37/* 店舗情報 */
38#location {
39    padding: 4% 0;
40}
41#location .wrapper {
42    display: flex;
43    justify-content: space-between;
44}
45.location-info {
46    width: 22%;
47}
48.location-info {
49    padding: 12px 10px;
50}
51.location-map {
52    width: 74%;
53}
54iframe {
55    width: 100%;
56}
57/* SNS */
58#sns {
59    background: #FAF7F0;
60    padding: 4%  0;
61}
62#sns .wrapper {
63    display: flex;
64    justify-content: space-between;
65}
66#sns .sub-title {
67    margin-bottom: 30px;
68}
69.sns-box {
70    width: 30%;
71}

textareaの背景が実装されません
サイトでいうメッセージボックスのカラーが装飾されてないです

わかる方ご教授お願いします

kei344

2020/04/26 03:06

（質問文は編集できます）コードはスクリーンショットだけでなくコードブロックにテキストでお書きください。

m.ts10806

2020/04/26 04:03

コードを画像で提示されても再現確認不可です。コピペで同じ現象確認できるように配慮してください。また再現できるブラウザとバージョンも必要です

m.ts10806

2020/04/26 05:14

コードはマークダウンの機能を利用してご提示ください。 https://teratail.com/questions/238564

takumi378

2020/04/26 05:51

無知で申し訳ございません改善いたしました

m.ts10806

2020/04/26 06:02

いえ、謝る必要はないかと。誰も怒ってませんよ。指摘はアドバイスと等価です。

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

回答2件

Ctrl + Shift + I ( Windowsの場合
で、デベロッパーツール（開発者ツール）を起動して、そもそも他のstyleで打ち消されていないか、そもそも適応されているかを確認してください。
原因箇所を取り除けば適応されるはずです。

投稿2020/04/26 04:20

編集2020/04/26 04:20

kyoya0819

総合スコア10429

ベストアンサー

謎の制御文字が入っているので、前後を削除して書き直してみてください。

CSS
1input[type="text"],
2input[type="email"] {
3    width: 100%;
4    max-width: 240px;
5}
6textarea {
7    width: 100%;
8    max-width: 480px;
9    height: 6rem;
10 /**/}  /* ← ここに謎の制御文字が入っている */
11input[type="submit"] {
12    border: none;
13    cursor: pointer;
14    line-height: 1;
15}