TBA
	  <h2>Photos at the workshop</h2>
      <div class="pola">
         <img src="images/photo01.jpg" alt="" /><p>grop photo</p>
      </div><!-- /.pola-->
      <p>
<!--
		  
      blog記事やフォトギャラリーを想定して制作しました。写真をポラロイド風にします。写真の後ろの段落は回り込むようにしてあります。
      </p>
      <p>
      写真の横幅は固定してください。サンプルでは、横200pxの画像を使用しています。指定する幅は写真＋ボーダー2px＋余白20px（左右10pxずつ）の計222pxになります。
      </p>
      <p>
      枠の色はCSSで指定してあるので自由に色を変えることができます。影の部分は画像を使用しています。
      </p>
      <p>
      次の要素も回り込むので、回り込みをしたくない場合は、回り込みを解除してください。
      </p>
      <p>
      下のように写真を並べることも出来ます。そのような場合は、ulに｢class="pola"｣を指定してください。ここはinline-bloackを使って横並びにしているので、ブラウザの仕様のためどうしても半角分のスペースが空いてしまいます。それを回避したい場合は、ulに｢letter-spacing:-0.4em｣を指定して隙間を埋めることができます。サンプルでは左側に余白を設けたいので、marginで10pxの隙間を空けています。ああ、でもブラウザチェックしててOperaで修正されていないことに気づきました。とりあえずOperaは保留です。HTMLソースコードを変更すると何とかなりますけども･･･。-->
	
      </p>
      <ul class="pola">
	  <!--
         <li><img src="images/photo02.jpg" alt="" /><p>桜も満開の季節です。空が今日もきれいです。自動に縦方向の高さを補正してくれます。</p></li>
         <li><img src="images/photo03.jpg" alt="" /><p>小さなお花が咲きました。</p></li>
         <li><img src="images/photo04.jpg" alt="" /><p>空が今日もきれいです。長文ももちろんかけますよ。</p></li>
         <li><img src="images/photo02.jpg" alt="" /><p>桜も満開の季節です。</p></li>
         <li><img src="images/photo03.jpg" alt="" /><p>小さなお花が咲きました。</p></li>
         <li><img src="images/photo04.jpg" alt="" /><p>空が今日もきれいです。長文ももちろんかけますよ。</p></li>
         <li><img src="images/photo04.jpg" alt="" /><p>空が今日もきれいです。長文ももちろんかけますよ。</p></li>
-->
	  </ul><!-- /.pola-->
      <p>
<!--      下にテキストを書いても、きちんと回り込みが解除されて表示されます。-->
      </p>
	  
   </div><!-- /#contents-->