[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル

フォームのテキスト入力欄とボタンをCSS3でスタイルするステップバイステップで学ぶチュートリアルを紹介します。

CSS3 Form Styling Cheat Sheet

• CSS3でスタイルするテキスト入力欄
• CSS3でスタイルするフォームのボタン

CSS3でスタイルするテキスト入力欄

HTMLは非常にシンプルです。
classのhogeは、随時変更して利用してください。

HTML

<form>
	<input type="text" class="hoge" />
</form>

まずは、ベースとなるスタイルシートです。

CSS: Basic

border:0;
padding:10px;
font-size:1.3em;
font-family:Arial, sans-serif;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 20px;
width:300px;

枠線を角丸にします。

CSS: Rounded Corners

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

ディテールをアップするために、内側にシャドウをつけます。

CSS: Shadow Inset

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

シャドウを上部だけにして、上品な感じにします。

CSS: Shadow Inset - Top

-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);

白のシャドウを下だけ適用してみます。これは色付きの背景で映えます。

CSS: White Shadow - Bottom - Rounded Corners

-webkit-box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

最後に、アクティブ時に枠線のカラーが変わるようにスタイルします。

CSS: Active State

input:focus {
	border:solid 1px #EEA34A;
}

CSS3でスタイルするフォームのボタン

ボタンのHTMLも非常にシンプルです。
classのhogeは、随時変更して利用してください。

HTML

<form>
	<button type="submit" class="hoge">Submit</button>
</form>

まずは、ベースとなるスタイルシートです。

CSS: Basic

border:solid 1px #ccc;
padding:15px 30px;
margin:0 0 20px;
font-family:Arial, sans-serif;
font-size:1.2em;
text-transform:uppercase;
font-weight:bold;
color:#333;
cursor:pointer;

ボタンにグラデーションを適用してみます。

CSS: Gradient

background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
background-image: -webkit-linear-gradient(top, #ddd, #aaa);
background-image: -moz-linear-gradient(top, #ddd, #aaa);
background-image: -ms-linear-gradient(top, #ddd, #aaa);
background-image: -o-linear-gradient(top, #ddd, #aaa);
background-image: linear-gradient(top, #ddd, #aaa);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#aaa',GradientType=0 ); /* IE6-9 */

内側の上部だけに白のシャドウを適用します。このエフェクトは枠線があると効果的です。

CSS: Gradient - Top Inset Shadow

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);

ボタンの下に薄くシャドウを適用します。

CSS: Gradient - Bottom Shadow

-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

上内側の白シャドウと下のシャドウをあわせたものです。

CSS: Gradient - Top Inset + Bottom Shadow

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);

更に、角丸にします。

CSS: Gradient - Top Inset + Bottom Shadow + Rounded Corners

-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

最後はラベルにもエフェクトを加え、視認性をアップさせます。

CSS: Gradient - Text Shadow

text-shadow: 0px -1px 1px rgba(255, 255, 255, 0.8);