５

 　サイズ

basic.gif (3042 バイト)

１

 　ボックスのサイズを変更する

以前、スタイルシートでボックスというものをやったよね。
ボックスというのは、表示したい文字や画像の範囲を決めるもので、いろいろと枠線の形を変えたりも出来た。
ボックスの指定方法はstyle={width:■;heigh:▲}のような指定方法だったね。
詳しくはスタイルシート講座のボックスについて見て欲しい。
jamp.gif (1016 バイト)スタイルシート講座（ボックス）
そこで、今回はその作ったボックスの大きさ（サイズ）を動的に変えていく命令をやってみよう。

★.style.▲ = ■;・・・・・★のサイズを▲に■の大きさにする。
▲：width , height
■：▲のサイズ

サイズの指定はwidth（横幅）とheigjt（縦幅）の２つによってボックスの大きさを指定していくんだよ。
つまり、
    ★.style.width = 100
だと、width（横幅）が100の大きさに指定されるんだ。
また、
    ★.style.height = 100
の場合はheigjt（縦幅）が100の大きさに指定されるんだね。
（※ちなみに、文字をたくさん書いた場合、heightの範囲内におさまらないときがあるよね。そんなときは自動的にheightの大きさが変更されて全てが表示されるようになるんだ。もし、思ったとおりの大きさのままにしておきたい場合はoveflow:scrollというのを使ってみよう。これもスタイルシートのボックスのところで説明しているよ。）

じゃあ、これを使ってプログラムを書いてみよう。

下の表の左
<A id="box" style={border-style:solid;width:100;height:100;;}>DHTMLは・・・・ヨッシ〜</A>
↑始めの初期設定は100×100。idはbox。

下の表の右
<A onclick="box.style.width=100;box.style.height=100;">100×100</A><br>
<A onclick="box.style.width=100;box.style.height=100;">50×200</A><br>
<A onclick="box.style.width=100;box.style.height=100;">200×50</A><br>
↑それぞれで、サイズの変更をしている。

これを実行すると、

DHTMLはHTMLやスタイルシートでは出来なかった動いたページを作ることが出来ます。 by ヨッシー
↑いろんな大きさに変わるよ		 100×100
50×200
200×50

↑好きなのをクリックしてごらん

このように好きなようにいつでもサイズを変えることができるんだ。
あと、スクロールバーの設定や枠線の種類などについては、スタイルシートのボックスについてにもう一度戻ってみよう。

back.gif (1116 バイト)　サイズ
next.gif (705 バイト)　画像のサイズを変更するPart1