以下の画像のコーディング

Question

以下の画像のコーディングはどのようにされているのか。また、時間はどの程度かかるのか。
教えていただきたいです！

周りにマークアップエンジニアの友人などがいないため、皆さんがどのようにコーディングしているのか気になります。
というのも、以下の画像でいうと私の場合だと、
氏名と必須の間はmarginで調整、性別の男性女性の○の表示の仕方がわからず、画像で貼り付けてわけがわからなくなる、そもそも氏名の欄の上下のborderの設定でmarginを多用しすぎてレスポンシブなのにぐちゃぐちゃになる...

時間も1日中かかります。。。。。

皆さんのコードを参考にし、勉強したいです！
どうぞ、よろしくお願いいたします。

Answer 1

PCは、下記のように2列

タイトル 入力欄
タイトル 入力欄

スマホは、下記のように1列

タイトル
入力欄

タイトル
入力欄

になるようにするといいでしょう。

上手に検索すれば、サンプルコードはいろいろ見つかると思います。

例えば「CSS フォーム レスポンシブ」で検索すると、

【横並び】お問い合わせフォームの作り方【レスポンシブ対応】｜Kei Blog

スマホ対応じゃない問い合わせフォームを「とりあえず」レスポンシブにする方法 | 西沢直木のIT講座

とか参考になりそうです。

Comments

[Taka.K1009]

ありがとうございます！

Answer 2

単純に、divとかで "氏名", "性別" ... とかのやつと、入力させるためのフォーム系をそれぞれ囲んで、div側のクラスにcssを付与して枠線を描く。
そしてfloatとかそういうやつで位置を移動させる...

か、もしくは反則技(基本的にはありえない使い方)としては、tableで枠線なんかを表現して、th側のクラスとかで幅を指定する...とか。

Comments

[Taka.K1009]

回答、ありがとうございます！