ウェブデザインをスタイルシートでおこなおう！

ボタンに色をつけよう

掲示板やその他でよく使われる『送信ボタン』　→　
このままだと実に味気ない。
ということで、CSSを使って綺麗にしてみよう。

予備知識

ボタンは　input 要素で作るのだが、この input 要素はボタン意外にも、テキスト入力ボックスなどにも使用される。
したがって、単純に input {} とスタイル設定すると、あらゆるinput要素に適用されるので注意。
なので、クラスを指定し、 .button {} のようにしてつくるといいだろう。

例

.button01 {
	background-color: #CCCCFF;
	border: 2px solid #6699CC;
	color: #000033;
}
		  

一行目 background-color: #CCCCFF; は、ボタン背景色を #CCCCFF に指定
二行目 border: 2px solid #6699CC; は、 ボタンの枠を2ピクセルの太さ、線を実線(solid)、色を#6699CC。

三行目 color: #000033; 文字色の指定。

好きな色、枠の太さにすれば綺麗なボタンの完成だ。
でもこれだと、ボタンが平坦。立体的にしたい場合はボーダー色を細かく設定しよう。

.button02 {
	color: #FFCC66;
	background-color: #660000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFB9B9;
	border-right-color: #420000;
	border-bottom-color: #420000;
	border-left-color: #FFB9B9;
}

最初の例では、ボーダーを一括指定した。でも今回は各線ごとに指定する。

border-top-width、border-right-width といった widthがつくものは太さ。
top(上)、right(右)、left(左)、bottom(下)の線に対応し、width(太さ)、color(色)となる。
styleは線の種類で、solid(実線)、 dotted(点線)、dashed(破線)、double(二重線)などが指定できる。

テキスト入力ボックスでも同じように指定できる。
上のスタイルを適用させるとこうなる。