<!-- コンタクト -->
<section id="contact">
  <h2 class="headingL">Contact</h2>
  <form action="" method="post" class="mailform">
    <input id="name" type="text" name="Name" placeholder="お名前"><br>
    <input id="mail" type="email" name="Mail" placeholder="メールアドレス"><br>
    <input id="url" type="url" name="URL" placeholder="URL"><br>
    <textarea id="message" name="Message" placeholder="メッセージ"></textarea><br>
    <button class="btn">送信</button>
  </form>
</section>
<!-- コンタクトここまで -->
.mailform {
  input {
    width: max(50%, 400px);
  }

  textarea {
    width: 100%;
  }

  /* タブレット、スマホ */
  @media screen and (max-width: 768px) {
    input,
    textarea {
      max-width: 100%;
    }
  }
}
View Compiled

External CSS

  1. https://hiroec.com/demo/copypaste/css/reset.css
  2. https://hiroec.com/demo/copypaste/css/common.css

External JavaScript

This Pen doesn't use any external JavaScript resources.