【CSSコーディング編】2個の箱を連結した検索ボックスの作成方法

2つの箱を連結して作る検索ボックスのCSSコーディングってどうやるのかな?という疑問にお答えします。

2つの箱を連結して作る検索ボックスのCSSコーディングってどうやるのかな?という疑問にお答えします。

前回の記事では、HTMLの作成についてご紹介しました。

今回は続きとなります。

サイト模写などで、検索ボックスを作る時の参考になる記事です。

なお、完成図は画像のような検索ボックスです。

2つの箱を連結して、連結部分の縦線が表示されないように作成します。

なお、完成図は画像のような検索ボックスです。2つの箱を連結して、連結部分の縦線が表示されないように作成します。
検索ボックスの完成イメージ

前回の軽いおさらい

まず、前回作ったHTMLのコードをみてみましょう。

前回作ったHTMLのコードです。今回はCSSをコーディングしていきます。
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を適用することで、2つの箱の連結部分の縦線を消す手間が省けます。

また、2つの箱をflexで横並びする際はこのdivタグを使います。

以上から、以下の2つの方法があります。

  • オーソドックスな方法として、2つの箱にそれぞれborderを設定して連結部分の縦線を消す方法
  • 2つの箱を囲ってあるdivにborderを設定する方法

※あくまでボクのわかる範囲なので、これ以外にも方法があるかと思います。

今回のHTMLは、2通りの作成に対応できるようになっています。

ただ、ボク自身が作成した感じでは、

オーソドックスに2つの箱にborderを設定してあとで連結部分の縦線を消す方法の方が、めんどくさそうに見えるけど確実かと思いました。

なので、オーソドックスな方法を使ってCSSをみてみましょう。

2つの箱を横並びにする

2つの箱を横並びにするために、2つの箱を囲っているdiv要素にflexを適用します。すると、中の要素が自動的に横並びになります。

2つの箱を横並びにするために、2つの箱を囲っているdiv要素にflexを適用します。すると、中の要素が自動的に横並びになります。

高さと幅は適当に設定しています。

虫めがねのアイコンの箱のCSSを設定

虫めがねのアイコンを書いた箱である左側の箱のCSSを設定します。

虫めがねのアイコンを書いた箱である左側の箱のCSSを設定します。

箱の大きさやアイコンの位置の調節の説明は割愛します。

イメージとしては、一度箱の全ての辺にborderを適用したあと、右側の箱と連結する部分の縦線、つまり、border-rightをnoneにして消します。

あとは、ボーダーの角を丸くするためにborder-radiusを適用します。

連結部分は角を丸めると見た目がおかしいので、連結部分のborder-radiusを0pxにすることで、角を丸めないようにします。

input要素のborderとoutlineを消す

次は、input要素のCSSです。

次は、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-radiusを設定した時、inputの透明な角が影響して角が消えてしまうので、input要素にもborder-radiusを設定しています。
角が消えてしまう例

input要素を囲っているdivにborderとborder-radiusを設定する

最後に、input要素を囲っているdivのCSSを設定します。

最後に、input要素を囲っているdivのCSSを設定します。

左側にある虫めがねのアイコンの箱と同じで、

borderを一度適用し、左側の箱と連結する部分の縦線、つまりborder-leftの表示をnoneにして消します。

あとは、border-radiusを設定したら、完成です。

まとめ

検索機能を実装していないシンプルな検索ボックスですが、見た目を作るだけでも、結構大変ですね。

実際の細かなCSSよりも、頭の中で流れをイメージしながら作成すると分かりやすいかと思います。

こんな簡単なパーツでも、あとあと忘れがちなので、忘備録として自分用にノウハウのメモやノートを作成しておくのがオススメです。

このパーツならあのブログの記事を参照しよう。と決めておくのも良いアイデアだと思いますが、基本的でオーソドックスなパーツはやっぱり自分でメモやノートをとっておくのが、HTML、CSSが身につきやすい方法です。

そのほかの凝ったパーツとかは、ブログの情報を活用し参照するみたいなスタンスが良いでしょう。

それでは、ボクもまだまだ全然大したレベルじゃないですが、コツコツとノウハウを積み上げて、HTML、CSSのマークアップ・コーディングを頑張っていきましょう!

コメント

タイトルとURLをコピーしました