初心者向き手順書  --7--

 [メインメニュー]

 [手順書メニュー]

メッセージボックスでメッセージを入れてみよう = 2 =

・【メッセージボックス】タブでボックスの配置について設定を見ていきましょう。

ボックスの体裁に関わる設定部です。

ぴあにしもでメッセージボックスと呼んでいるものは、<DIV>〜</DIV>で囲まれたボックスのテキストがその中の主なコンテンツになっているものです。

ボックスのサイズとどこに配置するかの設定をしましょう。下の図の部分です。

サイズについてはととを切り替えて使用します。

・・・直ぐ下にあるでサイズを指定する方法です。左のような数値で、200ピクセル×200ピクセルのサイズになります。数値を変えることでサイズが変わります。

・・・数値に関係なく、表示領域のサイズになります。

重ねる順・・・モニターは平面表示しかできませんが、CSSにおいては奥行きという概念があります。
Z-INDEXにより数値指定することでボックスの奥行きというか奥行きの位置というかを指定するもので、数値が大きいほどそのボックスは前面に出ます。
モニターが立体的だと仮定して、Z-INDEX値が大きいほど見る側に近く表示されます。表示部分の横方向がX軸、縦方向がY軸、そして奥行きがZ軸という考え方をしてくださいね。ボックスひとつひとつが長方形の紙で、その紙をモニターに映していると考えると、紙の重なり方を数値で指定できるわけですね。下にある紙は上にくる紙が透明でなければ重なった部分は隠れてしまいます。
尚同じ数値の場合は、HTMLドキュメント内で記述した順番が下にあるものほど前面に出ます。

そうそう、ボックスというのは紙そのものと考えてみるとわかりやすいですよ。
モニターの表示領域が机の上。机の上にいろんな絵や更に色紙などが貼られた紙を配置していると見ることが出来ませんか？
それらのサイズや机のどの位置に置くか、紙の性質（透明だとか半透明だとか色が付いているとか）・上に貼られた切手や書かれているメッセージ・・・。それらは全てHTMLやCSS・JavaScriptなどで変更したりができる、理解しやすくありませんか？

ここで注意したいのは、AというボックスがBというボックスの後ろにあるとした時に、Bが邪魔をしてAというボックスを画面上から操作できなくなることがあります。Aがメッセージボックスでその上にBがかぶさっているとAのスクロールバーをマウスで動かすことが出来ないことがあります。
また、Aをクリックすることでイベントを起こす場合にBが邪魔してAのイベントが起きないこともあります。

配置・・・今度は背景画像ではなくボックスそのものの配置をどこにするかになります。先ほどの紙という概念でいくと、机のどの場所に紙を置くかということですね。勿論机からはみ出てもいいわけですが、モニターの表示領域は机の上そのものなので当然見えなくなります。

・・・机の上に配置する時にどの場所から何センチ離して髪を置くということが可能ですよね。
例えば左端から10センチで上から20センチの所に置くと誰でも同じ位置に置くことができます。この時紙のどの部分を基準にするかというと机の基準によって変わります。通常は机の左と上が基準なので、紙も左上が位置決めの基準になるのですが、机の右とか下とかが基準の時は紙の基準位置もそれに合わせたものに変わります。

の設定においては、机のどの位置を基準にしますか？ということです。ここで選んだ基準に従ってで指定した数値分ずらした位置に、ボックスが配置されます。

横方向において
LEFTとCENTER基準・・・ボックスの左が基準になります。この時は数値分右方向にずれます。マイナスの値で左方向にずれます。
RIGHT基準・・・ボックスの右が基準になります。またこの時は数値分左方向にずれます。マイナスの値で右方向にずれます。

縦方向において
TOPとCENTER基準・・・ボックスの基準は上になります。この時は数値分下方向にずれます。マイナスの値で上方向にずれます。
BOTTOM基準・・・ボックスの下が基準になります。またこの時は数値分上方向にずれます。マイナスの値で下方向にずれます。

※ボックスの配置基準でCENTERというものは本来ありません。ぴあにしもでダイナミックプロパティという技術を使って計算によりCENTER表示させていますが、LEFTあるいはTOPを基準い算出しています。
突っ込み===>「いや、<CENTER>〜</CENTER>ってあるじゃん！」て方、あれはHTMLタグでCSSではありません。ボックスというのはCSSにおける呼称です。

ボックス自身の構成を設定しましょう。ボックスの構成は下画像のようになっています。

marginは他のボックスとの間隔になりますが、ぴあにしもでは設定がありません。
borderは枠線です。背景画像はborderにも描画されます（点線や破線の枠をつけるとわかります）。
paddingは内側の余白で、ボックスの内容物が枠線の内側から見て余白分内側から表示されます。
contentはボックス内の内容物で、テキストであったり画像であったり、あるいは子ボックスであったりします。

上の設定はもうお分かりですね？枠線はbodyでは出来なかった点線(dotted)や破線(dashed)、二重線(doubled)もOKです。
余白はPADDINGですね。特にメッセージがボックスの枠線にくっついていると見難くなりますので、余白を設定してくださいね。

罫線設定・・・これはボックスの設定というより、メッセージに下線をつけるものです。色や種類も変更できますよ。
但し、一部メッセージボックスの表示機能によっては下線は表示されない場合があります。

スクロールバーの表示・・・bodyで、はみ出るコンテンツがある場合にスクロールバーでスクロールさせてみることが出来ることを説明しましたが、メッセージボックスにおいてもメッセージがボックスの中に全て表示しきれない場合、スクロールバーでスクロールさせることが出来ます。
ボックスにはメッセージボックスに限らずスクロールバー表示非表示を設定できますが、ぴあにしもではbodyとメッセージボックスのみに設定があります。スクロールバーの色に関しては【基本設定】にある色がセットされます。

次はメッセージボックスの表示効果を説明する予定ですが、現在時間がとれず説明ページ作成が滞っています。ヘルプに機能の簡単な説明がありますので参考にしてください。

 [手順書メニュー]

 [メインメニュー]

Copyright(c) 2004 My Software. All rights reserved.