HTMLとCSSで添付の画像のような検索ボックスはどのように実現したらよいでしょうか

Question

以下の画像のような複数の検索条件を元に検索する検索ボックスを作りたいと思っています。

左上から順番に検索条件が縦に並び、枠の高さに達すると今度は次の列に並ぶようにしたいです。
また検索ボタンはボックスの右下に配置したいと考えています。

私が考えた案としては以下二案ですが、マークアップが苦手で正しい実装方法なのか自信がないです。

1. tableを使う。
   それっぽくできそうではあるが、実装方法として適していない感じがする。

2. flexを使う。
   大枠はdivで囲い、縦幅や横幅、borderを設定する。
   中身はdlとddを用いて書く。
   dlにdisplay: flex、flex-wrap: wrap、flex-direction: columnを付与する。
   各要素同士のmarginなどはddに付与する。
   検索ボタンのみposition: abosoluteで指定する。

上記二案が正しいか、間違っているか、間違っている場合はどんなところが適していないか、オススメの実装方法
などを教えていただきたいです。

Comments

[m.ts10806]

レスポンシブ対応をするか否かでもわかれそうに思います。

[kuuritar]

ありがとうございます。
レスポンシブ対応はしたいと考えています。
ディスプレイサイズの応じて、縦に並ぶ数、横に並ぶ数が変わるイメージです。
（すみません、ボタンの実装方法がこの時点でアウトですね。。。）

[m.ts10806]

ただ「提示の見た目が実現できればどのやり方でも正しい」です。何を基準とするのか明示する、もしくは自身がやってみたことに対して問題提起した方がアドバイスは得られやすいかと思います。
あげられた手法はあくまで手法なので、目的や要件、設計次第でどの手法をどう使うか変わってきます。

[m.ts10806]

>すみません、ボタンの実装方法がこの時点でアウトですね。。。

いえ別に。レスポンシブであれば、まず画面作ってみてブラッシュアップする手法もとられます。あくまで画像は画像、「画面イメージ」ですし、実装時に調整は幾らでも入ります。

ひとまず、要件として質問本文に追記してもらえればと。

Answer 1

かつてはこのようなレイアウトはテーブルを使うしかなかったので使われてましたが、これは本来の使い方ではなく、現在ではFlexとかGridとかで実現できますのでレイアウト目的で使うべきではないと思います。

dlも説明リストということなので、ちょっと使い方が違うと思います。中身も普通にdivで囲めばいいと思います。ボタンも

レイアウトはFlexかGridでいいかと思います。flexなら質問の 2. の方法でいいと思います。ボタンもposition: abosolute でいいと思います。

あとは、メディアクエリで調整すればなんとかなるかと。

項目名は labelタグで囲んで、 下記のように for でinputと関連付けるといいでしょう。

<label for="name">名前</label>
<input type="text" name="name" id="name">

とりあえず上記をヒントにHTML、CSSを組んでみて、思い通りにならない部分が出たら、そこをピンポイントで質問するといいでしょう。

---

なんか、サンプル作っちゃいましたので、よろしければご参考に。

レスポンシブ対応 検索条件フォームサンプル

Comments

[kuuritar]

ありがとうございます！
とても参考になりました！
こちらを参考に自分でまずは作ってみます