iNotes Lite Framework - Basic Layout

今日のトピックは iNotes Liteでのレイアウトテクニックです。
　CSSの具体例に目を奪われがちですが、Table を入れ子にした場合にブラウザパフォーマンスが落ちる事を避けるために積極的に今回のようなDIV 要素を利用した配置を採用する事によって、iNotes Liteではブラウザのレンダリングスピードを向上させています。

バックナンバー
1. iNotes Lite Framework　- Frameset
2. iNotes Lite Framework - iNotes Lite Widgets
3. iNotes Lite Framework - Lazy loading code
4. iNotes Lite Framework - Basic Layout
5. iNotes Lite Framework - Common Property

（このエントリは以下の記事を参考に書かれています）
iNotes Lite framework (Notes/Domino Wiki)


iNotes Lite のコードでは、タグを入れ子にして使う事を避けています。入れ子にされたtableタグはブラウザのパフォーマンスに大きく影響する事がわかったからです。
いくつかのAJAXフレームワークは入れ子にした入れ子にされたtableタグの代わりになるようなJavaScriptベースのレイアウトをしますが、iNotes Lite ではコードサイズの増加を避けるためにその利用も避けています。

注：　DOM Inspector ツール（IE Developer Toolbar, Firebug etc）もレイアウトテクニックを理解する助けになると思います。
.

iNotes Lite では、 広範囲にわたって CSS をレイアウト目的で使用しています。　いくつかのキーになるCSSクラスをここで示します。

Class	Description
s-basicpanel	全体の要素の余白全体を占める要素となります。この次の要素はこの要素の配下になります。 全体の要素の余白を指定した要素で埋めたいときや、複数の要素を一つの領域に重ねたくないときなどに便利です。
s-stack	含まれる要素の全体を占める要素となります。次の要素はこの要素と同じ位置に来ます。 複数の要素を一つの領域に積み重ねたいときに便利です。
s-toppanel	この要素は、含まれる要素の全幅を占めた状態で上部に配置されます。 全体の要素内の上部に配置したい要素があるときに便利です。
s-rightpanel	この要素は、全体の要素の全高さを占めた状態で、右側に配置されます。 全体の要素内の右側に配置したい要素があるときに便利です。
s-bottompanel	この要素は、含まれる要素の全幅を占めた状態で下部に配置されます。 全体の要素内の下部に配置したい要素があるときに便利です。
s-leftpanel	この要素は、全体の要素の全高さを占めた状態で、左側に配置されます。 全体の要素内の左側に配置したい要素があるときに便利です。

上のクラスを利用した例を以下に示します。 青いエリアは、5em分（注：1em=1文字分）だけ上部を占めており、赤いエリアが残りを使うようにしています。s-basicpanelが先に定義されていますが、s-toppanelが計算された後に余白を占めているのが分かるのではないかと思います。

<div class="s-stack" style="padding-top:5em;">
     <div class="s-basicpanel" style="border:solid red 1px;background-color:#FF8080">
     </div> 
</div> 

<div class="s-toppanel"  style="height:5em;border:solid blue 1px;background-color:#8080FF">
 </div>

次の例は、青いエリアが上部5em分を占め、赤紫色部分が左、緑部分が残りを占める場合の例です。上の例と同様に、下部のs-basicpanelが黄色枠（少し見にくいですが）で示されており、その中に二分割された右側に緑枠のs-basicpanelが位置しているのが分かります。

<div class="s-stack" style="padding-top:5em;">
     <div class="s-basicpanel" style="border:solid yellow 1px;">
         <div class="s-stack" style="padding-left:5em;">
             <div class="s-basicpanel”              style="border:solid green 1px;background-color:#80FF80">
             </div> 
        </div> 
        <div class="s-leftpanel"          style="width:5em;border:solid magenta 1px;background-color:#FF80FF">
        </div>
     </div>
 </div>
 <div class="s-toppanel"  style="height:5em;border:solid blue 1px;background-color:#8080FF">
 </div>

先に指定した要素が上に来ないことに気が付くと思いますが、これはs-stack CSSクラスが position:absolute スタイルを使用しているためですが、iNotes のレイアウトでもよく利用されます。