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

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

ただいまの
回答率

90.53%

  • HTML

    8926questions

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

  • CSS

    5752questions

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

HTMLで備考欄が記入欄と同じ高さになりません

解決済

回答 2

投稿

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

andrew57

score 110

前提・実現したいこと

HTMLで備考欄が記入欄という文字を隣のテキストボックスと同じにしたいです。
イメージ説明

index2.html

<!DOCTYPE html>
<html lang=“ja”>
 <head>
  <meta charset="UTF-8">
  <title>My Web Site</title>
  <link rel="stylesheet" href="style2.css">

 </head>
 <body>



 <header>
    <div class="header-left">
      <img class="logo" src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
 </div>

</header>



<div class="main">
<ol class="topic-path">
  <li><a href="#">一覧へ</a></li>
  <li>登録</li>
</ol>


<div class="container">
<h1>登録</h1>
    <hr>


<form action="confirm.php" method="post">
<table  border="0" class="touroku">

  <tr>
    <td align="right"> 氏名: </td>
    <td><input type="text" size="25" name="yourname"></td>
  </tr>

  <tr>
    <td align="right"> 都道府県: </td>
    <td>  <select name="live">
            <option value="選択してください">選択してください</option>
            <option value="東京">東京</option>
            <option value="大阪">大阪</option>
            <option value="名古屋">名古屋</option>
           </select>
    </td>
  </tr>

  <tr>
    <td align="right"> 電話番号: </td>
    <td><input type="text" size="30" name="tel"></td>
  </tr>

  <tr>
    <td align="right"> 性別: </td>
    <td><label><input type="radio" name="gender" value="男性">男性</label>
        <label><input type="radio" name="gender" value="女性">女性</label>
        <label><input type="radio" name="gender" value="未回答">未回答</label>
    </td>
  </tr>

  <tr>
    <td align="right"> 趣味:</td>
    <td>
      <label><input type="checkbox" value="映画" name="shumi[1]">映画</label>
      <label><input type="checkbox" value="グルメ" name="shumi[2]">グルメ</label>
      <label><input type="checkbox" value="スポーツ" name="shumi[3]">スポーツ<br></label>
      <label><input type="checkbox" value="読書" name="shumi[4]">読書</label>
      <label><input type="checkbox" value="ファッション" name="shumi[5]">ファッション</label>
      <label><input type="checkbox" value="アニメ" name="shumi[6]">アニメ</label>
    </td>
  </tr>

  <tr>
    <td align="right"> 備考欄: </td>
    <td><textarea name="kanso" rows="3" cols="40">感想</textarea></td>
  </tr>

</table>

<a href="index.html"><input type="button" value="一覧へ戻る"></a>
<a href="confirm.php"><input type="submit" value="確認する"></a>
</form>


</div>
</div>
</div>

<footer>




</footer>

</div>


 </body>
</html>

style2.css

@charset "UTF-8";
/*全体のCSS*/

body {
    font-family: "MS ゴシック",sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing=0' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ここから下はそれぞれのCSS */

header {
  height: 60px;
  width: 100%;
  position :fixed;
  top: 0;
  left: 0;
  color: black;
  border-bottom: solid 1px black;
}

header p {
    text-align: center;
    font-size: 30px;
    letter-spacing: 30px;
    padding: 15px 0;
    padding-right: 40px;
    vertical-align: middle;
}

.header-left {
   float: left;
}


.logo {
    width: 130px;
    margin-left: 15px;
    height: 60px;
}


/* mainのCSS */

.main {
  margin-top: 85px;
  background-color: ;
  height: 400px;
  padding-bottom: 120px;
  background-color: white;
}

.container {
 text-align: center;

}

topic-path {
  list-style-type: none;
}
.topic-path li {
  display: inline;
}

.main h1 {
    font-size: 30px;
    text-align: center;
    padding: 20px 0;
}

.container li {
    padding: 14px 15px;
}

table {
  margin-left: 530px;
  margin-top: 20px;
  height: 350px;
}

input[type="submit"] {
  width: 10%;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
  line-height: 1.428571429;
  color: black;
  background-color: white;
text-align: center;

}

input[type="button"] {
  width: 10%;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
  line-height: 1.428571429;
  color: black;
  background-color: white;
  text-align: center;
  margin-left: 550px;
}


footer {
  background-color: #f5f5f5;
  padding: 30px;
  border-top: solid 1px black;
}

どなたかご教授いただけたら嬉しいです。
宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

textareaに対してheightを指定すればいいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

HTMLで備考欄が記入欄という文字を隣のテキストボックスと同じにしたいです。

何を「同じにしたい」のかがわかりにくいですが、こういうことでしょうか。

table.touroku th,
table.touroku td {
  vertical-align: top;
}

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML

    8926questions

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

  • CSS

    5752questions

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