２つの箱を連結して作る検索ボックスのCSSコーディングってどうやるのかな？という疑問にお答えします。
前回の記事では、HTMLの作成についてご紹介しました。
今回は続きとなります。
サイト模写などで、検索ボックスを作る時の参考になる記事です。
なお、完成図は画像のような検索ボックスです。
２つの箱を連結して、連結部分の縦線が表示されないように作成します。
前回の軽いおさらい
まず、前回作ったHTMLのコードをみてみましょう。
虫めがねの箱は、divタグで囲うことで表現しています。
虫めがねの右側にくる検索ボックスはinputタグで表現し、
inputタグをdivタグで囲っています。
その理由は、input要素にborderを適用すると、隣の箱と高さが微妙に異なり、ガタついて見えるので、input要素のborderをnoneにすることでborderを消して、input要素を囲ってあるdivにborderを設定するためでした。
ここまでは、前回のおさらいです。
どのHTMLにborderを設定するかによって2通りの作成方法がある
HTMLをみてみると、form要素の直下にdivタグで大きく囲っているのが分かります。具体的には「 div class = outer 」のdivタグです。
なぜ囲ってあるかというと、
「 div class = outer 」のdivタグにborderを適用することで、２つの箱の連結部分の縦線を消す手間が省けます。
また、２つの箱をflexで横並びする際はこのdivタグを使います。
以上から、以下の２つの方法があります。
- オーソドックスな方法として、２つの箱にそれぞれborderを設定して連結部分の縦線を消す方法
- 2つの箱を囲ってあるdivにborderを設定する方法
※あくまでボクのわかる範囲なので、これ以外にも方法があるかと思います。
今回のHTMLは、2通りの作成に対応できるようになっています。
ただ、ボク自身が作成した感じでは、
オーソドックスに２つの箱にborderを設定してあとで連結部分の縦線を消す方法の方が、めんどくさそうに見えるけど確実かと思いました。
なので、オーソドックスな方法を使ってCSSをみてみましょう。
２つの箱を横並びにする
２つの箱を横並びにするために、２つの箱を囲っているdiv要素にflexを適用します。すると、中の要素が自動的に横並びになります。
高さと幅は適当に設定しています。
虫めがねのアイコンの箱のCSSを設定
虫めがねのアイコンを書いた箱である左側の箱のCSSを設定します。
箱の大きさやアイコンの位置の調節の説明は割愛します。
イメージとしては、一度箱の全ての辺にborderを適用したあと、右側の箱と連結する部分の縦線、つまり、border-rightをnoneにして消します。
あとは、ボーダーの角を丸くするためにborder-radiusを適用します。
連結部分は角を丸めると見た目がおかしいので、連結部分のborder-radiusを０pxにすることで、角を丸めないようにします。
input要素のborderとoutlineを消す
次は、input要素のCSSです。
input要素を囲っているdivにborderを適用するので、input要素のborderを
「 border : none；」
にして、borderを消します。
input要素でクリックしたら箱の枠が青くなる表示を消します。これは消さなくてもどちらでもokですが、今回は消しています。
「 outline : none ; 」
にすると、input要素をクリックしても、outlineが表示されなくなります。
borderを消したのにborder-radiusを設定しているのは、
input要素を囲っているdivにborder-radiusを設定した時、inputの透明な角が影響して角が消えてしまうので、input要素にもborder-radiusを設定しています。
input要素を囲っているdivにborderとborder-radiusを設定する
最後に、input要素を囲っているdivのCSSを設定します。
左側にある虫めがねのアイコンの箱と同じで、
borderを一度適用し、左側の箱と連結する部分の縦線、つまりborder-leftの表示をnoneにして消します。
あとは、border-radiusを設定したら、完成です。
まとめ
検索機能を実装していないシンプルな検索ボックスですが、見た目を作るだけでも、結構大変ですね。
実際の細かなCSSよりも、頭の中で流れをイメージしながら作成すると分かりやすいかと思います。
こんな簡単なパーツでも、あとあと忘れがちなので、忘備録として自分用にノウハウのメモやノートを作成しておくのがオススメです。
このパーツならあのブログの記事を参照しよう。と決めておくのも良いアイデアだと思いますが、基本的でオーソドックスなパーツはやっぱり自分でメモやノートをとっておくのが、HTML、CSSが身につきやすい方法です。
そのほかの凝ったパーツとかは、ブログの情報を活用し参照するみたいなスタンスが良いでしょう。
それでは、ボクもまだまだ全然大したレベルじゃないですが、コツコツとノウハウを積み上げて、HTML、CSSのマークアップ・コーディングを頑張っていきましょう！
コメント