今日は、フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法で作ったフォームをCSSでスタイルをあててデザインしてみます(>ω<)

デフォルトのままだとシンプルすぎて手抜きな感じがするので、inputタグの枠に色をつけたり、内側に影(shadow)を入れたり、角丸にしたりしてみます。とっても簡単にformをデザインできるので、ぜひ参考にしてみてください。
前回コーディングした、この状態からスタートします！

<form>
	<ul>
		<li class="name">
			<label for="name">Name<label>
			<input id="name" type="text" name="name" placeholder="miku honda" size="60">
		</li>
		<li class="email">
			<label for="email">Email</label>
			<input id="email" type="text" name="email" placeholder="info@example.com" size="60">
		</li>
		<li class="msg">
			<label for="msg">Message</label>
			<textarea id="msg" name="msg" cols="44" rows="20"></textarea>
		</li>
		<li><input id="button" type="submit" name="button" value="submit!">
		</li>
	</ul>
</form>

form
	ul
		li.name
			label for="name"
			input#name type="text" name="name" placeholder="mikuhonda"
		li.email
			label for="email" Email
			input id="name" type="text" name="name" placeholder="info@example.com" size="60"
		li.message
			label for="msg" Message
			textarea id="name" name="msg" cols="44" rows="20"		li.button
			input id="button" type="submit" name="button" value="submit!"

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
}

入力フォームの枠線の色を変えてみる

inputタグとtextareaタグで表示された入力フォームの枠線の色をCSSを使って変えてみます。今回はピンク色に変えてみたいと思います。

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
}

input,
textarea {
	border: solid 1px #f098ee;
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
}

input,
textarea {
	border: solid 1px #f098ee;
}

ピンク色になりました！submitボタンの内側が灰色なのが気になりますね・・・(>o<)

submitボタンの色をCSSで変える

送信ボタンの背景色が灰色のままで変なので枠線のピンク色にしてみます。それに合わせて視認性が高まるようにsubmit!の文字も白色にします。

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
}

input,
textarea {
	border: solid 1px #f098ee;
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;

}

input,
textarea {
	border: solid 1px #f098ee;
}

だんだんかわいい感じに仕上がってきました！次は、inputタグやtextareaの枠を「border-radius: 5px;」で角丸にして、ピンク色の枠と合わせて柔らかな雰囲気を出してみます。

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;

}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
}

丸くなりました！なんだか枠の高さが小さくて窮屈です。inputタグとsubmitボタンはpaddingで広げて、textareaはhtmlにサイズを指定して大きくしてみます。

<form>
	<ul>
		<li class="name">
			<label for="name">Name<label>
			<input id="name" type="text" name="name" placeholder="miku honda" size="60">
		</li>
		<li class="email">
			<label for="email">Email</label>
			<input id="email" type="text" name="email" placeholder="info@example.com" size="60">
		</li>
		<li class="msg">
			<label for="msg">Message</label>
			<textarea id="msg" name="msg" cols="44" rows="20"></textarea>
		</li>
		<li><input id="button" type="submit" name="button" value="submit!">
		</li>
	</ul>
</form>

form
	ul
		li.name
			label for="name"
			input#name type="text" name="name" placeholder="mikuhonda"
		li.email
			label for="email" Email
			input id="name" type="text" name="name" placeholder="info@example.com" cols="40" rows="60"
		li.message
			label for="msg" Message
			textarea id="name" name="msg" size="60"		li.button
			input id="button" type="submit" name="button" value="submit!"

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
	padding: 5px;
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
	padding: 5px;

}

フォームの内側に影(shadow)をつける

テキストを入力するフォームにCSSで「box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);」を記述して、透明な黒を4pxだけ内側に表示させるようにします。
っとそのまま書きたい所だったのですが、box-shadowを記述しても反映されませんでした(>o<)
googloChromeやsafariで表示されないことがあるので、そんなときは「
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);」と記述します！これはGoogleChromeやsafari対策のコードらしいです。firefox対策としては「-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);」があります。3つセットで記述するのが良さそうですね！
ちなみに、もしもborder-radiusのスタイルが反映されなかったら、shadowをつける場合と同じようにmozやwebkitと書くことが必要となるようです。この辺はまだまだ勉強不足なので、また理解を深めてから記事にしようと思います！

ul li {
	list-style: none;
	margin-top: 10px;
}

ul li.msg {
	margin-bottom: 40px;
}

label {
	margin-right: 10px;
	width:100px;
	float: left;
}

ul {
	width: 500px;
	margin: 0 auto;
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
	padding: 5px;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}

ul li {
	list-style: none;
	margin-top: 10px;
	label {
	margin-right: 10px;
	width:100px;
	float: left;
}
}

ul {
	width: 500px;
	margin: 0 auto;
	li.msg {
	margin-bottom: 40px;
}
}


input#button {
	display: block;
	margin: 0 auto;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

input,
textarea {
	border: solid 1px #f098ee;
	border-radius: 5px;
	padding: 5px;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);

}

つきましたー！

会社の忘年会でお酒を少し飲んだので、もしかしたらコードの記述間違いや説明の不具合があるかもしれません(^o^;)その場合はご指摘願います。