質問: ### 前提・実現したいこと 実現したいこと * スクリーンのサイズに関わらず検索窓の位置を固定 * 検索窓はロゴ(トグル)に次いで左寄せにする * 検索窓の中に文字(検索など)または虫眼鏡記号を入れる 実現したいイメージ --------- ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d7b68876fbf67c606ff8b2c3a6ed1510.png) 上の画像の検索窓はスクリーンサイズに関わらず、固定です。 ※イメージはこちらのサイトのナビゲーションのような感じです。 ### 該当のソースコード ``` 新規登録 データ一覧 エクスポート Search ``` ### 試したこと 配置まではできたのですが、これが最適なのかわかりません。検索窓の固定と検索窓内に文字を入れることはできていません。 まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。 ### 問題が発生した環境 * Bootstrap4 * HTML5
回答: > > スクリーンのサイズに関わらず検索窓の位置を固定 > > 検索窓はロゴ(トグル)に次いで左寄せにする > > > 今でもできてませんか? 「固定」だけでいうとposition:fixedかと思いましたが、単にそこに置いておくということですね。 ただ、位置は固定でもbreakpointで伸び縮みはしてますね。 そのあたりはレスポンシブなのでBootStrapで対応可能かと(たぶんform関係) > > 検索窓の中に文字(検索など)または虫眼鏡記号を入れる > > > placeholderのことでしょうか。 虫眼鏡については提示サイトではSVGで対応されているようですが、フォントアイコンでも対応可能です。 FontAwesomeとかMaterial Iconsとかが有名でしょうか。 「このサイトのここ、どう作ってるんだろう」を見たいときはブラウザの開発ツールを利用すると良いです。 * 競合サイトのCSSとJavaScriptを丸裸にする方法