HTML/CSS

【お問い合わせフォーム】formをコーディングするときのCSS初期化

30DAYSトライアルの課題で、「お問い合わせフォームの実装」を実践してました。

結論から言うと、めちゃくちゃ苦戦。


コーディングをしている中で、綺麗に横並びにしつつ、レスポンシブにすることに苦戦しました。

flexboxにしたり、inline-blockにしたりしましたが、なかなか合わない・・

 

要素の配置をじっくり眺めていると、同じく苦戦したNEWS系コーディングと配置の仕方が似てるなーと思い、dlタグでコーディングしてみることにしました。

 

ググりつつなんとか完成しましたが、結構詰まりました。

わからなかった点をツイートしていましたので、この内容について深掘りしつつまとめておきたいと思います。

問い合わせフォームのコーディングで詰まった点

  • フォームCSSの初期化→
  • 横並びレイアウト
  • ラジオボタン、チェックボックスのコーディング
  • :checkedを使ったコーディング

振り返りつつ、自分のものにできるよう、理解を深めていこう。#30DAYSトライアル #2nd #復習

 

 

全部書くと長くなりそうなので、今回は「CSSの初期化」についてまとめてみたいと思います。

 

お問い合わせフォームの実装

問い合わせフォームを作るとき、ざっくりと作業を分けるとこんな感じでしょうか。

今回は、ブラウザCSSの初期化についてまとめました。

 

  1. フォームのブラウザCSSの初期化
  2. 横並びレイアウト
  3. ラジオボタン、チェックボックスのコーディング
  4. :checkedを使ったコーディング

 

フォームのブラウザCSSを初期化

問い合わせフォームの実装には、ブラウザCSSを初期化する必要があります。

このあたりの詳しい説明は、HPcodeさんのフォームに関する記事が参考になるので読んでおくべきですね。

 

なぜ、フォームのCSSを初期化するのか?

それは、ブラウザによってフォームに指定されているCSSが違うからです。

See the Pen
JQmjyL
by kei (@kei_01011)
on CodePen.

HTMLを入力しただけですが、すでになんらかのCSSが適用されています。

CSSを初期化してあげることで、どのブラウザで見てもデザインの崩れをなくす事ができます。

 

 

CSSリセットをまとめてかけてみました。

すると、こうなります。

 

See the Pen
gNBORy
by kei (@kei_01011)
on CodePen.

かなり変わりました。

 

特に、デザインに影響してくるCSSはツイートにまとめてあります。

 

 

リセットに使ったCSSは、HPcodeさんから拝借しました。

 

 

フォームのCSSを綺麗にまとめる

実際にフォームのコーディングをする前に、CSSを綺麗にまとめておくと、汚いコーディングにならずに済んで後で見返しやすくなります。

 

とはいえ、まだ僕には複雑なCSS設計の知識はありませんので、できるところからコツコツやっていきます。

意識している点としては以下のポイント

  • HTMLにはクラス名をつける
  • 同じCSSコードはなるべくまとめる

 

これらを意識しつつ、さっきのリセットCSSをまとめてみます。

See the Pen
bPmGLd
by kei (@kei_01011)
on CodePen.

 

すると、こんな感じに整える事ができました。

テキスト、テキストエリア、セレクトボックスは、ほとんど同じCSSだったので、一つにまとめるだけでもかなりコードが短くなります。

個別にCSSを当てたい場合は、クラス名で指定して対応していきます。

 

個人的には、「ブラウザのCSSリセット」と、「デザインするためのCSS」は分けて書いた方がわかりやすいので、コメントで分離させようと思います。

 

フォームの横並びコーディング

綺麗に横並びにする方法ですが、ここでは「dl」タグを使います。

手順についてはツイートしていますので、この通りにコーディングしていけばうまくいきました。


codeを載せたいところですが、今回は長くなりそうなのでここまでにします。

 

他のサイトの問い合わせフォームを参考にしつつ、コーディングのバリエーションも増やしていきたいので、また実践しつつ記事にしたいと思います。

 

【横並び】お問い合わせフォームの作り方【レスポンシブ対応】お問い合わせフォームの作り方を解説していきます。 以前に、フォームCSSのリセットについて解説しましたが、今回は具体的に横並びレイアウトにしつつデザインを整えていきたいと思います。...