CSSでフォームをレスポンシブ【カンタン！サンプルソース有】

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。
とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。

モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。
今回は、お問い合わせフォームの作り方やデザインのパターンをいくつか記載します。

demo

Contents

1. 縦に積むレスポンシブフォーム
2. 縦に積むレスポンシブフォーム（余白なし）
3. 背景色を交互に変えるレスポンシブフォーム

まずは基本のフォームの作り方です。テーブルタグを使っています。
form-tableというクラスを大枠につけました。

HTML

CSS

縦に積むレスポンシブフォーム

スマホ時にthとtdをblock要素にすることで、見出しと中身を縦に積むことができます。
あとは線の有無を調整すればOKです。
とても簡単です。

縦に積むレスポンシブフォーム（余白なし）

ここからはいくつか簡単なアレンジを紹介します。
例えば、inner-blockに左右10pxずつの余白がある場合、この余白ぶん左に移動し、幅を広げれば、余白のないフォームを作ることができます。

背景色を交互に変えるレスポンシブフォーム

まとめ

試す前は「難しいんじゃないか…」「まったくわからない…」と思っていたことでも、実際に挑戦すると「あれ？　こんなに簡単なの？」と拍子抜けすることもありますよね。
今回のフォームをレスポンシブにする方法も、あっけなく終わるくらい易しいものだったかと思います。

とても簡単にレスポンシブ対応がおこなえますのでぜひ試してみてはいかがでしょうか。