テキストボックスの装飾方法/HTMLタグ素材集

テキストボックス装飾１
(文字サイズを変える)

ここに文章を書いて下さい

[font-size:30px;]の数字を大きくすると文字が大きく小さくすると文字が小さくなります
指定した文字の大きさによってテキストボックスのサイズも変わります

<TEXTAREA ROWS=3 COLS=30 style="font-size:30px;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾２
(文字色を変える)

ここに文章を書いて下さい

[color:カラー;]カラー部分にカラーコードを入れると文字色が変わります
←メニュー内[カラーパレット]からカラーコードを選んで下さい

<TEXTAREA ROWS=3 COLS=30 style="color:カラーコード;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾３
(テキストボックスの背景色を変える)

ここに文章を書いて下さい

[background-color:カラー;]カラー部分にカラーコードを入れると背景色が変わります
←メニュー内[カラーパレット]からカラーコードを選んで下さい

<TEXTAREA ROWS=3 COLS=30 style="background-color:カラーコード;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾４
(文字と背景色を変える)

ここに文章を書いて下さい

[background-color:背景カラー;]カラー部分にカラーコードを入れると背景色が変わります
[color:文字カラー;]カラー部分にカラーコードを入れると文字色が変わります
←メニュー内[カラーパレット]からカラーコードを選んで下さい

<TEXTAREA ROWS=3 COLS=30 style="background-color:背景カラー;color:文字カラー;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾５
(フォントを変える)

ここに文章を書いて下さい

[font-family:フォント;]フォント部分にフォント名を入れると書体が変わります
←メニュー内[フォント一覧]からフォント名を選んで下さい

<TEXTAREA ROWS=3 COLS=30 style="font-family:フォント名;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾６
(テキストボックスのサイズを変える)

ここに文章を書いて下さい

[ROWS="3"]は縦の行数、数字を増やすと縦に長くなります
[COLS="30"]はボックスの横幅、数字を増やすと横に長くなります

<TEXTAREA ROWS=5 COLS=80>
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾７
(テキストボックス内に切り取り、貼り付けを出来ないようにする)

ここに文章を書いて下さい

[readonly]を加えることによって切り取り、貼り付けが出来なくなります

<TEXTAREA ROWS=3 COLS=30 readonly>
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾８
(テキストボックスの枠をなくす)

ここに文章を書いて下さい

[style="border:0;"]を加えることによってテキストボックスの枠がなくなります

<TEXTAREA ROWS=3 COLS=30 style="border:0;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾９
(テキストボックスに色々な枠をつける)

ここに文章を書いて下さい

[太さ]はthin=細い、medium=中間、thick=太い
[枠形式]はdashed(破線)　dotted(点線)　ridge(立体線)
　double(二重線)　groove(へこみ線)
←メニュー内[カラーパレット]からカラーコードを選んで下さい

<TEXTAREA ROWS=3 COLS=30 style="border:太さ 枠形式 カラーコード;">
ここに文章を書いて下さい
</TEXTAREA>

上記テキストボックスのタグを例にするとこうなります

<TEXTAREA ROWS=3 COLS=30 style="border:thin dotted #ff80c0;">
ここに文章を書いて下さい
</TEXTAREA>

テキストボックス装飾10
(すべての要素を取り入れて装飾してみる)

ここに文章を書いて下さい

様々な要素を取り入れて自分だけのテキストボックスを作ってみましょう

<TEXTAREA ROWS=5 COLS=30 style="border:thick ridge #800000;background-color:#006a00;color:#ffffff;font-family:富士ポップ;" readonly>
ここに文章を書いて下さい
</TEXTAREA>

ホームページに広告張るなら	A8.net
有料ホームページ始めるなら	ロリポップ！
無料ＣＧＩ色々	ACR WEB