質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1427閲覧

textareaが反映されません

takumi378

総合スコア2

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/26 02:54

編集2020/04/26 08:29

イメージ説明

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の背景が実装されません
サイトでいうメッセージボックスのカラーが装飾されてないです

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/04/26 03:06

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

2020/04/26 04:03

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

2020/04/26 05:51

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

2020/04/26 06:02

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

回答2

0

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

投稿2020/04/26 04:20

編集2020/04/26 04:20
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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}

↓ このサンプルのCSSエリアにエラーが出ているのが確認できると思います

動くサンプル:https://jsfiddle.net/hop15d82/

投稿2020/04/26 07:32

編集2020/04/26 07:33
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takumi378

2020/04/26 08:21

ありがとうございます 確かに、見えない文字が入っていたので消したのですが 変化なかったです
takumi378

2020/04/26 08:30

このstyle.cssの赤文字の意味はエラーを起こしてるという意味でしょうか?
takumi378

2020/04/26 10:54

ほんとですね ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問