Q&A
コードは https://teratail.com/help#about-markdown の[コードを入力]を使ってください。
ＨＴＭＬのテキストを学習中です。
プルダウンメニュー、テキストフィールド、送信ボタンの幅を３０ｅｍで調整するのに
以下の文章を書きました。対応画面ですべての横幅が揃うらしいのですが全く変化しません。
検証サイトで調べてもエラーで出るわけでもなく書き直しもしましたが結果は同じです。
いよいよ詰まってしまったのですが考えられる原因はありますか？
<main> <h2>お問い合わせ</h2> <form method="GET" action="result.html"> <div> <label for="kind">お問い合わせの種類</label><br> <select id="kind" name="kind"> <option value="reservation">ご予約</option> <option value="event">イベントについて</option> <option value="contact">その他のお問い合わせ</option> </select> </div> <div> KUJIRA Cafeにご来店いただいたことはありますか<br> <label><input type="radio" name="first" value="yes" checked>はい</label> <label><input type="radio" name="first" value="no">いいえ</label> </div> <div> 当カフェをお知りになったきっかけは？<br> <label><input type="checkbox" name="how" value="friends">知り合いの紹介で</label> <label><input type="checkbox" name="how" value="magazine">雑誌・Ｗｅｂサイトを見て</label> </div> <div> <label>お問い合わせの件名<br> <input type="text" name="subject" palaceholder="お問い合わせ"></label> </div> <div> <label>お問い合わせの具体的な内容<br> <textarea name="message"></textarea></label> </div> <div> <input type="submit" id="title" name="submit" value="送信"> </div> </form> </main> <!--メインここまで--><!--メイン-->
/*contact.html */
form div{
padding: 12px;
border-bottom: 1px dashed #bec2c7;
}
select{
width: 30em;
}
input [name="subject"]{
width: 30em;
}
textarea{
width: 30em;
height: 6em;
}
input[type="submit"]{
margin: 20px 0;
width: 30em;
}
アルファベットを全角文字で書くのは止めましょうね。
タグはHTTPではなくHTML、CSSが適当かと思います。
回答2件
0
coco_bauerさんが指摘している読み込みが正常にできているとして、
input [name="subject"]{をinput[name="subject"]{に変更(inputと[の間のスペースを削除)することで件名部分が変更されると思いますがいかがでしょうか？
投稿2018/07/17 01:34
総合スコア3235
0
"/*contact.html */"から始まる部分は、スタイルシートの記述のように見えます。
しかし、HTML ("<!--メイン-->"から始まる部分)には、スタイルシートの読み込みが指定されていません。
そのため、「width: 30em;」と指定しているスタイルが適用されないのです。
対応策：
１）"/*contact.html */"から始まる部分をテキストファイルに保存し、そのファイルの拡張子を .css にします。（テキストファイルをHTMLファイルと同じディレクトリ(フォルダ）に作り、そのファイル名を contact.ccs にしたとして話を続けます）
２）HTMLの最初に、スタイルシートの読み込みを指定する下記の行を追加します。
<link rel="stylesheet" type="text/css" href="contact.css">
投稿2018/07/17 01:09
総合スコア6915
回答ありがとうございます。ページ全文をコピペしなかったので勘違いさせてしまいすいません。
あらためて全文を貼り付けておきます。お手数おかけします。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 「お問い合わせ｜KUJIRA Cafe」</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<!--ヘッダー-->
<header class="header">
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>
<nav class="nav">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">店舗案内</a></li>
<li><a href="access.html">アクセス</a></li>
<li><a href="menu.html">メニュー</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!--ヘッダーここまで
<!--メイン-->
<main>
<h2>お問い合わせ</h2>
<form method="GET" action="result.html">
<div>
<label for="kind">お問い合わせの種類</label><br>
<select id="kind" name="kind">
<option value="reservation">ご予約</option>
<option value="event">イベントについて</option>
<option value="contact">その他のお問い合わせ</option>
</select>
</div>
<div>
KUJIRA Cafeにご来店いただいたことはありますか<br>
<label><input type="radio" name="first" value="yes" checked>はい</label>
<label><input type="radio" name="first" value="no">いいえ</label>
</div>
<div>
当カフェをお知りになったきっかけは？<br>
<label><input type="checkbox" name="how" value="friends">知り合いの紹介で</label>
<label><input type="checkbox" name="how" value="magazine">雑誌・Ｗｅｂサイトを見て</label>
</div>
<div>
<label>お問い合わせの件名<br>
<input type="text" name="subject" palaceholder="お問い合わせ"></label>
</div>
<div>
<label>お問い合わせの具体的な内容<br>
<textarea name="message"></textarea></label>
</div>
<div>
<input type="submit" id="title" name="submit" value="送信">
</div>
</form>
</main>
<!--メインここまで-->
<!--フッター-->
<footer class="footer">
<p>©Copyright KUJIRA Cafe. All rights reserverd.</p>
</footer>
<!--フッターここまで-->
</div>
</body>
</html>
あなたの回答
tips
プレビュー
