CSS3でかっこいいフォームを作成する方法 – CSS3でフォームの見栄え良くして使いやすさを向上させる方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回のTipsは【CSS3でかっこいいフォームを作成する方法】です。一部のブラウザで実現できないものもありますがCSS3を駆使するとフォームも大分入力しやすくなるかと思います。

フォームの使いやすさやデザイン性を向上させる33の方法

これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。

発展編

16. CSS3でかっこいいフォームを作成する方法

入力フォームをCSS3でデザインしてみます。今回使用するプロパティはグラデーション、角丸、ボックスシャドウ、テキストシャドウです。

効果 プロパティ名 記述例
グラデーション linear-gradient(位置と角度, 開始色, 途中色, 終了色); background: -webkit-gradient(linear, left top, left bottom, from(#0c2430), to(#0d1e26));
background: -webkit-linear-gradient(top, #0c2430, #0d1e26);
background: -moz-linear-gradient(top, #0c2430, #0d1e26);
background: -ms-linear-gradient(top, #0c2430, #0d1e26);
background: -o-linear-gradient(top, #0c2430, #0d1e26);
角丸 border-radius:半径の長さ; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
ボックスシャドウ box-shadow:影の色 横方向 縦方向 ぼかし; -webkit-box-shadow: #000 0 1px 30px;
-moz-box-shadow: #000 0 1px 30px;
box-shadow: #000 0 1px 30px;
テキストシャドウ box-shadowと同じ text-shadow: #612307 0 1px 0;

例では青色のフォームを作成してみました。サンプルでフォームのCSSもメモしておきます。resetCSSを使用していますので下記コードをコピーして使用する際はYUI Reset Cssを併用してください。

HTML


<form method="post" id="formbd">
<ul id="css3form">
<li class="fmt">Email</li>
<li><input type="text"></li>
<li class="fmt">Name</li>
<li><input type="text"></li>
<li class="fmt">Country</li>
<li><input type="text"></li>
<li class="fmt">Message</li>
<li><textarea class="fm">message…</textarea></li>
<input type="submit" value="SUBMIT" class="btn">
</ul>
</form>

CSS

.fmt {
font-size: 13px;
margin: 0 0 20px 0;
color: #aed1e3;
text-shadow: #000 0 2px 0;
}

#css3form {
border: 1px solid #2b4d5e;
background: #0d1e26;
background: -webkit-gradient(linear, left top, left bottom, from(#0c2430), to(#0d1e26));
background: -webkit-linear-gradient(top, #0c2430, #0d1e26);
background: -moz-linear-gradient(top, #0c2430, #0d1e26);
background: -ms-linear-gradient(top, #0c2430, #0d1e26);
background: -o-linear-gradient(top, #0c2430, #0d1e26);
background-image: -ms-linear-gradient(top, #0c2430 0%, #0d1e26 100%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 30px, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(000,000,000,0.9) 0 1px 30px, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(000,000,000,0.9) 0 1px 30px, inset rgba(255,255,255,0.4) 0 0px 0;
font-family: ‘Helvetica Neue’,Helvetica,sans-serif;
width: 400px;
padding: 20px;
}

input{margin: 0 0 20px 0;}

.fm {
color: #2b4d5e;
font-size: 13px;
border: 1px solid #5f7d8c;
background: #3e6b82;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #0c2430;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
padding: 8px;
width: 380px;
}

.btn {
cursor: pointer;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 8.5px 18px;
border: 1px solid #102b38;
background: #2b6263;
background: -webkit-gradient(linear, left top, left bottom, from(#62afd6), to(#3e6b82));
background: -webkit-linear-gradient(top, #62afd6, #3e6b82);
background: -moz-linear-gradient(top, #62afd6, #3e6b82);
background: -ms-linear-gradient(top, #62afd6, #3e6b82);
background: -o-linear-gradient(top, #62afd6, #3e6b82);
background-image: -ms-linear-gradient(top, #62afd6 0%, #3e6b82 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #612307 0 1px 0;
}

textarea.fm{
height: 100px;
}

 

17. CSS3 かっこいいフォームを自動生成する便利なジェネレーター【Form builder.

上で自作方法を書いておいてなんなんですが…自分で全て記述するにはハードルが高めです。そんな時には簡単に自動生成してくれる素晴らしいジェネレーターがありますので、それを活用してみるのが良いかと思います。

 

18. ログインフォーム等を常にウィンドウ中央の最前面に配置させる方法

最後は補足になりますが、ログインフォームをポップアップ形式で画面中央に配置させているサイトがあります。この実装方法はすごく簡単ですのでもしよろしければ【jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】の記事をご参照ください。

以上になります。デモでは今回のtipsを適応した例が確認できますので、もしよろしければ合わせてご確認ください。