PC用のメールフォームは、スマホで見るとコンパクトに表示されてとても使いづらい~~~。
ということでCSSに記述を足して最適化。
●html側
<form action="・・・・" method="post">
<p>名前:
<input type="text" id="name" name="name"></p>
<p>メールアドレス:
<input type="email" id="email" name="email"></p>
<p>コメント:<br>
<textarea id="comment" name="coment"></textarea>
<p><input type="submit" id="submit" value="送信"></p>
</form>
<p>名前:
<input type="text" id="name" name="name"></p>
<p>メールアドレス:
<input type="email" id="email" name="email"></p>
<p>コメント:<br>
<textarea id="comment" name="coment"></textarea>
<p><input type="submit" id="submit" value="送信"></p>
</form>
●CSS側の指定
input {
width: 100%;
max-width: 400px; /* レスポンシブの場合の対策 */
box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
textarea {
width: 100%;
max-width: 400px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
input[type="submit"] {
max-width: 300px; /*送信ボタンの幅を指定*/
}
width: 100%;
max-width: 400px; /* レスポンシブの場合の対策 */
box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
textarea {
width: 100%;
max-width: 400px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
input[type="submit"] {
max-width: 300px; /*送信ボタンの幅を指定*/
}
/*補足)チェックボックスをCSSで大きくする記述例*/
input[type="checkbox"] { -webkit-appearance: none; position: relative; margin-right: 5px; border-radius: 8px; border: 2px solid #4c4c4c; -webkit-box-sizing: border-box; width: 20px; height: 20px; background: #ffffff; } /* チェック時は背景色を変更 */ input[type="checkbox"]:checked { background: #9FB9D3; }