自分だけのマイCSSフレームワークをつくる(フォーム編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、フォーム部分をつくりたいと思います。
あまりフォーム部分を作成する機会が少ないので、未だにフォームのHTMLやCSSの記述に関しては疎いんですよね…
ですので、最初からこのように設定しておくと、作る際にコピペするだけでOKになるので、今後は楽になるかも?

基本となるフォームのHTML

HTML
<form action="#" method="post">
<p>
<label for="name">お名前 <span class="required">*</span></label>
<input type="text" name="your-name" id="name">
</p>

<p>
<label for="email">メールアドレス <span class="required">*</span></label>
<input type="email" name="your-email" id="email">
</p>

<p>
<label for="title">題名</label>
<input type="text" name="your-subject" id="title">
</p>

<p>
<label for="message">メッセージ本文</label>
<textarea name="your-message" id="message"></textarea>
</p>

<p>
<input type="submit" value="送信" class="button">
</p>
</form>

基本となるフォームのCSS

style.css
form {
  padding: 20px;
}

form p {
  margin: 0 0 20px 0;
}

label {
  display: block;
  margin: 0 0 5px 0;
  font-size: 1.4rem;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px 10px;
  border: solid 1px #aaa;
  border-radius: 0;
  background-image: none;
  font-family: inherit;
  font-size: 1.4rem;
}

textarea {
  height: 120px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: solid 1px #ddd;
  box-shadow: 0 0 1px #aaa inset;
  outline: none;
}

.required {
  color: #f00;
}

シンプルでベーシックなスタイルになっているので、さらに装飾を加えていくときの土台用としても活用できるかもしれません。
もっとおしゃれにもしたいんですけど、まだまだフォーム部分のCSSの設定は慣れていないもので…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です