htmlのtableタグを使わずに整列させたフォーム(form)をCSSでデザインしてみる

![](https://qiita-image-store.s3.amazonaws.com/0/63640/3c15bea4-7567-553d-6fc9-ba1a34e02810.png "logofix.png")

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

デフォルトのままだとシンプルすぎて手抜きな感じがするので、inputタグの枠に色をつけたり、内側に影(shadow)を入れたり、角丸にしたりしてみます。とっても簡単にformをデザインできるので、ぜひ参考にしてみてください。
前回コーディングした、この状態からスタートします！
![スクリーンショット 2014-12-27 2.43.15.png](https://qiita-image-store.s3.amazonaws.com/0/63640/dd9a9098-5fdd-89ac-f9ab-d8c4f92ee133.png "スクリーンショット 2014-12-27 2.43.15.png")

```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>
```

```RubySlim
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!"
```

```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;
}
```
```SCSS
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を使って変えてみます。今回はピンク色に変えてみたいと思います。

```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;
}
```
```SCSS
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;
}

```
![スクリーンショット 2014-12-28 0.25.29.png](https://qiita-image-store.s3.amazonaws.com/0/63640/e88328ec-1e31-9464-00cb-f63aaf2cf3d2.png "スクリーンショット 2014-12-28 0.25.29.png")


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

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

```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;
	background: #f098ee;
	color: #fff;
}

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

```
```SCSS
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;
}

```
![スクリーンショット 2014-12-28 0.25.41.png](https://qiita-image-store.s3.amazonaws.com/0/63640/1ee869df-2160-71d9-ccc7-9e7b94b61c23.png "スクリーンショット 2014-12-28 0.25.41.png")
だんだんかわいい感じに仕上がってきました！次は、inputタグやtextareaの枠を「border-radius: 5px;」で角丸にして、ピンク色の枠と合わせて柔らかな雰囲気を出してみます。

```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;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
}

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

```
```SCSS
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;
}

```

![スクリーンショット 2014-12-28 0.25.41.png](https://qiita-image-store.s3.amazonaws.com/0/63640/9da77719-d620-2300-a240-67772ad34dad.png "スクリーンショット 2014-12-28 0.25.41.png")

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

```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>
```

```RubySlim
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!"
```

```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;
	background: #f098ee;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

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

```
```SCSS
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;

}

```
![スクリーンショット 2014-12-28 0.39.44.png](https://qiita-image-store.s3.amazonaws.com/0/63640/8a8b6d66-cdf3-49e4-cb47-f8854565458e.png "スクリーンショット 2014-12-28 0.39.44.png")

## フォームの内側に影(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と書くことが必要となるようです。この辺はまだまだ勉強不足なので、また理解を深めてから記事にしようと思います！


```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;
	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);
}

```
```SCSS
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);

}
```

![スクリーンショット 2014-12-28 1.40.21.png](https://qiita-image-store.s3.amazonaws.com/0/63640/8c356f2a-1b68-8c48-e9be-4a4a8b995f3a.png "スクリーンショット 2014-12-28 1.40.21.png")

つきましたー！

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