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