0.5.x/test/comic-html-structure.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>マンガ状コンテンツを表示するための html + css の調査 | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <style type="text/css">\r
  18 /*  PettanR Comic\r
  19 --------------------------------------------------------------------------------------*/\r
  20 .test1-pettanr-comic-wrapper {\r
  21         margin:                                 1em auto;\r
  22 }\r
  23         .test1-pettanr-comic-panel {\r
  24                 border-style:                   solid;\r
  25                 border-color:                   #111;\r
  26                 position:                               relative;\r
  27                 margin:                                 1em 0;\r
  28                 overflow:                               hidden;\r
  29         }\r
  30                 .test1-pettanr-comic-panel img,\r
  31                 .test1-pettanr-comic-balloon {\r
  32                         position:                               absolute;\r
  33                 }\r
  34                 .test1-pettanr-comic-balloon img {\r
  35                         width:                                  100%;\r
  36                         height:                                 100%;\r
  37                 }       \r
  38                 .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
  39                         position:                               absolute;\r
  40                         table-layout:                   fixed;\r
  41                         top:                                    0;\r
  42                         left:                                   16.6%;\r
  43                         width:                                  66.6%;\r
  44                         height:                                 100%;\r
  45                         border:                                 0;\r
  46                         padding:                                0;\r
  47                         margin:                                 0 !important;\r
  48                 }\r
  49                         .test1-pettanr-comic-speach tbody,\r
  50                         .test1-pettanr-comic-speach tr,\r
  51                         .test1-pettanr-comic-speach td {\r
  52                                 width:                          100%;\r
  53                                 height:                         100%;\r
  54                                 border:                         0;\r
  55                                 padding:                        0;\r
  56                                 margin:                         0 !important;\r
  57                                 vertical-align:         middle;\r
  58                                 text-align:                     center;\r
  59                                 font-size:                      14px; /* opera6で仕様 13px は不可 */\r
  60                         }\r
  61                         \r
  62                         \r
  63 /*  PettanR Comic\r
  64 --------------------------------------------------------------------------------------*/\r
  65 .test2-pettanr-comic-wrapper {\r
  66         margin:                                 1em auto;\r
  67 }\r
  68         .test2-pettanr-comic-panel {\r
  69                 border-style:                   solid;\r
  70                 border-color:                   #111;\r
  71                 position:                               relative;\r
  72                 margin:                                 1em 0;\r
  73                 overflow:                               hidden;\r
  74         }\r
  75                 .test2-pettanr-comic-panel img {\r
  76                         position:                               absolute;\r
  77                 }\r
  78                 .test2-pettanr-comic-balloon {\r
  79                         position:                               absolute;\r
  80                 }\r
  81                         .test2-pettanr-comic-balloon img {\r
  82                                 position:                               absolute;\r
  83                                 width:                                  100%;\r
  84                                 height:                                 100%;\r
  85                         }\r
  86                         .test2-pettanr-comic-balloon div {\r
  87                                 position:                               relative;\r
  88                                 display:                                table-row;\r
  89                                 padding:                                0 16.6%;\r
  90                                 width:                                  66.6%;\r
  91                                 height:                                 100%;\r
  92                         }       \r
  93                                 .test2-pettanr-comic-balloon div p {\r
  94                                         display:                                table-cell;\r
  95                                         vertical-align:                 middle;\r
  96                                         text-align:                             center;\r
  97                                         margin:                                 0 !important;\r
  98                                         padding:                                0 !important;\r
  99                                         *position:                              absolute;\r
 100                                         *top:                                   50%;\r
 101                                 }\r
 102                                         .test2-pettanr-comic-balloon div p span {\r
 103                                                 *display:                               block;\r
 104                                                 zoom:                                   1;\r
 105                                                 *position:                              relative;\r
 106                                                 *top:                                   -50%;\r
 107                                                 font-size:                              14px;\r
 108                                         }               \r
 109 /*  PettanR Comic\r
 110 --------------------------------------------------------------------------------------*/\r
 111 .test3-pettanr-comic-wrapper {\r
 112         margin:                                 1em auto;\r
 113 }\r
 114         .test3-pettanr-comic-panel {\r
 115                 border-style:                   solid;\r
 116                 border-color:                   #111;\r
 117                 position:                               relative;\r
 118                 margin:                                 1em 0;\r
 119                 overflow:                               hidden;\r
 120         }\r
 121                 .test3-pettanr-comic-panel img {\r
 122                         position:                               absolute;\r
 123 \r
 124                 }\r
 125                 .test3-pettanr-comic-balloon {\r
 126                         position:                               absolute;\r
 127                 }\r
 128                         .test3-pettanr-comic-balloon img {\r
 129                                 position:                               absolute;\r
 130                                 width:                                  100%;\r
 131                                 height:                                 100%;                           \r
 132                         }\r
 133                         .test3-pettanr-comic-balloon p {\r
 134                                 margin:                                 0 !important;\r
 135                                 padding:                                0 !important;                           \r
 136                                 display:                                table;\r
 137                                 position:                               absolute;\r
 138                                 top:                                    0;\r
 139                                 left:                                   16.6%;\r
 140                                 width:                                  66.6%;\r
 141                                 height:                                 100%;\r
 142                                 *height:                                auto;\r
 143                                 *top:                                   50% !important;\r
 144                                 border:                                 1px solid red;                          \r
 145                         }       \r
 146                                 .test3-pettanr-comic-balloon p span {\r
 147                                         display:                                table-cell;\r
 148                                         vertical-align:                 middle;\r
 149                                         text-align:                             center;\r
 150                                         *display:                               block;\r
 151                                         zoom:                                   1;\r
 152                                         *position:                              relative;\r
 153                                         *top:                                   -50%;\r
 154                                         font-size:                              14px; /* opera6で仕様 13px は不可 */\r
 155                                         border:                                 1px solid blue;         \r
 156                                 }       \r
 157         </style>\r
 158         <!-- InstanceEndEditable -->\r
 159 </head>\r
 160 \r
 161 <body>\r
 162     <div id="general-content">\r
 163         <div id="outer-wrapper">\r
 164             \r
 165             <div id="header">\r
 166                 <div class="base-content-width" style="position:relative;">\r
 167                     <h1><a href="../index.html">pettanR</a></h1>\r
 168                 <!-- global navi -->\r
 169                     <div id="global-navi">\r
 170                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 171                     </div>\r
 172                 </div>\r
 173             </div>\r
 174             \r
 175             <div id="inner-wrapper" class="base-content-width">\r
 176                                 <!-- InstanceBeginEditable name="main_content" -->\r
 177                                 <div id="main">\r
 178                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; マンガ状コンテンツを表示するための html + css の調査</div>\r
 179                                         <h2>マンガ状コンテンツを表示するための html + css の調査</h2>\r
 180                                         <p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．</p>\r
 181                                         <p>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか？このページを表示させつつ判断します．</p>\r
 182                                         <p>このページでは js を使用していないため ベクター画像の置き換えは行われず、反転画像はサーバのものが読み込まれます．</p>\r
 183                                         \r
 184                                         <h2>&lt;table&gt;  を使ったテキストの上下中央配置</h2>\r
 185                                         <p>&lt;table&gt; タグを使ったレイアウトは多くのブラウザで意図した表示が期待できるが、html 文書としてはよろしくない．</p>\r
 186                                         <div class="test1-pettanr-comic-wrapper" style="width: 400px;">\r
 187                                                 <div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 188                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 189                                                         <div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 190                                                                 <img src="../system_pictures/_w5.gif">\r
 191                                                                 <table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</td></tr></table>\r
 192                                                         </div>\r
 193                                                         <div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 194                                                                 <img src="../system_pictures/_w19.gif">\r
 195                                                                 <table class="test1-pettanr-comic-speach"><tr><td>さて？</td></tr></table>\r
 196                                                         </div>\r
 197                                                 </div>\r
 198                                         </div>\r
 199                                         <h3>対応ブラウザ</h3>\r
 200                                         <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7</p>\r
 201                                         <h3>準対応ブラウザ</h3>\r
 202                                         <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す ), Konqueror4.8(windows, さて？がずれる)</p>\r
 203                                         <h3>非対応ブラウザ</h3>\r
 204                                         <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
 205                                         <h3>source</h3>\r
 206                                         <h4>html 部分</h4>\r
 207                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 208                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;table&gt; からなる．</p>\r
 209                                         <pre><code>\r
 210 &lt;div class=&quot;test1-pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 211         &lt;div class=&quot;test1-pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 212                 &lt;img src=&quot;../resource_pictures/1.png&quot; width=&quot;166&quot; height=&quot;252&quot; style=&quot;left: 178px; top: -2px; z-index: 0;&quot;&gt;\r
 213                 &lt;div class=&quot;test1-pettanr-comic-balloon&quot; style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;&gt;\r
 214                         &lt;img src=&quot;../system_pictures/_w5.gif&quot;&gt;\r
 215                         &lt;table class=&quot;test1-pettanr-comic-speach&quot;&gt;&lt;tr&gt;&lt;td&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;\r
 216                 &lt;/div&gt;\r
 217                 &lt;div class=&quot;test1-pettanr-comic-balloon&quot; style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;&gt;\r
 218                         &lt;img src=&quot;../system_pictures/_w19.gif&quot;&gt;\r
 219                         &lt;table class=&quot;test1-pettanr-comic-speach&quot;&gt;&lt;tr&gt;&lt;td&gt;さて？&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;\r
 220                 &lt;/div&gt;\r
 221         &lt;/div&gt;\r
 222 &lt;/div&gt;\r
 223                                         </code></pre>\r
 224                                         <h4>css 部分</h4>\r
 225                                         <pre><code>\r
 226 .test1-pettanr-comic-wrapper {\r
 227         margin:                                 1em auto;\r
 228 }\r
 229         .test1-pettanr-comic-panel {\r
 230                 border-style:                   solid;\r
 231                 border-color:                   #111;\r
 232                 position:                               relative;\r
 233                 margin:                                 1em 0;\r
 234                 overflow:                               hidden;\r
 235         }\r
 236                 .test1-pettanr-comic-panel img,\r
 237                 .test1-pettanr-comic-balloon {\r
 238                         position:                               absolute;\r
 239                 }               \r
 240                 .test1-pettanr-comic-balloon .test1-pettanr-comic-speach {\r
 241                         position:                               absolute;\r
 242                         table-layout:                   fixed;\r
 243                         top:                                    16.6%;\r
 244                         left:                                   16.6%;\r
 245                         width:                                  66.6%;\r
 246                         height:                                 66.6%;\r
 247                         border:                                 0;\r
 248                         padding:                                0;\r
 249                         margin:                                 0 !important;\r
 250                 }\r
 251                         .test1-pettanr-comic-speach tbody,\r
 252                         .test1-pettanr-comic-speach tr,\r
 253                         .test1-pettanr-comic-speach td {\r
 254                                 width:                          100%;\r
 255                                 height:                         100%;\r
 256                                 border:                         0;\r
 257                                 padding:                        0;\r
 258                                 margin:                         0 !important;\r
 259                                 vertical-align:         middle;\r
 260                         }\r
 261                                         </code></pre>\r
 262 \r
 263 \r
 264                                         <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン</h2>\r
 265                                         <p>html タグ構造は 先の &lt;table&gt; レイアウトに比べて自然．しかし <code>display:table-cell</code> などを使うため、より広範なブラウザに対応する、という点で不安が残る．</p>\r
 266                                         <p>参考にしたページ <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a></p>\r
 267                                         <div class="test3-pettanr-comic-wrapper" style="width: 400px;">\r
 268                                                 <div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 269                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 270                                                         <div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 271                                                                 <img src="../system_pictures/_w5.gif">\r
 272                                                                 <p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
 273                                                         </div>\r
 274                                                         <div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 275                                                                 <img src="../system_pictures/_w19.gif">\r
 276                                                                 <p><span>さて？</span></p>\r
 277                                                         </div>\r
 278                                                 </div>\r
 279                                         </div>                                  \r
 280                                         <h3>対応ブラウザ</h3>\r
 281                                         <p>NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
 282                                         <h3>準対応ブラウザ</h3>\r
 283                                         <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す )</p>\r
 284                                         <h3>非対応ブラウザ</h3>\r
 285                                         <p>NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )</p>\r
 286                                         <h3>source</h3>\r
 287                                         <h4>html 部分</h4>\r
 288                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 289                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;p&gt; と &lt;span&gt; からなる．</p>\r
 290                                         <pre><code>\r
 291 &lt;div class=&quot;test3-pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 292         &lt;div class=&quot;test3-pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 293                 &lt;img src=&quot;../resource_pictures/1.png&quot; width=&quot;166&quot; height=&quot;252&quot; style=&quot;left: 178px; top: -2px; z-index: 0;&quot;&gt;\r
 294                 &lt;div class=&quot;test3-pettanr-comic-balloon&quot; style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;&gt;\r
 295                         &lt;img src=&quot;../system_pictures/_w5.gif&quot;&gt;\r
 296                         &lt;p&gt;&lt;span&gt;ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？&lt;/span&gt;&lt;/p&gt;\r
 297                 &lt;/div&gt;\r
 298                 &lt;div class=&quot;test3-pettanr-comic-balloon&quot; style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;&gt;\r
 299                         &lt;img src=&quot;../system_pictures/_w19.gif&quot;&gt;\r
 300                         &lt;p&gt;&lt;span&gt;さて？&lt;/span&gt;&lt;/p&gt;\r
 301                 &lt;/div&gt;\r
 302         &lt;/div&gt;\r
 303 &lt;/div&gt;\r
 304                                         </code></pre>\r
 305                                         <h4>css 部分</h4>\r
 306                                         <pre><code>\r
 307 .test3-pettanr-comic-wrapper {\r
 308         margin:                                 1em auto;\r
 309 }\r
 310         .test3-pettanr-comic-panel {\r
 311                 border-style:                   solid;\r
 312                 border-color:                   #111;\r
 313                 position:                               relative;\r
 314                 margin:                                 1em 0;\r
 315                 overflow:                               hidden;\r
 316         }\r
 317                 .test3-pettanr-comic-panel img {\r
 318                         position:                               absolute;\r
 319 \r
 320                 }\r
 321                 .test3-pettanr-comic-balloon {\r
 322                         position:                               absolute;\r
 323                 }\r
 324                         .test3-pettanr-comic-balloon img {\r
 325                                 position:                               absolute;\r
 326                                 width:                                  100%;\r
 327                                 height:                                 100%;                           \r
 328                         }\r
 329                         .test3-pettanr-comic-balloon p {\r
 330                                 margin:                                 0 !important;\r
 331                                 padding:                                0 !important;                           \r
 332                                 display:                                table;\r
 333                                 position:                               absolute;\r
 334                                 top:                                    0;\r
 335                                 left:                                   16.6%;\r
 336                                 width:                                  66.6%;\r
 337                                 height:                                 100%;\r
 338                                 *height:                                auto;\r
 339                                 *top:                                   50% !important;                         \r
 340                         }       \r
 341                                 .test3-pettanr-comic-balloon p span {\r
 342                                         display:                                table-cell;\r
 343                                         vertical-align:                 middle;\r
 344                                         text-align:                             center;\r
 345                                         *display:                               block;\r
 346                                         zoom:                                   1;\r
 347                                         *position:                              relative;\r
 348                                         *top:                                   -50%;                                   \r
 349                                 }       \r
 350                                         </code></pre>\r
 351                                         \r
 352                                         \r
 353                                         <h2>css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応</h2>\r
 354                                         <p>table-cell 及び クロスブラウザ対応</p>\r
 355                                         <div class="test2-pettanr-comic-wrapper" style="width: 400px;">\r
 356                                                 <div class="test2-pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 357                                                         <img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">\r
 358                                                         <div class="test2-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">\r
 359                                                                 <img src="../system_pictures/_w5.gif">\r
 360                                                                 <div><p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p></div>\r
 361                                                         </div>\r
 362                                                         <div class="test2-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">\r
 363                                                                 <img src="../system_pictures/_w19.gif">\r
 364                                                                 <div><p><span>さて？</span></p></div>\r
 365                                                         </div>\r
 366                                                 </div>\r
 367                                         </div>\r
 368                                         <h3>対応ブラウザ</h3>\r
 369                                         <p>NN9, firefox 3.6, ie6</p>\r
 370                                         \r
 371                                 </div>\r
 372                                 <!-- InstanceEndEditable -->\r
 373             </div>\r
 374         </div>\r
 375     </div>\r
 376     \r
 377     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 378 \r
 379         <div id="footer">\r
 380             <div id="footer-item-container" class="base-content-width clearfix">\r
 381                 <div class="footer-item-wrapper">\r
 382                     <div class="footer-item">\r
 383                         <h2>ぺったんR にようこそ</h2>\r
 384                         <ul>\r
 385                             <li>サンプル</li>\r
 386                             <li>ぺったんRの特徴</li>\r
 387                             <li>沿革</li>\r
 388                         </ul>\r
 389                         <h2>Test</h2>\r
 390                         <ul>\r
 391                             <li><a href="index.html">Test Index</a></li>\r
 392                         </ul>\r
 393                     </div>\r
 394                 </div>\r
 395                 <div class="footer-item-wrapper">\r
 396                     <div class="footer-item">\r
 397                         <h2>ドキュメント</h2>\r
 398                         <ul>\r
 399                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 400                             <li>絵師向けドキュメント</li>                                                     \r
 401                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 402                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 403                         </ul>\r
 404                     </div>\r
 405                 </div>\r
 406                 <div class="footer-item-wrapper">\r
 407                     <div class="footer-item">\r
 408                         <h2>プロトタイプ</h2>\r
 409                         <ul>\r
 410                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 411                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 412                         </ul>\r
 413                         <h2>Ajax contents</h2>\r
 414                         <ul>\r
 415                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 416                         </ul>\r
 417                     </div>\r
 418                 </div>\r
 419                 <div class="footer-item-wrapper" style="width:170px;">\r
 420                     <div class="footer-item" style="padding-right:0;">\r
 421                         <h2>ぺったんRチーム</h2>\r
 422                         <ul>\r
 423                             <li>わたしたちについて</li>\r
 424                             <li>ミッション</li>\r
 425                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 426                             <li>個人情報保護方針</li>\r
 427                             <li>作品の取り扱い</li>\r
 428                             <li>お問い合わせ</li>\r
 429                         </ul>\r
 430                     </div>\r
 431                 </div>\r
 432             </div>\r
 433             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 434         </div><!-- #EndLibraryItem -->\r
 435         </div>\r
 436         <script type="text/javascript">\r
 437                 var has_server_support = false;\r
 438         </script>\r
 439 <!-- InstanceBeginEditable name="script" -->\r
 440 <!-- InstanceEndEditable -->\r
 441 </body>\r
 442 <!-- InstanceEnd --></html>\r