入力フォームの枠をさらに変える   役に立つJavaScript & HTML
町工場ネット トップ | サイトマップ | 新規登録 | プライバシーポリシー | 相互リンクの方法 | 問い合わせ
 
 トップページ >> 役に立つJavaScript & HTML  > 入力フォームの枠をさらに変える

 

文字ごとに色を変えています。



各行に色をつけたものです。


トップページに更新情報なんかをよく見かけますが、

ありきたりのものはよくないと思います。少し手を加えればずいぶんよくなるものです。



テキストエリアなら背景に画像を指定することも出来ます。 背景もスクロールします。画像の大きさに合わせてテキストエリアを調節しましょう。



テキストエリアなら背景に画像を指定することも出来ます。 背景を固定したものです。。画像の大きさに合わせてテキストエリアを調節しましょう。



さらに、テキストエリアの枠の色を変えたものです。




さらにさらに、スクロールバーの色を変えたものです。



背景を左側たてにだけ、表示したものです。背景固定。




背景を右側たてにだけ、表示したものです。背景固定。

どうです。ずいぶん印象が違うものです。これならトップページにおいても違和感なくなるでしょう。あとは、いろいろ組み合わせたり、色を変えたりして楽しんでください。

指定には、スタイルシートを使用しています。最終の形のものをみましょう。ここから余計なものを削除すれば、思いのものができます。

.image6{
SCROLLBAR-FACE-COLOR: #ff99ff;
SCROLLBAR-HIGHLIGHT-COLOR: white;
SCROLLBAR-SHADOW-COLOR: white;
SCROLLBAR-ARROW-COLOR: white;
SCROLLBAR-BASE-COLOR: #ff99ff  
・・・ここまでがスクロールバーの色指定
border-width:1px; 
・・・・・・・・・枠の太さ           
border-color:#ff0080;
・・・・・・・枠の色

border-style:solid;
・・・・・・・枠の形

background-image : url(apple4.gif);
・・・・背景画像の指定

background-position:right;
・・・・・背景画像の位置。全体に一枚を表示するときは削除

background-repeat:repeat-y;
・・・縦一列の指定。全体に一枚を表示するときは削除

background-attachment:fixed;
・・・背景の固定。固定しないときは削除

color:#000000;
・・・・・・・・・・・文字の色

}

上の指定を<STYLE></STYLE>で囲んで、下のように呼び出します。

<TEXTAREA rows="5" cols="25" class="image6">〜〜〜〜</TEXTAREA>

赤字のところは、必ず、両方とも同じ名前を付けるようにしましょう。

このページの上 
責任者:吉年伸之 住所:大阪府大東市寺川5-12-18  問い合わせ:support@sisakubankin.com