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

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

ただいまの
回答率

90.34%

  • HTTP

    566questions

    HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

HTMLでフォーム作成が詰まっています。

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 146

therealbaou

score 2

HTMLのテキストを学習中です。
プルダウンメニュー、テキストフィールド、送信ボタンの幅を30emで調整するのに
以下の文章を書きました。対応画面ですべての横幅が揃うらしいのですが全く変化しません。
検証サイトで調べてもエラーで出るわけでもなく書き直しもしましたが結果は同じです。
いよいよ詰まってしまったのですが考えられる原因はありますか?

<!--メイン-->
<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">雑誌・Webサイトを見て</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;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Orlofsky

    2018/07/17 07:39

    コードは https://teratail.com/help#about-markdown の[コードを入力]を使ってください。

    キャンセル

  • Orlofsky

    2018/07/17 07:40

    アルファベットを全角文字で書くのは止めましょうね。

    キャンセル

  • dit.

    2018/07/17 10:34

    タグはHTTPではなくHTML、CSSが適当かと思います。

    キャンセル

回答 2

+2

"/*contact.html */"から始まる部分は、スタイルシートの記述のように見えます。
しかし、HTML ("<!--メイン-->"から始まる部分)には、スタイルシートの読み込みが指定されていません。
そのため、「width: 30em;」と指定しているスタイルが適用されないのです。

対応策:
1)"/*contact.html */"から始まる部分をテキストファイルに保存し、そのファイルの拡張子を .css にします。(テキストファイルをHTMLファイルと同じディレクトリ(フォルダ)に作り、そのファイル名を contact.ccs にしたとして話を続けます)

2)HTMLの最初に、スタイルシートの読み込みを指定する下記の行を追加します。

<link rel="stylesheet" type="text/css" href="contact.css">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/17 10:47

    回答ありがとうございます。ページ全文をコピペしなかったので勘違いさせてしまいすいません。
    あらためて全文を貼り付けておきます。お手数おかけします。

    <!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">雑誌・Webサイトを見て</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>&copy;Copyright KUJIRA Cafe. All rights reserverd.</p>
    </footer>
    <!--フッターここまで-->
    </div>
    </body>
    </html>

    キャンセル

+2

coco_bauerさんが指摘している読み込みが正常にできているとして、
input [name="subject"]{input[name="subject"]{に変更(inputと[の間のスペースを削除)することで件名部分が変更されると思いますがいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTTP

    566questions

    HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。