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

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4
5<meta charset="UTF-8">
6<title>My Web Site</title>
7<link rel="stylesheet" href="style.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
9
10 </script>
11
12</head>
13<body>
14
15
16<header>
17
18    <div class="header-left">
19      <img class="logo" src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
20 </div>
21
22<div class="header-right">
23  <a href="http://onepiece-naruto.com/blog-category-12.html" class="login" target="_blank"><p class="login1">ログイン</p></a>
24</div>
25
26
27</header>
28
29
30<div class="main">
31
32    <h1>行ってみたい<span>国</span>一覧</h1>
33
34
35
36</div>
37
38
39<div class="wrapper">
40
41  <form class="research" action="search.php" method="post">
42      <input  class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
43      <input class="research" type="submit" name="research" value="検索"><br>
44      <a href="index2.html"><input class="signup" type="button" name="btn" value="新規登録"></a>
45  </form>
46
47
48  <table border="1">
49
50    <tr>
51      <th class="head">順位</th>
52      <th class="head">国名</th>
53      <th class="head">食べたい食べ物</th>
54      <th class="head">理由</th>
55      <th class="head"></th>
56    </tr>
57
58
59  <tr>
60    <td>1位</td>
61    <td>スペイン</td>
62    <td>パエリア</td>
63    <td>サッカーを見たいから</td>
64    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
65  </tr>
66
67  <tr>
68    <td>2位</td>
69    <td>アメリカ</td>
70    <td>グリルロブスター</td>
71    <td>ダンスの文化を知りたいから</td>
72    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
73  </tr>
74
75  <tr>
76    <td>3位</td>
77    <td>インド</td>
78    <td>カレーライス</td>
79    <td>発展途上の国を間近で見てみたいから</td>
80   <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
81  </tr>
82
83  <tr>
84    <td>4位</td>
85    <td>タイ</td>
86    <td>ガパオ</td>
87    <td>バンコクの発展具合を見てみたいから</td>
88    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
89  </tr>
90
91  <tr>
92    <td>5位</td>
93    <td>フィリピン</td>
94    <td>アドボ </td>
95    <td>友達が楽しそうに働いているから</td>
96    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
97  </tr>
98
99
100
101  </table>
102
103</div>
104
105
106
107
108
109
110<footer>
111
112
113<div class="footer-left">
114<img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
115<p>&copy travel enjoy.</p>
116</div>
117
118<div class="footer-list">
119    <ul>
120      <li><a  href="https://www.airbnb.jp/">利用規約</a></li>
121      <li><a  href="https://www.uber.com/ja-JP/">プライバシー</a></li>
122      <li><a  href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
123    </ul>
124</div>
125
126
127
128</footer>
129
130 <script src="script.js">
131
132  </script>
133
134
135</body>
136</html>
137

css
1@charset "UTF-8";
2/*全体のCSS*/
3
4body {
5    font-family: "ＭＳ ゴシック",sans-serif;
6}
7
8li {
9    list-style: none;
10}
11
12
13
14html, body, div, span, applet, object, iframe,
15h1, h2, h3, h4, h5, h6, p, blockquote, pre,
16a, abbr, acronym, address, big, cite, code,
17del, dfn, em, font, img, ins, kbd, q, s, samp,
18small, strike, strong, sub, sup, tt, var,
19b, u, i, center,
20dl, dt, dd, ol, ul, li,
21fieldset, form, label, legend,
22table, caption, tbody, tfoot, thead, tr, th, td {
23  margin: 0;
24  padding: 0;
25  border: 0;
26  outline: 0;
27  font-size: 100%;
28  vertical-align: baseline;
29  background: transparent;
30}
31body {
32  line-height: 1;
33}
34ol, ul {
35  list-style: none;
36}
37blockquote, q {
38  quotes: none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42  content: '';
43  content: none;
44}
45
46/* remember to define focus styles! */
47:focus {
48  outline: 0;
49}
50
51/* remember to highlight inserts somehow! */
52ins {
53  text-decoration: none;
54}
55del {
56  text-decoration: line-through;
57}
58
59/* tables still need 'cellspacing=0' in the markup */
60table {
61  border-collapse: collapse;
62  border-spacing: 0;
63}
64
65/* ここから下はそれぞれのCSS */
66
67
68header {
69  height: 60px;
70  width: 100%;
71  background-color: white;
72  position :fixed;
73  top: 0;
74  left: 0;
75
76}
77
78.header-left {
79float: left;
80}
81
82.header-right {
83    float: right;
84    margin-bottom: 30px;
85    background-color:blue;
86    margin-right: 20px;
87    opacity: 0.7;
88}
89
90.header-right:hover {
91      background-color:skyblue;
92}
93
94.header-right a {
95    width: 70px;
96    margin-top: 14px;
97    display: block;
98    padding: 22px 25px;
99    color: white;
100    margin: auto 0;
101}
102
103
104.logo {
105    width: 130px;
106    margin-left: 15px;
107    height: 60px;
108}
109
110
111/* mainのCSS */
112
113.main {
114    padding: 200px 0 150px 0;
115    background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
116    margin-top: 60px;
117    background-size: cover;
118    margin-top: 60px;
119    width: 100%;
120}
121
122form {
123    text-align: center;
124}
125
126.main h1 {
127    text-align: center;
128    font-size: 40px;
129    font-weight: bold;
130    margin-bottom: 100px;
131}
132
133span {
134    color: #FA3932;
135}
136
137/* ボタンのCSS */
138
139input[type="button"] {
140  width: 10%;
141  border-radius: 4px;
142  padding: 4px;
143  font-size: 14px;
144  color: black;
145  background-color: white;
146}
147
148input[type="submit"] {
149  width: 5%;
150  padding: 3px;
151  border-radius: 4px;
152  color: black;
153  font-size: 14px;
154  background-color: white;
155}
156
157input[type="search"] {
158 height: 1.2em;
159}
160
161
162
163/* tableのCSS */
164
165
166
167table , td, th {
168	border: 1px solid #595959;
169	border-collapse: collapse;
170  margin: auto;
171  margin-top: 100px;
172  margin-bottom: 100px;
173  font-size: 30px;
174}
175
176.warapper {
177  height: 300px;
178}
179
180table a {
181	text-decoration: none;
182  color: #0000ff;
183}
184
185
186
187table a:hover {
188	color: #6699ff;
189	text-decoration: underline;
190}
191
192
193table a:active {
194	color: #993366;
195}
196
197.head {
198  background-color: #CCFFFF;
199}
200
201/* フッターのCSS */
202
203footer {
204    border-top: solid 1px black;
205    height: 110px;
206    width: 100%;
207}
208
209footer img {
210    width: 130px;
211    margin-left: 15px;
212    height: 60px;
213}
214
215.footer-left {
216
217    height: 110px;
218    float: left;
219}
220
221.footer-list {
222    color:#b3aeb5;
223    bottom: 20px;
224    vertical-align: middle;
225    margin: auto 0;
226    float: right;
227    font-weight: normal;
228
229    height: 110px;
230}
231
232.footer-list li {
233    float: left;
234    letter-spacing: 7px;
235    padding: 47px 15px;
236}
237
238footer p {
239    margin-top: 10px;
240    padding-left: 10px;
241}
242

宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>My Web Site</title>
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
7    <style type="text/css">
8        /*全体のCSS*/
9
10        body {
11            font-family: "ＭＳ ゴシック", sans-serif;
12        }
13
14        li {
15            list-style: none;
16        }
17
18        html, body, div, span, applet, object, iframe,
19        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
20        a, abbr, acronym, address, big, cite, code,
21        del, dfn, em, font, img, ins, kbd, q, s, samp,
22        small, strike, strong, sub, sup, tt, var,
23        b, u, i, center,
24        dl, dt, dd, ol, ul, li,
25        fieldset, form, label, legend,
26        table, caption, tbody, tfoot, thead, tr, th, td {
27            margin: 0;
28            padding: 0;
29            border: 0;
30            outline: 0;
31            font-size: 100%;
32            vertical-align: baseline;
33            background: transparent;
34        }
35
36        body {
37            line-height: 1;
38        }
39
40        ol, ul {
41            list-style: none;
42        }
43
44        blockquote, q {
45            quotes: none;
46        }
47
48        blockquote:before, blockquote:after,
49        q:before, q:after {
50            content: '';
51            content: none;
52        }
53
54        /* remember to define focus styles! */
55        :focus {
56            outline: 0;
57        }
58
59        /* remember to highlight inserts somehow! */
60        ins {
61            text-decoration: none;
62        }
63
64        del {
65            text-decoration: line-through;
66        }
67
68        /* tables still need 'cellspacing=0' in the markup */
69        table {
70            border-collapse: collapse;
71            border-spacing: 0;
72        }
73
74        /* ここから下はそれぞれのCSS */
75
76        header {
77            height: 60px;
78            width: 100%;
79            background-color: white;
80            position: fixed;
81            top: 0;
82            left: 0;
83
84        }
85
86        .header-left {
87            float: left;
88        }
89
90        .header-right {
91            float: right;
92            margin-bottom: 30px;
93            background-color: blue;
94            margin-right: 20px;
95            opacity: 0.7;
96        }
97
98        .header-right:hover {
99            background-color: skyblue;
100        }
101
102        .header-right a {
103            width: 70px;
104            margin-top: 14px;
105            display: block;
106            padding: 22px 25px;
107            color: white;
108            margin: auto 0;
109        }
110
111        .logo {
112            width: 130px;
113            margin-left: 15px;
114            height: 60px;
115        }
116
117        /* mainのCSS */
118
119        .main {
120            padding: 200px 0 150px 0;
121            background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
122            margin-top: 60px;
123            background-size: cover;
124            margin-top: 60px;
125            width: 100%;
126        }
127
128        form {
129            text-align: center;
130        }
131
132        .main h1 {
133            text-align: center;
134            font-size: 40px;
135            font-weight: bold;
136            margin-bottom: 100px;
137        }
138
139        span {
140            color: #FA3932;
141        }
142
143        /* ボタンのCSS */
144
145        input[type="button"] {
146            width: 10%;
147            border-radius: 4px;
148            padding: 4px;
149            font-size: 14px;
150            color: black;
151            background-color: white;
152        }
153
154        input[type="submit"] {
155            width: 5%;
156            padding: 3px;
157            border-radius: 4px;
158            color: black;
159            font-size: 14px;
160            background-color: white;
161        }
162
163        input[type="search"] {
164            height: 50em; /* 値を変更 */
165        }
166
167        /* tableのCSS */
168
169        table, td, th {
170            border: 1px solid #595959;
171            border-collapse: collapse;
172            margin: auto;
173            margin-top: 100px;
174            margin-bottom: 100px;
175            font-size: 30px;
176        }
177
178        .warapper {
179            height: 300px;
180        }
181
182        table a {
183            text-decoration: none;
184            color: #0000ff;
185        }
186
187        table a:hover {
188            color: #6699ff;
189            text-decoration: underline;
190        }
191
192        table a:active {
193            color: #993366;
194        }
195
196        .head {
197            background-color: #CCFFFF;
198        }
199
200        /* フッターのCSS */
201
202        footer {
203            border-top: solid 1px black;
204            height: 110px;
205            width: 100%;
206        }
207
208        footer img {
209            width: 130px;
210            margin-left: 15px;
211            height: 60px;
212        }
213
214        .footer-left {
215
216            height: 110px;
217            float: left;
218        }
219
220        .footer-list {
221            color: #b3aeb5;
222            bottom: 20px;
223            vertical-align: middle;
224            margin: auto 0;
225            float: right;
226            font-weight: normal;
227
228            height: 110px;
229        }
230
231        .footer-list li {
232            float: left;
233            letter-spacing: 7px;
234            padding: 47px 15px;
235        }
236
237        footer p {
238            margin-top: 10px;
239            padding-left: 10px;
240        }
241    </style>
242</head>
243<body>
244<header>
245    <div class="header-left">
246        <img class="logo" src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
247    </div>
248    <div class="header-right">
249        <a href="http://onepiece-naruto.com/blog-category-12.html" class="login" target="_blank"><p class="login1">
250            ログイン</p></a>
251    </div>
252</header>
253<div class="main">
254    <h1>行ってみたい<span>国</span>一覧</h1>
255</div>
256<div class="wrapper">
257    <form class="research" action="search.php" method="post">
258        <input class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
259        <input class="research" type="submit" name="research" value="検索"><br>
260        <a href="index2.html"><input class="signup" type="button" name="btn" value="新規登録"></a>
261    </form>
262    <table border="1">
263        <tr>
264            <th class="head">順位</th>
265            <th class="head">国名</th>
266            <th class="head">食べたい食べ物</th>
267            <th class="head">理由</th>
268            <th class="head"></th>
269        </tr>
270        <tr>
271            <td>1位</td>
272            <td>スペイン</td>
273            <td>パエリア</td>
274            <td>サッカーを見たいから</td>
275            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
276        </tr>
277
278        <tr>
279            <td>2位</td>
280            <td>アメリカ</td>
281            <td>グリルロブスター</td>
282            <td>ダンスの文化を知りたいから</td>
283            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
284        </tr>
285
286        <tr>
287            <td>3位</td>
288            <td>インド</td>
289            <td>カレーライス</td>
290            <td>発展途上の国を間近で見てみたいから</td>
291            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
292        </tr>
293
294        <tr>
295            <td>4位</td>
296            <td>タイ</td>
297            <td>ガパオ</td>
298            <td>バンコクの発展具合を見てみたいから</td>
299            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
300        </tr>
301
302        <tr>
303            <td>5位</td>
304            <td>フィリピン</td>
305            <td>アドボ</td>
306            <td>友達が楽しそうに働いているから</td>
307            <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
308        </tr>
309    </table>
310</div>
311<footer>
312    <div class="footer-left">
313        <img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
314        <p>&copy travel enjoy.</p>
315    </div>
316    <div class="footer-list">
317        <ul>
318            <li><a href="https://www.airbnb.jp/">利用規約</a></li>
319            <li><a href="https://www.uber.com/ja-JP/">プライバシー</a></li>
320            <li><a href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
321        </ul>
322    </div>
323</footer>
324<script src="script.js"></script>
325</body>
326</html>

投稿2017/09/07 13:25

編集2017/09/07 13:26

s8_chu

総合スコア14731

dog57

2017/09/07 13:28

ありがとうございます！ height: 50em; /* 値を変更 */ ↑ こちらでしょうか？これがなぜか効きません（泣）

s8_chu

2017/09/07 13:31

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

dog57

2017/09/07 13:52

クロームの60.0.3112.113です！

dog57

2017/09/07 13:53

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

s8_chu

2017/09/07 13:57 編集

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

dog57

2017/09/08 00:28

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

s8_chu

2017/09/08 06:09

> ちなみに、htmlとcssを同じファイルに書いているのは何か理由があるのでしょうか？特に意味はありませんが、強いていえばコードが動作するか試すときの手間を省くためです。

dog57

2017/09/08 22:50

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

行動規範の内容に同意します

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

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

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

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

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

投稿2017/09/08 01:08

takepieee

総合スコア686

dog57

2017/09/08 02:30

上下に余白を作りたいです！！おこなってみます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

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

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

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

関連した質問