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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

3716閲覧

Bootstrap4で検索窓を固定したい

ironman

総合スコア20

HTML5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/03/12 07:07

編集2019/03/12 07:40

前提・実現したいこと

実現したいこと

  • スクリーンのサイズに関わらず検索窓の位置を固定
  • 検索窓はロゴ(トグル)に次いで左寄せにする
  • 検索窓の中に文字(検索など)または虫眼鏡記号を入れる

実現したいイメージ

イメージ説明
上の画像の検索窓はスクリーンサイズに関わらず、固定です。

※イメージはこちらのサイトのナビゲーションのような感じです。

該当のソースコード

HTML

1<body> 2 <header> 3 4 <!-- nav --> 5 <nav class="navbar navbar-expand-xl navbar-dark bg-primary"> 6 7 <!-- navbar-toggler --> 8 <button class="navbar-toggler" type=button data-toggle="collapse" data-target="#testnav" aria-controls="testnav" aria-expanded="false" aria-label="Toggle navigation"> 9 <img src="img/f_f_object_174_s64_f_object_174_2bg.png"> 10 </button><!-- /navbar-toggler --> 11 12 <!-- navbar-collapse --> 13 <div class="collapse navbar-collapse" id="testnav"> 14 <ul class="navbar-nav"> 15 <li class="nav-item active"> 16 <a class="nav-link" href="#">新規登録</a> 17 </li> 18 <li class="nav-item"> 19 <a class="nav-link" href="#">データ一覧</a> 20 </li> 21 <li class="nav-item"> 22 <a class="nav-link" href="#">エクスポート</a> 23 </li> 24 </ul> 25 </div><!--navbar-collapse--> 26 27 <form class="form-inline mr-auto"> 28 <input class="form-control mr-sm-2" type="search" aria-label="Search"> 29 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search </button> 30 </form> 31 32 </nav><!--/nav--> 33   </header> 34 35 <!-- Optional JavaScript --> 36 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 37 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 38 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 39 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 40 </body>

試したこと

配置まではできたのですが、これが最適なのかわかりません。検索窓の固定と検索窓内に文字を入れることはできていません。

まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。

問題が発生した環境

  • Bootstrap4 
  • HTML5

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

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

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

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

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

m.ts10806

2019/03/12 07:19

1つ前の質問ではあえて指摘しませんでしたが</header>がないので構文的にNGです(だからって動作しないわけではないですが) HTMLもそうですが、CSS、JavaScriptを扱っていく上で構文チェックもあるエディタの導入は必須かと思います。
ironman

2019/03/12 07:25

ご指摘ありがとうございます。どうも質問する際に無駄なコメントと一緒に消してしまったみたいです。今後気をつけます。現在SublimeTextを使っているので、構文チェックのプラグイン入れてみます。
m.ts10806

2019/03/12 07:25

質問は編集できますので適宜追記してください。
ironman

2019/03/12 07:31

わざわざありがとうございます。助かりました。更新させていただきました。
m.ts10806

2019/03/12 07:33

> リスト番号リストリストスクリーンのサイズに関わらず検索窓の位置を固定 上記、何がしたいのか良く分かりません。文章ミスってませんか? 実現したい状態を図示いただいた方がいいかもしれません。
ironman

2019/03/12 07:36

本当ですね。ありがとうございます。再度訂正いたしました。
ironman

2019/03/12 07:37

図示は少しお待ちください。
guest

回答1

0

ベストアンサー

スクリーンのサイズに関わらず検索窓の位置を固定
検索窓はロゴ(トグル)に次いで左寄せにする

今でもできてませんか?
「固定」だけでいうとposition:fixedかと思いましたが、単にそこに置いておくということですね。
ただ、位置は固定でもbreakpointで伸び縮みはしてますね。
そのあたりはレスポンシブなのでBootStrapで対応可能かと(たぶんform関係)

検索窓の中に文字(検索など)または虫眼鏡記号を入れる

placeholderのことでしょうか。
虫眼鏡については提示サイトではSVGで対応されているようですが、フォントアイコンでも対応可能です。
FontAwesomeとかMaterial Iconsとかが有名でしょうか。

「このサイトのここ、どう作ってるんだろう」を見たいときはブラウザの開発ツールを利用すると良いです。

投稿2019/03/12 07:25

編集2019/03/12 13:01
m.ts10806

総合スコア80765

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

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

ironman

2019/03/12 07:34

解決しました。ありがとうございます
m.ts10806

2019/03/12 07:36

ちょっと夜遅くまで時間がとれそうにないので単発の回答になってしまってます。 他についてはもう少し具体的に実現したい状況を書かれた方が良いかと思いますので、適宜追記願います。 (「図示を」と書きましたが質問には画像添付の可能なので)
ironman

2019/03/12 07:41

ありがとうございます。とりあえず実現したいイメージを追加しました。
ironman

2019/03/12 14:02

返信遅くなりました。FontAwesome早速導入しました。初めて知ることができました。これでまた一つ進歩できました、本当にありがとうございます。早速form 関係で検索窓の位置を制御できる方法を検索してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問