🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

2回答

508閲覧

HTML5,CSS3フォームからinput(text)が若干下寄りになる

PauseRestart62

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2019/11/22 06:24

編集2019/11/22 06:35

実現したいこと

HTML5で検索フォームを作っていて、テキストボックスが若干、下寄りになってしまいます。
真ん中にしたいのですが、どうすればいいですか?
初心者なのでわかりやすくお願い致します。
※テキストボックスはわかりやすいように色は変えていません。
イメージ説明

発生している問題・エラーメッセージ

### 該当のソースコード **HTML** <div> <!--検索バー(フォーム)--> <form method="get" action="#" class="search_container"> <input type="text" size="33" placeholder="キーワード検索"> <input type="submit" value="&#xf002"> </form> </div> **CSS** /*-----------------フォーム--------------------*/ .search_container{ background: #eee; box-sizing: border-box; position: absolute; border: 1px solid #999; padding: 3px 10px; border-radius: 20px; height: 2.0em; width: 260px; overflow: hidden; } .search_container input[type="text"]{ border: none; height: 1.7em; } .search_container input[type="text"]:focus { outline: 0; } .search_container input[type="submit"]{ cursor: pointer; font-family: FontAwesome; font-size: 1.3em; border: none; background: none; color: #3879D9; position: absolute; width: 2em; height: 2.2em; right: 0; top: -10px; outline : none; } /*------------------------------------------------------*/ /*------------------ハンバーガーメニュー-------------*/ .header { position: fixed; left: 0; top: 0; width: 100%; height: 32px; background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.16); } .global-nav { position: fixed; right: -320px; /* これで隠れる */ top: 0; width: 300px; /* スマホに収まるくらい */ height: 100vh; padding-top: 40px; background-color: #fff; transition: all .6s; z-index: 200; overflow-y: auto; /* メニューが多くなったらスクロールできるように */ } .hamburger { position: absolute; right: 0; top: 0; width: 40px; /* クリックしやすいようにちゃんと幅を指定する */ height: 40px; /* クリックしやすいようにちゃんと高さを指定する */ cursor: pointer; z-index: 300; } .global-nav__list { margin: 0; padding: 0; list-style: none; } .global-nav__item { text-align: center; padding: 0 14px; } .global-nav__item a { display: block; padding: 8px 0; border-bottom: 1px solid #eee; text-decoration: none; color: #111; } .global-nav__item a:hover { background-color: #eee; } .hamburger__line { position: absolute; left: 11px; width: 18px; height: 1px; background-color: #111; transition: all .6s; } .hamburger__line--1 { top: 10px; } .hamburger__line--2 { top: 16px; } .hamburger__line--3 { top: 22px; } .black-bg { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #000; opacity: 0; visibility: hidden; transition: all .6s; cursor: pointer; } /* 表示された時用のCSS */ .nav-open .global-nav { right: 0; } .nav-open .black-bg { opacity: .8; visibility: visible; } .nav-open .hamburger__line--1 { transform: rotate(45deg); top: 20px; } .nav-open .hamburger__line--2 { width: 0; left: 50%; } .nav-open .hamburger__line--3 { transform: rotate(-45deg); top: 20px; } /*--------------------------------------------*/ # 試したこと CSSの.search_container input[type="text"]の部分で、heightを変えてもなぜか高さじゃなくサイズが変わりました。padingを追加して0にしても変わりませんでした。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/11/22 06:30

CSSってこれで全部ですか?再現できるように提示してほしいです
PauseRestart62

2019/11/22 06:49 編集

フォームの部分のCSSはこれで全部ですが、ハンバーガーメニュー(画像には写っていない)のCSSも関係ないと思いますが、追加して更新しましたので確認お願い致します。
guest

回答2

0

順当に行くなら両方にvertical-align: middleを設定することかな

MDN

投稿2019/11/22 12:57

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

高さがオーバーしてしまっているのだと思いますが、配置が面倒ならフレックスボックスレイアウトにすればいいでしょう。

CSS

1form { 2 display: flex; 3 align-items: center; 4} 5 6form > :first-child { 7 flex-grow: 1; 8}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

投稿2019/11/29 08:48

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問