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

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

ただいまの
回答率

90.47%

  • HTML

    9269questions

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

  • CSS

    5996questions

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

  • デザイン

    86questions

    プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

HTMLで作成している検索ボックスの入力欄の高さを広げたいです。

解決済

回答 2

投稿

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

andrew57

score 110

前提・実現したいこと

HTMLで作成している検索ボックスの入力欄の高さを広げたいですが
広げることができません。

cssで設定しているのですが上手くいかないのでご教授いただけたら嬉しいです。

イメージ説明

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<title>My Web Site</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

 </script>

</head>
<body>


<header>

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

<div class="header-right">
  <a href="http://onepiece-naruto.com/blog-category-12.html" class="login" target="_blank"><p class="login1">ログイン</p></a>
</div>


</header>


<div class="main">

    <h1>行ってみたい<span></span>一覧</h1>



</div>


<div class="wrapper">

  <form class="research" action="search.php" method="post">
      <input  class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
      <input class="research" type="submit" name="research" value="検索"><br>
      <a href="index2.html"><input class="signup" type="button" name="btn" value="新規登録"></a>
  </form>


  <table border="1">

    <tr>
      <th class="head">順位</th>
      <th class="head">国名</th>
      <th class="head">食べたい食べ物</th>
      <th class="head">理由</th>
      <th class="head"></th>
    </tr>


  <tr>
    <td>1位</td>
    <td>スペイン</td>
    <td>パエリア</td>
    <td>サッカーを見たいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>2位</td>
    <td>アメリカ</td>
    <td>グリルロブスター</td>
    <td>ダンスの文化を知りたいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>3位</td>
    <td>インド</td>
    <td>カレーライス</td>
    <td>発展途上の国を間近で見てみたいから</td>
   <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>4位</td>
    <td>タイ</td>
    <td>ガパオ</td>
    <td>バンコクの発展具合を見てみたいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>5位</td>
    <td>フィリピン</td>
    <td>アドボ </td>
    <td>友達が楽しそうに働いているから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>



  </table>

</div>






<footer>


<div class="footer-left">
<img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
<p>&copy travel enjoy.</p>
</div>

<div class="footer-list">
    <ul>
      <li><a  href="https://www.airbnb.jp/">利用規約</a></li>
      <li><a  href="https://www.uber.com/ja-JP/">プライバシー</a></li>
      <li><a  href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
    </ul>
</div>



</footer>

 <script src="script.js">

  </script>


</body>
</html>
@charset "UTF-8";
/*全体のCSS*/

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

li {
    list-style: 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%;
  background-color: white;
  position :fixed;
  top: 0;
  left: 0;

}

.header-left {
float: left;
}

.header-right {
    float: right;
    margin-bottom: 30px;
    background-color:blue;
    margin-right: 20px;
    opacity: 0.7;
}

.header-right:hover {
      background-color:skyblue;
}

.header-right a {
    width: 70px;
    margin-top: 14px;
    display: block;
    padding: 22px 25px;
    color: white;
    margin: auto 0;
}


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


/* mainのCSS */

.main {
    padding: 200px 0 150px 0;
    background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
    margin-top: 60px;
    background-size: cover;
    margin-top: 60px;
    width: 100%;
}

form {
    text-align: center;
}

.main h1 {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 100px;
}

span {
    color: #FA3932;
}

/* ボタンのCSS */

input[type="button"] {
  width: 10%;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
  color: black;
  background-color: white;
}

input[type="submit"] {
  width: 5%;
  padding: 3px;
  border-radius: 4px;
  color: black;
  font-size: 14px;
  background-color: white;
}

input[type="search"] {
 height: 1.2em;
}



/* tableのCSS */



table , td, th {
    border: 1px solid #595959;
    border-collapse: collapse;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  font-size: 30px;
}

.warapper {
  height: 300px;
}

table a {
    text-decoration: none;
  color: #0000ff;
}



table a:hover {
    color: #6699ff;
    text-decoration: underline;
}


table a:active {
    color: #993366;
}

.head {
  background-color: #CCFFFF;
}

/* フッターのCSS */

footer {
    border-top: solid 1px black;
    height: 110px;
    width: 100%;
}

footer img {
    width: 130px;
    margin-left: 15px;
    height: 60px;
}

.footer-left {

    height: 110px;
    float: left;
}

.footer-list {
    color:#b3aeb5;
    bottom: 20px;
    vertical-align: middle;
    margin: auto 0;
    float: right;
    font-weight: normal;

    height: 110px;
}

.footer-list li {
    float: left;
    letter-spacing: 7px;
    padding: 47px 15px;
}

footer p {
    margin-top: 10px;
    padding-left: 10px;
}

宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

高さは変更できていると思いますが、いかがでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Web Site</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        /*全体のCSS*/

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

        li {
            list-style: 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%;
            background-color: white;
            position: fixed;
            top: 0;
            left: 0;

        }

        .header-left {
            float: left;
        }

        .header-right {
            float: right;
            margin-bottom: 30px;
            background-color: blue;
            margin-right: 20px;
            opacity: 0.7;
        }

        .header-right:hover {
            background-color: skyblue;
        }

        .header-right a {
            width: 70px;
            margin-top: 14px;
            display: block;
            padding: 22px 25px;
            color: white;
            margin: auto 0;
        }

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

        /* mainのCSS */

        .main {
            padding: 200px 0 150px 0;
            background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
            margin-top: 60px;
            background-size: cover;
            margin-top: 60px;
            width: 100%;
        }

        form {
            text-align: center;
        }

        .main h1 {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 100px;
        }

        span {
            color: #FA3932;
        }

        /* ボタンのCSS */

        input[type="button"] {
            width: 10%;
            border-radius: 4px;
            padding: 4px;
            font-size: 14px;
            color: black;
            background-color: white;
        }

        input[type="submit"] {
            width: 5%;
            padding: 3px;
            border-radius: 4px;
            color: black;
            font-size: 14px;
            background-color: white;
        }

        input[type="search"] {
            height: 50em; /* 値を変更 */
        }

        /* tableのCSS */

        table, td, th {
            border: 1px solid #595959;
            border-collapse: collapse;
            margin: auto;
            margin-top: 100px;
            margin-bottom: 100px;
            font-size: 30px;
        }

        .warapper {
            height: 300px;
        }

        table a {
            text-decoration: none;
            color: #0000ff;
        }

        table a:hover {
            color: #6699ff;
            text-decoration: underline;
        }

        table a:active {
            color: #993366;
        }

        .head {
            background-color: #CCFFFF;
        }

        /* フッターのCSS */

        footer {
            border-top: solid 1px black;
            height: 110px;
            width: 100%;
        }

        footer img {
            width: 130px;
            margin-left: 15px;
            height: 60px;
        }

        .footer-left {

            height: 110px;
            float: left;
        }

        .footer-list {
            color: #b3aeb5;
            bottom: 20px;
            vertical-align: middle;
            margin: auto 0;
            float: right;
            font-weight: normal;

            height: 110px;
        }

        .footer-list li {
            float: left;
            letter-spacing: 7px;
            padding: 47px 15px;
        }

        footer p {
            margin-top: 10px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<header>
    <div class="header-left">
        <img class="logo" src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
    </div>
    <div class="header-right">
        <a href="http://onepiece-naruto.com/blog-category-12.html" class="login" target="_blank"><p class="login1">
            ログイン</p></a>
    </div>
</header>
<div class="main">
    <h1>行ってみたい<span></span>一覧</h1>
</div>
<div class="wrapper">
    <form class="research" action="search.php" method="post">
        <input class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
        <input class="research" type="submit" name="research" value="検索"><br>
        <a href="index2.html"><input class="signup" type="button" name="btn" value="新規登録"></a>
    </form>
    <table border="1">
        <tr>
            <th class="head">順位</th>
            <th class="head">国名</th>
            <th class="head">食べたい食べ物</th>
            <th class="head">理由</th>
            <th class="head"></th>
        </tr>
        <tr>
            <td>1位</td>
            <td>スペイン</td>
            <td>パエリア</td>
            <td>サッカーを見たいから</td>
            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
        </tr>

        <tr>
            <td>2位</td>
            <td>アメリカ</td>
            <td>グリルロブスター</td>
            <td>ダンスの文化を知りたいから</td>
            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
        </tr>

        <tr>
            <td>3位</td>
            <td>インド</td>
            <td>カレーライス</td>
            <td>発展途上の国を間近で見てみたいから</td>
            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
        </tr>

        <tr>
            <td>4位</td>
            <td>タイ</td>
            <td>ガパオ</td>
            <td>バンコクの発展具合を見てみたいから</td>
            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
        </tr>

        <tr>
            <td>5位</td>
            <td>フィリピン</td>
            <td>アドボ</td>
            <td>友達が楽しそうに働いているから</td>
            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
        </tr>
    </table>
</div>
<footer>
    <div class="footer-left">
        <img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
        <p>&copy travel enjoy.</p>
    </div>
    <div class="footer-list">
        <ul>
            <li><a href="https://www.airbnb.jp/">利用規約</a></li>
            <li><a href="https://www.uber.com/ja-JP/">プライバシー</a></li>
            <li><a href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
        </ul>
    </div>
</footer>
<script src="script.js"></script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/07 22:28

    ありがとうございます!

    height: 50em; /* 値を変更 */

    こちらでしょうか?

    これがなぜか効きません(泣)

    キャンセル

  • 2017/09/07 22:31

    使用しているブラウザとそのバージョンを教えていただけませんか?また、キャッシュの消去(http://portal.tac-school.co.jp/faq_system/?id=38)を行ったうえでもう一度確認してみたとき変化はありませんか?

    キャンセル

  • 2017/09/07 22:52

    クロームの60.0.3112.113です!

    キャンセル

  • 2017/09/07 22:53

    キャッシュを削除してもうまくいきませんでした。

    キャンセル

  • 2017/09/07 22:56 編集

    Google Chrome 60.0.3112.113(Official Build) (64 ビット)にて動作確認しましたが、そのような現象は再現しませんでした。一度質問文のコードが動作するか確認してみてもらえませんか?

    キャンセル

  • 2017/09/08 09:28

    やってみます!

    ちなみに、htmlとcssを同じファイルに書いているのは何か理由があるのでしょうか?

    キャンセル

  • 2017/09/08 15:09

    > ちなみに、htmlとcssを同じファイルに書いているのは何か理由があるのでしょうか?

    特に意味はありませんが、強いていえばコードが動作するか試すときの手間を省くためです。

    キャンセル

  • 2017/09/09 07:50

    ありがとうございます!解決しました。おつきあいいただき、ありがとうございます!

    キャンセル

0

高さを広げた時、そこに入力された文字はどうなっているのが理想ですか?
文字自体を大きくしたいのであれば

input[type="search"] {
  font-size: 1.5em;
}

文字の上下に余白を作りたいのであれば

input[type="search"] {
  padding: 1em .4em;
}

みたいな感じでいかがですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/08 11:30

    上下に余白を作りたいです!!

    おこなってみます。

    キャンセル

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

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

関連した質問

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

  • HTML

    9269questions

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

  • CSS

    5996questions

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

  • デザイン

    86questions

    プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。