Webシステム用管理者画面作成マニュアル デザイン/HTML/CSS/JavaScript集
CSS

フォームにCSS |buttontextradiochekboxtextareaselectselect(リスト)file

フォームの各部品に共通のスタイルシートを適用し、IE/Mac・ブラウザ別にプレビューしたものです。
作成するシステムは、ほとんどWindows XP InternetExplorerもしくはWindows クラシック InternetExplorerで利用されます。
他のOSや他のブラウザで使用されることは、ほとんどありません。・・・が、せっかくなので参考にプレビュー画像を掲載しました。

【備考】XPのプレビューにつきまして、基本的な「Windows XP」にてプレビューしております。他のテーマ(例:エナジーブルー等)の場合は表示状態が変わります。ご注意ください。

<input type="button">
1 .form_style1 {color:#cc0000;} フォームの文字色を「#cc0000」に。
2 .form_style2 {background-color: #99cc99;} フォームの背景色を「#99cc99」に。
3 .form_style3 {color: #ffffff; background-color: #0066cc;} フォームの文字色を「#ffffff」、を背景色「#0066cc」に。
4 .form_style4 {border-width: 5px;} フォームの枠を太く。
5 .form_style5 {border-color: #cc0000;} フォームの枠線を「#cc0000」に。
6 .form_style6 {border: 0px;} フォームの枠線を細く(「0」の場合は無しに)。
7 .form_style7 {font-family: "MS P明朝", "細明朝体";} フォームの文字のフォントを「MS P明朝」に指定。「MS P明朝」がインストールされていなければ「細明朝体」。
8 .form_style8 {font-size: 20px;} フォームの文字サイズを大きく。
9 .form_style9 {font-size: 5px} フォームの文字サイズを小さく(ブラウザによっては読めなくなるのでご注意を)。
10 .form_style10 {font-weight: bold;} フォームの文字を太く。
11 .form_style11 {padding: 10px;} フォームの内側の余白を調整。
12 .form_style12 {margin: 10px; text-align: right; width: 100px;} フォームの枠外側の余白を調整、文字を右寄せ、フォームのサイズを調整。フォームの幅は%でも可。
13 .form_style13 {background:url(line.gif);} フォームに背景画像(設定しても背景がつかない部品あり)。
14 .form_style14 {background:url(line.gif); border:none;} フォームに背景を設定し、ボーダーを消す。(応用によってはアクアボタンなどにできます。)

表示サンプル ※ご自身のブラウザはこのように表示されます。
ブラウザ別表示サンプル
※こちらは画像になっています。連番のないもの(各画像の一番下)はデフォルト設定です。
Win IE6.0 Cs Win IE6.0 XP Win Ff1.5 Cs Win Ff1.5 XP
Win NN7.1 Cc Win NN7.1 XP Win Opera8.54 Cs Win Opera8.54 XP
Mac IE5.1 OS9 Mac NN7.1 OS9 備考  
※Ff=Firefox
※Cs=Classic
※IE=InternetExplorer
※NN=Netscape
 
▲UP
エルテ化粧品
▲「エルテ化粧品」スポンサーサイトです。
(c)kanri-gamen