img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

テキストエリアの装飾


テキストエリアを装飾する

  IE6 NN7 OP8

スタイルを指定すると、テキストエリアを装飾することができます。

■ テキストエリアで指定できる線の種類

solid
一本線
double
二本線
dashed
破線
dotted
点線
groove
立体的な溝のある線
ridge
立体的に隆起した線
inset
下と右のアウトラインが明るい線
outset
上と左のアウトラインが明るい線



■ テキストエリア枠のスタイル IE6 NN7 OP8

<textarea cols="横幅" rows="縦幅" style="border:線の種類 線の幅 線の色;">エリアに表示する文字</textarea>
例: 
例: <textarea cols="40" rows="3" style="border:solid 1px #009999;">これはsolid 1pxです</textarea>

例: 
例: <textarea cols="40" rows="3" style="border:dotted 2px #ff9999;">これはdotted 2pxです</textarea>



■ テキストエリア枠と中のスタイル IE6 NN7 OP8

<textarea cols="横幅" rows="縦幅" style="border:線の種類 線の幅 線の色;background-color:背景色;">エリアに表示する文字</textarea>

例: 
例: <textarea cols="40" rows="3" style="border:double 3px #6666ff;background-color:#ccccff;">これはdouble 3pxです</textarea>



■ 上記スタイル+スクロールバーに色を付ける IE6

例: 
例: <textarea cols="40" rows="3" style="background-color : #ccccff;border-width : 3px ;border-style : double ;border-color : #6666ff ;scrollbar-face-color : #00ff99; scrollbar-arrow-color : #009933;">
内容</textarea>


スクロールバーの色(IEのみ)を指定する場合は base-color のほか、下記のように部分指定できます。
(スクロールバーの部分指定については DesignTipsの “スクロールバー” の項を見てください。)

scrollbar-face-color:色名;
scrollbar-arrow-color:色名;
scrollbar-track-color:色名;
scrollbar-highlight-color:色名;
scrollbar-3dlight-color:色名;
scrollbar-darkshadow-color:色名;
scrollbar-shadow-color:色名;




■ テキストエリアに背景画像を付ける IE6 NN7 OP8

<textarea cols="横幅" rows="縦幅" style="border:線の種類 線の幅 線の色;background-image:url(画像のアドレス);
background-attachment:fixed;">エリアに表示する文字</textarea>


例: 
例: <textarea cols="40" rows="8" style="border:solid 1px #009933;background-image:url(******.gif);
background-attachment:fixed;">エリアに表示する文字</textarea>

背景画像は連続して スクロールをしても固定されています。



■ テキストエリアの任意の場所に画像を付ける IE6

例: 
例: <textarea cols="40" rows="8" style="border:solid 1px #009933;background-image:url(******.gif);
background-repeat:repeat-y;">エリアに表示する文字</textarea>

背景画像は左側だけに連続します。

例: 
例: <textarea cols="40" rows="8" style="border:solid 1px #009933;background-image:url(******.gif);
background-position:0% 100%;
background-repeat:no-repeat;">エリアに表示する文字</textarea>

背景画像は左下に一つだけ表示されています。
数字(0% 100%の部分)は、左上 0% 0% 左下 0% 100% 右上 100% 0% 右下 100% 100% に変更できます。
また、background-position:50 80; と書くと、上から50px左から80pxの位置に固定されます。

○ 画像に合わせて背景色を変更する場合は background-color:背景色; を追加してください。
font-size:数値pt; color:色名; を追加することによって文字のサイズや文字色が変更できます。

テキストエリアを透過(背景を見えるように)する方法はその他の小技→透過部品を参照して下さい。