WEBサイトがパソコンだけじゃなくて、iPadやら、スマホやら、いろんな大きさの画面で見られるようになったので、最近では、閲覧している画面の大きさに合わせて、中身が伸縮する仕組みになってるサイトが増えています。こういうのをレスポンシブデザインというのですが、どういう仕組みでそういうこと（相手に合わせて幅を変える）をさせてるのか、実は知りません。
だけど、うちはショップ以外は全部WordPressで作ってて、そのテーマをレスポンシブ対応のに変えてるから、スマホで見てもだいじょうぶ！と思っていたのですが。今日、投稿フォームの入力欄が、スマホで見るとだ〜っと横にはみ出て、説明が切れて読めなくなってるのを発見してしまいました！
それが、お電話をいただいたお客様に今日中に見てもらいたいアンケートフォームだったので、けっこう焦りまくり。久しぶりに緊張した！（笑）
問題はふたつあって、ひとつはレイアウトに使ってたtableタグのレスポンシブ対応。ふたつめは、入力欄の文字数指定の問題でした。
（１）tableタグのレスポンシブ対応
tableの幅をパーセントにしとけば、だいたい計算してそれなりにやってくれるんだろうと思ったのは、甘かった。どうやらそういう仕組みじゃないようで。
tableをCSSで対応させる方法もあるようだけど、めんどくさいのでtableやめてdivで積むことにしました。
（２）テキストフィールドやテキストエリアの幅のレスポンシブ対応
文字数を指定しないとだーっと長くなるし、スマホではみ出さない幅に指定すると今度はPCで見た時に短くて変。これもそのままでは対応できないようです。
私の場合は、一般的なフォームじゃなくて、WordPressのContactform7というプラグインを使っているので、それ専用のこういう解決法を見つけて一発クリアできました。CSSでContactform7のフォームの幅を一括で指定する方法です。今まで、フォームの幅は記入内容に応じた長さにしてたけど、これを使うと全部同じ幅で揃って「整列！」って感じになるので、気に入りました。
↓
【WordPress】Contact Form 7プラグインのフォーム（box）の幅をレスポンシブテーマに合わせる
という改造をほどこしたのが、こちらのアンケートフォームです。
だけどそもそも、スマホから注文もらったのに返信メールが届かないから、これを使う羽目になるわけで。
昔はガラケーでPCメールが受信できない人は多くて、それはまあ仕方ないなと思ったけど、スマホになってもまだPCメール拒否がデフォルトってどういうことー。Docomoさんとか。なんとかしてください。
