テキストボックスを作る１
テキストボックスを作る１
今回使う タグ
< P style="overflow:scroll;width:数字px;height:数字px;" ></ P >
< P style="overflow:scroll;width:数字px;height:数字px;" ></ P >
楽天でもちらほら見かけるテキストボックス。
テキストボックスと言っても、何かわからない方がいると思いますので、
実物は下の点線で囲ったようなものになります。
モックン☆彡の部屋へようこそ♪
ここは楽天流のＨＴＭＬ講座です。
文字の色や大きさを変えたり、
少し違った表示をしてみませんか？
簡単なものはこんな感じになるよ→長い文章を書いて横にスクロールさせることもできます。
ここまで見るとは暇人？
（＾▽＾笑）
ここは楽天流のＨＴＭＬ講座です。
文字の色や大きさを変えたり、
少し違った表示をしてみませんか？
簡単なものはこんな感じになるよ→長い文章を書いて横にスクロールさせることもできます。
ここまで見るとは暇人？
（＾▽＾笑）
更新履歴などで使っている人がいるアレです！(ノ*゜▽゜*)ニパパパ
使い方は様々で、中に画像を入れたり背景を入れたりできます。
《例題１》
< P
style="overflow: scroll
;width:200px;height:100px;" align=" center
"
>
１行目 < BR > ２行目 < BR > ３行目 < BR > ４行目 < BR > ５行目 < BR > ６行目
</ P >
↓
１行目 < BR > ２行目 < BR > ３行目 < BR > ４行目 < BR > ５行目 < BR > ６行目
</ P >
↓
１行目
２行目
３行目
４行目
５行目
６行目
今まで紹介してきたものがいくつか出てきましたね。まずは、少しおさらいから始めましょう。
まずは『 width 』ですが、これは 横幅 を表します。
続いて『 height 』ですが、これは 縦幅 を表します。
それぞれ数字が大きければ大きいほど枠が広がります。
次に『 align=" center " 』ですが、『 center 』なら中央に、『 left 』なら左に、
『 right 』なら右にそれぞれ 文字を 寄せます。
『 center 』、『 left 』、『 right 』はテーブルの説明でも出てきましたね。
残りの『 overflow: scroll ; 』がテキストボックスにするための 要素 です。
『 scroll 』以外にも色々入れることができ、下に簡単な説明を載せます。
| visible | … | ボックスからはみ出して表示されます。これがデフォルト（通常）です。 また、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて大きくなります。 |
| scroll | … | 入りきらない内容はスクロールして見られるようになります。 |
|---|---|---|
| hidden | … | はみ出た部分は表示されません。 |
| auto | … | ブラウザによって変わります。（一般的にはスクロールして見られるようになります） |
下の 《例題２》 にはそれぞれ同じ内容を入れてますが、違いがわかるかな？
《例題２》
| visible | scroll | hidden | auto |
| モックン☆彡の部屋へようこそ♪ |
モックン☆彡の部屋へようこそ♪ |
モックン☆彡の部屋へようこそ♪ |
モックン☆彡の部屋へようこそ♪ |
上の 《例題２》 では『 width:130px; 』、『 height:80px; 』に指定しています。
書き方は下のようになります。 ★ へは 《例題２》 で挙げた４つの内の１つが入ります。
< P
style="overflow: ★
;width:130px;height:80px; background-color:#ddded3;
"
>
モックン☆彡の部屋へようこそ♪ < BR
>
ここは楽天流のＨＴＭＬ講座です。 < BR
>
< BR
>
< BR
>
< BR
>
< BR
>
< BR
>
< BR
>
(ノ*゜▽゜*)ニパパパ
</ P
>
これはテキストボックスの背景色を決めます。
既に『 ((o(^-^)o))わくワク枠１ 』などで出てきたアレです。
『 background-color: 色 ; 』の 色 を変えることによって、背景の色が変わります。
続いて 《例題１》 を見ると分かると思いますが、
普通にテキストボックスを書くと、ただのスクロールバーが付くだけです。
今度はここへ枠をつけてみましょう。
《例題３》
< P
style="overflow: scroll
;width:200px;height:100px; border-style: dashed
;
" align=" center
"
>
１行目 < BR > ２行目 < BR > ３行目 < BR > ４行目 < BR > ５行目 < BR > ６行目
</ P >
↓
１行目 < BR > ２行目 < BR > ３行目 < BR > ４行目 < BR > ５行目 < BR > ６行目
</ P >
↓
１行目
２行目
３行目
４行目
５行目
６行目
今度は点線が追加されたでしょ？
《例題１》 のものに『 border-style: dashed ; 』を追加しただけです。
この他にも線の種類や太さを変えたりできます。
やり方は『 ((o(^-^)o))わくワク枠１ 』から解説してますので、そちらを見てください。
また、下にお手本を載せますので、参考にして下さい。
《お手本１》 ：ページ用タグ、：結果、：コメント
| < CENTER
>
キリ番履歴 < P style="overflow:scroll;border-style:ridge;border-color:yellow blue red green;border-width:10px;background-color:#a8efaf;width:300px;height:200px;" > < B > < BR > １００番 < BR > < A href="リンク先のアドレス１" target="_blank" > 名前１ </ A > さん < BR >< BR > ２００番 < BR > < A href="リンク先のアドレス２" target="_blank" > 名前２ </ A > さん < BR >< BR > ３００番 < BR > < A href="リンク先のアドレス３" target="_blank" > 名前３ </ A > さん < BR >< BR > ４００番 < BR > < A href="リンク先のアドレス４" target="_blank" > 名前４ </ A > さん < BR >< BR > ５００番 < BR > < A href="リンク先のアドレス５" target="_blank" > 名前５ </ A > さん < BR >< BR > ６００番 < BR > < A href="リンク先のアドレス６" target="_blank" > 名前６ </ A > さん < BR >< BR > ７００番 < BR > < A href="リンク先のアドレス７" target="_blank" > 名前７ </ A > さん < BR >< BR > </ B ></ P ></ CENTER > |
|---|
| |
| 背景の色を変える場合は、『 background-color:#a8efaf;
』を変えてください。 枠線の太さを調節したい場合は、『 border-width:10px; 』の数値を変えてください。 その他、枠に関しては ((o(^-^)o))わくワク枠１ 以下のページを参考にして修正して下さい。 また、リンクの張り方については リンクを張る！ のページを参考にして下さい。 同じような手順で、テキストボックスの中にバナーなども表示できます。 |
《お手本２》 ：ページ用タグ、：結果、：コメント
| < P style="overflow:scroll;border-style:ridge;border-color:yellow blue red green;border-width:10px;background-color:#a8efaf;width:300px;height:300px;color:black;writing-mode:tb-rl;"
>
< B >< BR > 適当な文章や画像１ < BR >< BR > 適当な文章や画像２ < BR >< BR > 適当な文章や画像３ < BR >< BR > ・・・・ </ B ></ P > |
|---|
| |
| この縦書きは Internet Explorer限定
です。『 tb-rl
』はテキストを縦書きで表示させることができ、『 Top to Bottom - Right to Left
』という意味です。つまり文章の流れる方向を上から下に、右から左にという風に日本語や中国語などの縦書きと同じにできます。 その他については 《お手本１》 を参考にして下さい。 |
| テキストボックスを作る２へ |
ご意見・ご感想・ 告白
メールお待ちしております ヾ( ☆
▽ ☆
)/ moonlightshine@mail.goo.ne.jp
© Rakuten Group, Inc.
