7-1 inputの装飾
掲示板やメールフォームの送信ボタン、一言メッセージを記入する欄に利用される「input」ボタンの装飾方法です。
このタグは単独で使用出来ます。（<input> ～ </input>とする必要はございません。）
※ 動作は全てWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で確認済みです。
<input type="submit" value="送信">
上記のボタンを個別に装飾したい場合、半角スペースを 空けて「style="★（線の種類等）"」と追加して下さい。
<input type="submit" value="submit"
style="font-family:Arial; /* 文字の種類 */
font-size:12pt; /* 文字の大きさ */
color:#000000; /* 文字の色 */
background-color:#ffffff; /* 背景色 */
border:1px solid #0000cc; /* 線の種類と色 */">
<input type="text" size="20"
style="font-family:Arial; /* 文字の種類 */
font-size:10pt; /* 文字の大きさ */
color:#000000; /* 文字の色 */
background-color:#ffffff; /* 背景色 */
border:4px double #0000cc; /* 線の種類と色 */">
[ 関連事項 ： HP-TIPS > HPの作り方 > HTML文章を作る > フォーム関連 > input ]
7-2 枠線の種類
- dotted （丸点）
NNとOPERAとFirefoxでは1pxでも点になっておりますが、何故かIEでは線の太さを 2px 以上 にしないと丸点にはなりません。（IEのみ1px に指定した場合、dashed［点線］ の 1px に指定した物と変わりません） - double （二重線）
線の太さを 3px 以上 にしないと線が二重にはなりません。（1px に指定した場合、solid［実線］ の 1px に指定した物と変わりません。また、2px にした場合は普通の太線になります。5px 以上に指定すると外枠・内枠共に太くなって行きます。） - dashed （点線）
点線を太くしたい方は、「1px」を「2px」等に数字を大きくして行って下さい。 - solid （実線）
こちらも線を太くしたい方は、「1px」を「2px」等に数字を大きくして行って下さい。 - none （線なし）
IE6.0とNN7.1とFirefox1.5.0.1では枠無しで表示されますが、OPERA7.5では立体的な薄い灰色の枠が付いております。（見本はこちらをご覧下さい）。
追記：OPERA8.5ではIE達と同じように枠無しで表示されるようになりました。
[ 関連事項 ： HP-TIPS > CSS > 枠線の種類 ]
その他の枠線は上記のリンク先をご覧下さいませ。
7-3 まとめて指示する場合
<input>の装飾は個別に書く事も出来ますが、まとめて指示する事も出来ます。
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
input {
font-family:Arial; /* 文字の種類 */
font-size:12pt; /* 文字の大きさ */
color:#999999; /* 文字の色 */
background-color:#ffffff; /* 背景色 */
border:1px solid #0000cc; /* 線の種類と色 */
}
-->
</style>
上記のように指定した場合、<body>タグの間で書かれる「input」の中身は、一番最初に書いた <input type="submit" value="submit"> や <input type="text" size="★（数字）"> だけでOKです。
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]