ボックス
marginTop

【説　明】

 上マージンを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

上マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上マージンを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、上マージンを「3em」に設定しています。

tags.BODY.marginTop = "3em";

marginRight

【説　明】

 右マージンを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

右マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右マージンを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、右マージンを「3em」に設定しています。

tags.BODY.marginRight = "3em";

marginBottom

【説　明】

 下マージンを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

下マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下マージンを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、下マージンを「3em」に設定しています。

tags.BODY.marginBottom = "3em";

marginLeft

【説　明】

 左マージンを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

左マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左マージンを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、左マージンを「3em」に設定しています。

tags.BODY.marginLeft = "3em";

margins()

【説　明】

 margins() メソッドを使用すると、上・右・下・左のマージンを一度に設定できます。

※ ボックスは、下図のような構造になっています。

【　値　】

 上・右・下・左の各マージンの値を「,」で区切って指定します。

●auto

各マージンを自動的に設定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各マージンを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、上・右・下・左のマージンをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

tags.BODY.margins("1em", "2em", "3em", "4em");

paddingTop

【説　明】

 上パディングを設定します。

※ パディングとは、コンテント（Content）と枠（Border）の間隔です。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上パディングを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、上パディングを「1em」に設定しています。

tags.BLOCKQUOTE.paddingTop = "1em";

paddingRight

【説　明】

 右パディングを設定します。

※ パディングとは、コンテント（Content）と枠（Border）の間隔です。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右パディングを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、右パディングを「1em」に設定しています。

tags.BLOCKQUOTE.paddingRight = "1em";

paddingBottom

【説　明】

 下パディングを設定します。

※ パディングとは、コンテント（Content）と枠（Border）の間隔です。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下パディングを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、下パディングを「1em」に設定しています。

tags.BLOCKQUOTE.paddingBottom = "1em";

paddingLeft

【説　明】

 左パディングを設定します。

※ パディングとは、コンテント（Content）と枠（Border）の間隔です。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左パディングを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、左パディングを「1em」に設定しています。

tags.BLOCKQUOTE.paddingLeft = "1em";

paddings()

【説　明】

 paddings()メソッドを使用すると、上・右・下・左のパディングを一度に設定できます。

※ パディングとは、コンテント（Content）と枠（Border）の間隔です。

※ ボックスは、下図のような構造になっています。

【　値　】

 上・右・下・左の各パディングの値を「,」で区切って指定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各パディングを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、上・右・下・左のパディングをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

tags.BLOCKQUOTE.paddings("1em", "2em", "3em", "4em");

borderTopWidth

【説　明】

 上枠（Border）の太さを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で上枠の太さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、上枠の太さを「1em」に設定しています。

tags.P.borderTopWidth = "1em";

borderRightWidth

【説　明】

 右枠（Border）の太さを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で右枠の太さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、右枠の太さを「1em」に設定しています。

tags.P.borderRightWidth = "1em";

borderBottomWidth

【説　明】

 下枠（Border）の太さを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で下枠の太さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、下枠の太さを「1em」に設定しています。

tags.P.borderBottomWidth = "1em";

borderLeftWidth

【説　明】

 左枠（Border）の太さを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で左枠の太さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、左枠の太さを「1em」に設定しています。

tags.P.borderLeftWidth = "1em";

borderWidths()

【説　明】

 borderWidths()メソッドを使用すると、上・右・下・左の枠（Border）の太さを一度に設定できます。

※ ボックスは、下図のような構造になっています。

【　値　】

 上・右・下・左の各枠（Border）の太さの値を「,」で区切って指定します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で各枠の太さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、上・右・下・左の枠の太さをそれぞれ「1em」「2em」「3em」「4em」に設定しています。

tags.P.borderWidths("1em", "2em", "3em", "4em");

borderColor

【説　明】

 「border-color」プロパティを使用すると、枠（Border）の色を設定することができます。

※ ボックスは、下図のような構造になっています。

【　値　】

 ・none
枠をデフォルトの色に設定します。

●色の名前で指定

　JavaScriptで指定可能な140種類の色名を指定することができます。色と名前の対応については「Super Color Chart」を参照してください。

●16進数のＲＧＢ値で指定

・#rrggbb

この指定方法は、HTMLでの指定方法と同様です。"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ２桁の16進数で表わした計６桁の色の値で指定します。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

・#rgb

この指定方法は、上記の方法と同様ですが、RGBのR(red)とG(green)とB(blue)の値をそれぞれ１桁の16進数で表わした計３桁で指定します。
この場合、rgbの実際の値は、それぞれの桁の前に０が付加されるのではなく、指定した数値が２つ並べて指定された値になります。つまり、「#f36」と指定すると「#0f0306」ではなく、「#ff3366」の値になります。

●10進数のＲＧＢ値で指定

・rgb(n, n, n)

この指定方法では、rgbの後に続く（）の中に、RGBのR(red)とG(green)とB(blue)の値をそれぞれ10進数で指定します。それぞれの値は0から255の範囲で指定することができます。

・rgb(n%, n%, n%)

この指定方法では、rgbの後に続く（）の中に、RGBのR(red)とG(green)とB(blue)の値をそれぞれパーセントで指定します。それぞれの値は0から100の範囲で指定することができます。

【使用例】

 以下の例では、それぞれ「P」タグの範囲の枠（Border）に赤を指定する別々の方法を示しています。

tags.P.borderColor="red";
tags.P.borderColor="#ff0000";
tags.P.borderColor="#f00";
tags.P.borderColor="rgb(255, 0, 0)";
tags.P.borderColor="rgb(100%, 0%, 0%)";

borderStyle

【説　明】

 枠（Border）のスタイルを設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ・none
枠（Border）を表示しません。「borderStyle」を指定しなかった場合には、この状態になります。

・solid
枠（Border）を単一の色で塗りつぶして表示します。

・3D
枠（Border）を立体的に表示します。

Example

【使用例】

 以下の例では、枠（Border）を立体的に表示します。

tags.BLOCKQUOTE.borderStyle = "3D";

width

【説　明】

 ボックス内の実際に文字や画像が表示されるエリア（Content）の幅（Width）を設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

幅を自動的に設定します。Content が画像などの場合で「height」も「auto」に設定されている場合は、実際のサイズに設定されます。「height」に実際のサイズと異なるサイズが指定されている場合には、自動的にその比率に合わせて拡大縮小します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で幅を直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

●パーセントで指定

ボックスを含む範囲の幅に対するパーセントで指定します。

【使用例】

 以下の例では、幅を80ピクセルに設定しています。

ids.imageSmall.width = "80px";

height

【説　明】

 ボックス内の実際に文字や画像が表示されるエリア（Content）の高さ（Height）を設定します。

※ ボックスは、下図のような構造になっています。

【　値　】

 ●auto

高さを自動的に設定します。Content が画像などの場合で「width」も「auto」に設定されている場合は、実際のサイズに設定されます。「width」に実際のサイズと異なるサイズが指定されている場合には、自動的にその比率に合わせて拡大縮小します。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で高さを直接指定します。指定できる数値と単位については、「JSS解説編　数値の単位」を参照してください。

【使用例】

 以下の例では、高さを20ピクセルに設定しています。

ids.imageSmall.height = "20px";

align

【説　明】

 <IMG>タグの「ALIGN=」属性の指定と同様に、ボックスをテキストの左右に配置するための指定です。このプロパティは画像以外にも使用することができます。

※ このプロパティはCSS1の「float」と同様の働きをします。JavaScriptでは、 float はすでに予約語となっていますので別の名称となっています。

【　値　】

 ・none

特に回り込みをしない設定です。

・left

ボックスをテキストの左に配置します。

・right

ボックスをテキストの右に配置します。

【使用例】

 以下の例では、画像を文字の左側に表示させます。

tags.IMG.align = "left";

clear

【説　明】

 上記の「align」の指定を解除するための指定です。<BR>タグの「CLEAR=」属性の指定と同様の働きをします。

【　値　】

 ・none

両側の回り込みを許可します。

・left

左側にあるボックスの右側にテキストを表示する指定を解除します。

・right

右側にあるボックスの左側にテキストを表示する指定を解除します。

・both

両側にあるボックスの間にテキストを表示する指定を解除します。

【使用例】

 以下の例では、左側にあるボックスの右側にテキストを表示する指定を解除します。

tags.IMG.clear = "left";