コンテナ

ぴあにしもでいうコンテナとは<div></div>での絶対値配置によるレイアウト枠・ボックスのことです。
また、コンテナでの画像配置は背景：background-image、background-positionで行っています。
繰り返しはrepeat:******で、overflowはhidden設定です。

コンテナの配置やサイズ設定は自由度が高く、いろんな状況でのボックス配置に役立つはずです。コンテナ自身には背景画像をスクロールさせる位の機能しかありませんが、生成されたソースを利用してコンテナ内に他のソースを入れることで自由度が増すと思います。

「画像入れ替え」にあるRevealTransition効果で画像チェンジの機能をコンテナの背景画像入れ替え（トランジション）に適用させることができます。この機能を利用する際は、コンテナに背景画像を設定しておきます。その背景画像をRevealTransition効果で画像チェンジの設定で最初の画像にセットしてください。

１、使用したいコンテナに切り替え、「使用する」にチェックを入れます。
配置状態を確認するには枠を付けてみるか背景色を設定するとプレビューで確認できます。そうしないと透明なボックスなため配置しても見えません。

２、横方向の配置とサイズを設定-縦方向の配置とサイズを設定---これを組み合わせて表示方法を決定します。随時切り替えてくださいね。
  位置とサイズを指定する
     Centerを基準にした場合は、ボックスの真ん中がCenter基準にした配置になります、Leftの位置ではありません。
     横方向では--「基準からの位置」はRight基準以外は正の数で右方向に調整され、負の数で左方向に調整されます。Right基準では正の数で左方向に調整されます。
     縦方向では--「基準からの位置」はBottom基準以外は正の数で下方向に調整され、負の数で上方向に調整されます。Bottom基準では正の数で上方向に調整されます。
     「サイズ指定」での%で指定した場合は、表示領域のウィンドウサイズに対しての割合で表示されます。表示ウィンドウサイズを変えた場合も追従します。
左端・右端の位置で指定する上橋・下端の位置で指定する
    これはサイズを決めないでボックスの左右や上下の端の位置を表示ウィンドウのどこにするかを設定します。
     ウィンドウの上下左右からの距離が保たれるため、ウィンドウサイズによってボックスサイズも変化しウィンドウサイズを変えると追従します。
     ボックスの左端・右端（あるいは上端・下端）の位置を基準からの距離で設定します。
     Centerの場合もその端の位置が設定されます。

３、画像の配置方法
これはボックス内部での配置位置指定になります。ボックスの左上端を基準に指定した画像を指定値に沿って配置します。
タイル状に配置したり縦方向だけ繰り返し配置したり横方向にだけ繰り返し配置したり、繰り返しせず単体画像で配置できます。

４、枠をセットした場合、枠サイズ分ボックスの内部は小さくなります。

５、画像をスクロールさせる場合、配置方法（繰り返し配置の方向や単体表示など）によっては表示が見えなくなります。
     基本的にはスクロール方向に必ず繰り返されるように配置をして下さい。
     速度は一回のスクロール動作時間です。スクロール量は一回の動作で移動させるピクセル数になります。
     速度を小さくすると速く動きます。スクロール量を小さくするとなめらかに動きます。

6、表示効果や表示終了効果を選んで時間設定してください。通常の表示も可能です。
この機能により表示開始時間設定次第でClosed Doorにすることも可能です。コンテナをウィンドウサイズいっぱいに表示させる”上下左右のサイド位置でLeftRight Top Bottomからの距離を0pxにすれば可能です。
クローズド・ドアの閉まり方は表示効果のとらんっじションフィルタなどで変化を付けられます。
重ね順を工夫するといろいろと表示させた後にコンテナでシャットしてからメッセージボックスを表示させるなどが可能です。

７、メッセージも入れられますが、コンテナはoverflow:hiddenで、テキストレイアウトに関する設定はほとんどありません。text-align:centerとなっています。
タグを使用することも可能です。
これはちょっとしたメッセージ表示をさせたいがために設けました。

７、背景画像の配置指定はLEFT-TOPでの数値指定のほか、LEFT-BOTTOM RIGHT-TOP RIGHT-BOTTOMが可能ですが、背景画像スクロール時はLEFT-TOP(数値指定有効）にしてください。

LEFT-TOPやRIGHT-BOTTOMなど基準を変えた配置で相対位置を常に同じにする場合も、それら全ての基準を統一して左右上下にピクセル単位でずらします。
横幅と縦幅も%や両サイドの位置で指定するとウィンドウサイズによってボックスのサイズが変わってしまいますので、必ずピクセルでサイズを固定します。

上のような簡単な図を手書きでいいので書くとわかりやすくなりますね。

複数コンテナによるスライドショー作成(繰り返しは無理です)---かなり面倒

同じサイズの画像を使用することを前提にします。

使用する数分の画像を配置するために同じ数だけコンテナ使用を許可(使用にチェック)します。
各コンテナの配置を同じにします。サイズは画像サイズにしておきます。画像もそれぞれ指定しておきます。
全てに同じ方向（ここでは左にスクロール）・同じスクロール速度・同じスクロール量をセットします。
またそれぞれ画像貼り付け方法を単体で表示にしておきます。
背景色は付けない設定にしておいてください。
コンテナ0では横配置位置を0のままにします。---ずらしてもいいんだけどね。その場合は以降のコンテナにもその分を付加します。
コンテナ1では横配置位置を画像の横サイズにします。
コンテナ2では画像横サイズ×2にします。
以下同様に前のコンテナの数分を画像横サイズにかけます。
これでスライドショーになります。
※横サイズが違う場合も横配置位置を前のコンテナで使用している画像の横サイズ合計をよく配置位置にセットすれば可能です。
※繰り返しができないのは、画像タイル張りで間隔を開けることができないため。

コンテナでは、DIVのSTYLE設定で、縦サイズを"height:**px"で指定しているのですが、これをそのままInternetExplorerで表示させても指定通りにならない場合があります（親要素を含めfont-sizeやline-heightが設定されていない場合に、文字サイズに依存されます)。指定通りの高さで表示させるにはSTYLEにOVERFLOW:HIDDENを付け加えておく必要があります。これだけで1ピクセルまでは表示され、ウィンドウサイズを変えても大丈夫です。これはSPANタグでも可能です。
但し、0pxではフォントサイズに左右されて表示されてしまいます。これはInternetExplorerの仕様のようですが、”ぴあにしも”では0pxにすることが無意味と捉えてこの方法をとることにします。”ぴあにしも”のコンテナ設定で縦サイズは0ピクセルや0%にセットすることができないようにしてます。