テキストボックスを作る２
前回では背景に色をつけましたね。
今回は『 ((o(^-^)o))わくワク枠 』シリーズの時と同じやり方で背景に
画像を入れることから始めましょう。
《例題１》 ：ページ用タグ、：結果
| < CENTER
>
適当な題名 < P style="overflow:scroll;border-style:ridge;border-color:yellow blue red green;border-width:10px;width:400px;height:300px; background-image:url(画像アドレス) " > < B > < BR > 適当な文１ < BR >< BR > 適当な文２ < BR >< BR > 適当な文３ < BR >< BR > ････ 以下略 ････ </ B ></ P ></ CENTER > |
|---|
| |
今まで学習してきたものへ『 background-image:url(画像アドレス) 』を追加しただけですね。
標準では、指定したサイズの枠に収まる画像なら、並べられて表示されます。（繰り返し表示）
このほかに背景を固定したりする方法もあります。
例題を載せますので参考にして下さい。
《例題２》
< P style="overflow:scroll;border-style:groove;border-color:skyblue;border-width:7px;width:200px;height:100px;background-image:url(画像アドレス);" > 適当な文章 </ P >
例として挙げているものは、 background-image:url(画像アドレス); の後に追記して下さい。
必ず全体を『 "" 』の間に挟んであげて下さいね。 ちなみに背景へ使っている画像は『
』です
これは《例題１》と
同じ方法です。
背景が繰り返されるし、
スクロールさせると
背景も動きます。
さらに、背景へ色も
追加しました。
これは左のものに
background-attachment:fixed;
を追加したものです。
スクロールさせると
背景は固定されます。
背景の画像を
繰り返さないために
background-repeat:no-repeat;
を追加したものです。
画像が１つしか
表示されません。
背景を固定させつつ
垂直方向へ画像を
繰り返すように
background-repeat:repeat-y;
を追加したものです。
背景を固定させつつ
水平方向へ画像を
繰り返すように
background-repeat:repeat-y;
を追加したものです。
背景を固定しつつ
左上に画像を１つ
固定するために
background-position:top left;
を追加したものです。
また、
background-repeat:no-repeat;
を入れないと
画像が繰り返されて
しまうので、
注意が必要です。
背景を固定しつつ
中央に画像を１つ
固定するために
background-position:center;
を追加したものです。
また、
background-repeat:no-repeat;
を入れないと
画像が繰り返されて
しまうので、
注意が必要です。
背景を固定しつつ
右下に画像を１つ
固定するために
background-position:bottom right;
を追加したものです。
また、
background-repeat:no-repeat;
を入れないと
画像が繰り返されて
しまうので、
注意が必要です。
背景を固定しつつ
中央に画像を１つ
固定するために
background-position:100% 100%;
を追加したものです。
さらに、
background-repeat:no-repeat;
を入れて画像を
１つにしています。
左のものと同じ
結果ですが、
指定方法が違います。
テキストボックスの中に注意点を書きましたが、いくつか補足します。
細かい文字が何行かに分かれて書かれていると思いますが、
全て続けて書いてください。コピーして貼り付けると確実です。
後半に使っている背景へ画像を１つ固定してからの場所関係を下にまとめます。
水平キーワード（left・center・right）、%
垂直キーワード（top・center・bottom）、%
パーセンテージは上の括弧で囲んだものと混合はできません。
パーセンテージで指定する場合は、一番左上が『0% 0%』で一番右下が『100% 100%』になります。
それぞれ書く順番は、特にありませんが、
最初と２番目のキーワードの間には 半角のスペース
を入れて下さい。
キーワードを１つしか書かない場合は、もう片方へ『center』が入ります。
参考に載せますが、下は同じ事を言っています。
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
いよいよテキストボックスについての最後の例題です。
今度はスクロールバーに色をつけるのですが、
注意が必要なのは Internet Explorer限定 です。
よって、Internet Explorer以外の人には標準のスクロールバーで表示されてしまうという事を
頭の片隅に置いて使用して下さい。
《例題３》
< P style="overflow:scroll;border-style:solid;border-color:pink;border-width:5px;width:200px;height:100px;" > 適当な文章 </ P >
例として挙げているものは、 height:100px; の後に追記して下さい。
必ず全体を『 "" 』の間に挟んであげて下さいね。
これが普通の
テキストボックスです。
何もしていない場合の
標準のものですね。
scrollbar-base-color
は
スクロールバー基本色を
設定しますので、
全体的な色が指定した
色になります。
scrollbar-face-color
スクロールバー本体色を
指定します。
四角い部分ですね。
scrollbar-highlight-color
スクロールバー左側
上の影に色をつけます
似たような物を
テーブルタグでも
説明しています。
scrollbar-shadow-color
スクロールバー右側
上の影に色をつけます
あまり目立たないかも
しれませんね。
scrollbar-3dlight-color
スクロールバーの左側
下の影に色をつけます
人によっては見えない
かもしれません。
scrollbar-darkshadow-color
スクロールバーの右側
下の影に色をつけます
人によっては見えない
かもしれません。
scrollbar-track-color
背面の色を指定します
文字の通り、
バーを動かす背景の
部分ですね。
scrollbar-arrow-color
矢印の色を指定します
例題の一番左上のものが標準のスクロールバーです。
その他のものには色をつけるのに『 blue 』をいれていますので、
該当部分が青く変わっていると思います。
また、２つ以上の色を変えたい場合は続けて書いてください。
例えば、スクロールバー本体色を黄色にして、背面の色を赤にする場合は、
『 scrollbar-face-color:yellow; 』で本体色を黄色に指定し、
『 scrollbar-track-color:red; 』で背面の色を赤色に指定するので、
『 scrollbar-face-color:yellow;scrollbar-track-color:red; 』と書きます。
例題３を参考にすると、ここに書いているタグは下のようになります。
< P style="overflow:scroll;border-style:solid;border-color:pink;border-width:5px;width:500px;height:100px; scrollbar-face-color:yellow;scrollbar-track-color:red;
"
>
適当な文章
</
P
>
ここでは横幅を『 width:500px;
』で広げてあります。
次はタグのお手本を紹介します。
ページの設定で自動改行へチェックが入っている場合は、日記用タグをオススメします。
《お手本１》 ：ページ用タグ、：日記用タグ、：コメント
| < P style="overflow:auto;background-color: 色１
;border-style:solid;width:500px;height:150px;border-color: 色２
;border-width:5;scrollbar-shadow-color: 色１
;scrollbar-3dlight-color: 色１
;scrollbar-arrow-color: 色１
;scrollbar-track-color: 色１
; scrollbar-darkshadow-color: 色１
;scrollbar-face-color: 色１
;scrollbar-highlight-color: 色１
;color: 色３
;"
>
適当な文章１ < BR > 適当な文章２ < BR > 適当な文章３ < BR > ････ ････ ････ </ P > |
|---|
| < CENTER
>< P style="overflow:auto;background-color: 色１
;border-style:solid;width:500px;height:150px;border-color: 色２
;border-width:5;scrollbar-shadow-color: 色１
;scrollbar-3dlight-color: 色１
;scrollbar-arrow-color: 色１
;scrollbar-track-color: 色１
; scrollbar-darkshadow-color: 色１
;scrollbar-face-color: 色１
;scrollbar-highlight-color: 色１
;color: 色３
;line-height:1.8;" align="left"
>
適当な文章１ 適当な文章２ 適当な文章３ ････ ････ ････ </ P ></ CENTER > |
| ここの内容はテキストボックスを使って書いています。 |
| 『 width:500px;
』は横幅を表し、『 height:150px;
』は縦幅を表します。 それぞれ数字が大きければそれぞれの方向へ枠が広がります。 色１ （#add8e6）は背景の色とスクロールバーの色を指定しています。 色２ （red）は枠の色を指定しています。 色３ （blue）は文字の色を指定しています。 色の種類に関しては、『 Web Safe Color 』以下のページを参照してください。 今回のポイントは、 色１ を全て同じ色にそろえることです。タグが長いですが、間違えて書き写さないようにコピーして使う事をオススメします。 また、日記用は枠を中央に寄せるのと、文字行の間隔を空ける小細工が入っています。 （タグが５行にまたがっているように見えますが、全部つながっているので注意して下さい） |
| テキストボックスを作る１へ |
-
-
- 楽天ラッキーくじ
- 楽天ラッキーくじ更新情報（2025/11/…
- (2025-11-24 13:15:41)
-
-
-
- モバイルよもやま
- ［ウイルスバスター クラウド］「お…
- (2025-10-31 06:43:08)
-
-
-
- ブログ更新しました♪
- １１月２７日 記事更新致しました。
- (2025-11-27 16:21:50)
-
