【CSS】２つを連結した検索ボックスを作る方法【ガタつきの原因編】

２つの箱を連結したような検索ボックスがあるけど、作ってみると箱の高さが微妙にズレちゃったりするなあ。なんでだろう？といった疑問にお答えします。

画像のように、検索をイメージさせる虫めがねのアイコンの箱と検索する文字を入力する箱を連結させて作ります。

虫めがねの箱とサーチボックスの箱を分けて作り、連結することで、虫めがねのところをクリックしても、何も反応しないようにできます。

作るにあたって、まずはHTMLの作り方をサクッとみていきましょう。まず今回の記事では、２つの横並びの箱がズレる事象と、対策についてご紹介します。

それでは、早速みていきましょう。

２つの箱のHTMLを作成する

まずは画像のようにHTMLを作成します。

form要素の中に２つの箱を入れます。

２つの要素のうち、虫めがねの部分は適当なボックス、

もう１つはinput要素です。

input要素を包むボックスとして、div要素で囲ってあげます。

画像では、

がinput要素を包むボックスです。

なぜ包むボックスがいるのかというと、下の問題点があるからです。

ここで、つまづきやすいのが、input要素にボーダーをつけると、微妙にボックスの大きさがズレてしまうということです。

画像のようにdiv要素とinput要素を横並びで連結すると、連結部分の高さが微妙に違うのです。

例えば、div要素に高さ５０px、input要素の高さに５０pxとして、同じ高さを設定しても、微妙に高さが違って、ガタついて見えます。

また、

なので、input要素に自動的に適用されているborderプロパティーをnoneにして、代わりにinput要素をdiv要素で包んであげて、このdiv要素に対してborderプロパティを設定してあげれば、ガタつきが解決します。

上記対策をした際の画像です。ガタつきが無くなっているのが分かります。

他にも、label要素とinput要素の箱を横並びにしても、なぜかガタつきました。

この場合、label要素をdiv要素やspan要素に変えるとガタつきがなくなります。

ボクはなかなか気づけませんでした。

２つの箱を連結した検索ボックスは、div要素やspan要素などとinput要素を横並びにする。

そして、input要素のborderを消して、input要素を包む要素に対してborderを設定するとズレが解消される。

input要素に適用されているボーダーをそのまま使うとズレる。

label要素とinput要素の箱の横並びでもズレる。

以上を踏まえると、次の２点を意識するとガタつきが抑えられます。

１.label要素は使わない。

2.input要素をdiv要素で包んでおく。

ガタつきを抑える概要をざっとイメージできたところで、次回の記事でCSSのコーディングについてご説明します！

簡単なように見えるパーツですが、意外と大変なので、少しずつ、スモールステップで身につけていきましょう。

その時のやっつけ仕事でなんとか作り上げても、時間が経つと自分でもどうやって作ったのか分からなくなります。自分で書いたコードを読み解いていくのもかなり大変です。

とにかくサイトを早く全体を作り上げることに意識がいって、その時は時間をかけてなんとか作れても、再現性がなくなりがちです。

丁寧に自分なりのメモをとったりして、しっかり時間をかけて習得していきましょう！