8-1 textareaの装飾
- 掲示板やメールフォームのコメント投稿部分に利用される「textarea」の装飾方法です。
- IEは5.5以上であれば全て表示致します。
（NNとFireFoxは枠線を除きスクロールバーの色合いなどは表示致しません。） - OPERA7.5では枠線は表示されておりますが、ユーザーが
「スクロールバーのスタイルを有効にする」という項目にチェックを入れていない限り、色合いは表示されません（この項目はダウンロードしたばかりの段階ではオフになっております）。
※ 動作はWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で確認済みです
<textarea name="comment" cols="20" rows="5">
</textarea>
上記のボタンを個別に装飾したい場合、半角スペースを空けて
「style="★（線の種類等）"」と追加して下さい。
<textarea name="comment2" cols="20" rows="5"
style="font-family:Arial; /* 文字の種類 */
font-size:10pt; /* 文字の大きさ */
color:#000000; /* 文字の色 */
background-color:#ffffff; /* 背景色 */
border:1px solid #990066; /* 線の種類と色 */
scrollbar-face-color:#990066; /* 本体の色 */
scrollbar-track-color:#990066; /* 背面の色 */
scrollbar-arrow-color:#ffffff; /* 矢印の色 */
scrollbar-highlight-color:#ffffff; /* 左側・上 */
scrollbar-shadow-color:#ffffff; /* 右側・下 */
scrollbar-3dlight-color:#990066; /* 左側・外上 */
scrollbar-darkshadow-color:#990066; /* 右側・外下 */">
</textarea>
[ 関連事項 ： HP-TIPS > HPの作り方 > HTML文章を作る > フォーム関連 > textarea ]
8-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 > 枠線の種類 ]
その他の枠線は上記のリンク先をご覧下さいませ。
8-3 まとめて指示する場合
<textarea>の装飾は個別に書く事も出来ますが、まとめて指示する事も出来ます。
<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--
body {
scrollbar-face-color:#990066; /* 本体の色 */
scrollbar-track-color:#cccccc; /* 背面の色 */
scrollbar-arrow-color:#cccccc; /* 矢印の色 */
scrollbar-highlight-color:#990066; /* 左側・上 */
scrollbar-shadow-color:#990066; /* 右側・下 */
scrollbar-3dlight-color:#990066; /* 左側・外上 */
scrollbar-darkshadow-color:#990066; /* 右側・外下 */
}
textarea {
font-family:Arial; /* 文字の種類 */
font-size:10pt; /* 文字の大きさ */
color:#000000; /* 文字の色 */
background-color:#ffffff; /* 背景色 */
border:1px solid #990066; /* 線の種類と色 */
}
-->
</style>
- <textarea>内にスクロールバーの色指定をしなかった場合、
body で指定されたスクロールバーの色合いを表示します。 （そちらも指定していない場合は各ブラウザのインターフェイスが表示されます） - 上記のように指定した場合、
<body> ～ </body> 内のタグで書かれる「textarea」の中身は、一番最初に書いた <textarea name="comment" cols="横幅" rows="縦幅"></textarea> だけでOKです。
↓ こんな感じになります。
-
Windowsにおける各ブラウザごとの見本（赤色）はこちらです。（8.65KB）
（別窓で見たい方はこちらをどうぞ） - 画像はWindowsにおけるIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1の物です。
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]