!!!スタイルシートで多彩な表現を検討する。

* 右隣にコメントを記述する表現は、２種類の表現方法がありそう。
* ２段組を基本として作成し、片方の段の中に更に段組を作成する。
** 縦方向にも伸縮する事を考えると、段組の中に段組が実用的かも。


!!回り込み表現（１）
 ┌─┐文字を
 └─┘並べる
 方法がこのよ
 うになる場合

!HTML
 <div style="width:**px;">
   <img style="width:**px;float:left;">
   〜右隣のコメント〜
   <div style="clear:both"></div>
 </div>

!FSWiki記法
 {{div_begin style="width:100%"}}
 {{img 画像.jpg,style="width:**px;float:left;"}}
 〜右隣のコメント〜
 {{div_begin style="clear:both;"}}
 {{div_end}}
 {{div_end}}

!!回り込み表現（２）
 ┌─┐文字を
 └─┘並べる
 　　　方法が
 　　　このよ
 　　　うにな
 　　　る場合


!HTML
<div style="width:**px;">
  <img style="width:**px;float:left;">
  <div style="width:**px;float:right;">〜右隣のコメント〜</div>
  <div style="clear:both"></div>
</div>

!FSWiki記法
 {{div_begin style="width:100%"}}
 {{img 画像.jpg,style="float:left;"}}
 {{div_begin style="width:**px;float:right;"}}
 〜右隣のコメント〜
 {{div_end}}
 {{div_begin style="clear:both;"}}
 {{div_end}}
 {{div_end}}

!!段組の基本

 ┌ラップするDIV ─────────┐ ラップするDIVは、スタイルシートで回り込む２つのDIV を包み込む
 │┌──────┐┌──────┐│ためのもの。用途としては、段組全体の装飾として背景指定できる。
 ││float:left  ││float:right ││
 ││            ││            ││中に有る段を生成するDIVは回り込みのためにfloat:〜〜;と指定する。
 ││            ││            ││
 ││            ││            ││※注意すべき点として、ラップするDIV、および段を生成する２つのDIVは
 ││            ││            ││それぞれ、width指定しなければ、可能な限り広がって表示しようとする。
 ││            ││            ││また、ラップするDIVの横幅＞「左段の横幅＋右段の横幅」とする必要がある。
 │└──────┘└──────┘│これは、境界線幅も横幅に影響するため。
 │┌─ダミーのDIV ───────┐│
 │└──────────────┘│ダミー用DIVはラップする中身のDIVについて全ての回り込みを解除する為の物
 └────────────────┘

!HTML
 <div style="width:100%;">
   <div style="width:48%;float:left">左の段の内容</div>
   <div style="width:48%;float:right">右の段の内容</div>
   <div style="clear:both"></div>
 </div>

!FSWiki記法
 {{div_begin style="width:100%"}}
 {{div_begin style="width:48%;float:left;"}}
 〜左のコメント〜
 {{div_end}}
 {{div_begin style="width:48%;float:right;"}}
 〜右のコメント〜
 {{div_end}}
 {{div_begin style="clear:both;"}}
 {{div_end}}
 {{div_end}}