|
|
|
全て
| カテゴリ未分類
| 【日記もどき】
| 【日記の雛形！】
| 【プチ講座】
| 【頼まれ物】
| パイプ奮闘記
| パイプ奮闘記〔自作パイプ〕
| 【3年ぶりの日記もどき】
2004/01/25
カテゴリ：カテゴリ未分類
前回【日記で使う！ボックスのお勉強 ２(幅と高さの特性)】 と 【日記で使う！ボックスのお勉強 ３(幅と高さの特性)】 でテキストや画像を ボックスの中に入れた場合の特性をお話しました。 テキストの場合ボックスの幅、高さを指定すると、縦方向（Ｙ方向）のみ押し広げられました。 画像の場合は、ボックスより画像が大きければ、いくらボックスの大きさを指定しても 画像の持つ大きさに押し広げられましたよね！ では！押し広げられないように、ボックスの幅、高さを維持するにはどうすればいいのでしょうか？ ボックスをスクロールさせればいいのです。(￣m￣*)V 此処に文字を書きます。 改行して、テキストのスペースを たくさん取ってみますと、 指定した大きさ以上になりますと スクロールバーが現れます。 お判りでしょうか？ ちなみにこのボックスは、幅200px高さ150pxのボックスに指定しています。 ↑こちらのボックスは、テキストのみ入れて見ました。 こちらは ↓画像も入れて見ました。 画像の大きさは270×185 です。 此処に文字を書きます。 改行して、テキストのスペースを たくさん取ってみますと、 指定した大きさ以上になりますと スクロールバーが現れます。 お判りでしょうか？ ↓画像を入れますと画像の大きさに反応しまして、横（Ｘ方向）のスクロールバーも現れます。  ちなみにこのボックスは、幅200高さ150のボックスに指定しています。 お判りでしょうか？ 当たり前のことですが、ボックスをスクロールさせれば、ボックスの大きさを維持できます。 限られた、スペースにテキストボックスなどを置く場合に威力を発揮しますね！ ちなみに、↑上のスクロールボックスは、縦方向（Ｙ軸方向）のみ常に表示するようにタグを指定しています。 横方向（Ｘ軸方向）は、「AUTO」 にして、必要があればスクロールしなさいと命令をしています。 タグを書いて見ましょう。 <div style="border-style:double;border-color:black;border-width:;width:200px;height:150px;background-color:beige;background-image:url(http://背景画像のＵＲＬ);overflow-y:scroll;overflow-x:auto;scrollbar-base-color:white;scrollbar-arrow-color:black;scrollbar-face-color:white;scrollbar-track-color:;"> ここにテキストや画像を書きます。 </div> overflow-y:scroll;overflow-x:auto; で表示しているところがスクロールしなさいと命令しているタグです。 scrollbar-base-color:white;scrollbar-arrow-color:black;scrollbar-face-color:white;scrollbar-track-color:; はスクロールバーの色を指定しています。 width:200px;height:150px; はボックスの幅と高さですね！ 背景画像を出すタグも入れてありますが、ＵＲＬを指定しなければ background-color:beige; 背景カラーが有効になります。 皆さんも色々挑戦してみて下さいませ！ では！(￣m￣*)V ε＝ε＝ε＝（┌￣）┘ダッシュ！ 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。 お気に入りの記事を「いいね！」で応援しよう
|
|
||||
