メールフォームプロを<dl>(説明リスト)を用いてコーディングする際は自動的に、水平型のフォーム(Horizontal form)のレイアウトになります。
パソコンやタブレットなど画面の横幅があるデバイスではよいレイアウトなのですが、スマートフォンではズームした際に入力項目の名前が見えなくなるなどの不具合があると思います。
この記事では、パソコンでは水平型のフォーム、スマートフォンでは下の図のような垂直型のフォームに変形するようにしてみたいと思います。
スマートフォンとスモールタブレットに適用されるCSSを用意します。
<head>の中にあるviewportを下記の設定にします。
メールフォームプロのサンプルファイルを利用した方は、下記の1行を削除します。
<meta name="viewport" content="width=320,initial-scale=1.0,user-scalable=no" />スマートフォンに対応させるための、viewportを設定するため下記の1行を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">CSSに以下の記述を追加します。
追加する際は、「リセット系CSS(normalize.cssやreset.css)」「メールフォームプロのCSS(mailformpro.css)」より後に読み込まれるようにしてください。
#wrapper{
width:100% !important;
max-width:960px;
}
@media (max-width: 767px){
form#mailformpro dl dt{
float: none;
clear: none;
text-align: left;
width: 100%;
}
form#mailformpro dl dd{
padding: 10px 5px;
border-top: none;
}
form#mailformpro dl dd input,
form#mailformpro dl dd textarea{
width: 100% !important;
}
}ファイルをサーバーにアップロードして確認します。
確認の際は、ブラウザのウインドウサイズを狭くすることで確認することができます。
