0.4.x/test/html2comic_0.4.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-Language" content="ja">\r
   6         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   7         <meta http-equiv="Content-Style-Type" content="text/css">\r
   8         <meta http-equiv="imagetoolbar" content="no">\r
   9         <link rel="stylesheet" type="text/css" href="../stylesheets/common.css">\r
  10         <!-- InstanceBeginEditable name="doctitle" -->\r
  11         <title>ぺったんR html 実証サンプル version 0.4 | pettanR</title>\r
  12         <!-- InstanceEndEditable -->\r
  13         <!-- InstanceBeginEditable name="head" -->\r
  14         \r
  15         <link href="common.css" rel="stylesheet" type="text/css">\r
  16 \r
  17         \r
  18         <style type="text/css">\r
  19                                 \r
  20 /*  PettanR Comic\r
  21 --------------------------------------------------------------------------------------*/\r
  22 .test_pettanr-comic-wrapper {\r
  23         margin : 1em auto;\r
  24 }\r
  25         .test_pettanr-comic-panel {\r
  26                 border-style : solid;\r
  27                 border-color : #111;\r
  28                 position     : relative;\r
  29                 margin       : 1em 0;\r
  30                 overflow     : hidden;\r
  31         }\r
  32                 .test_pettanr-comic-panel img,\r
  33                 .test_pettanr-comic-balloon {\r
  34                         position : absolute;\r
  35                 }\r
  36                         .test_pettanr-comic-balloon img {\r
  37                                 width        : 100%;\r
  38                                 height       : 100%;\r
  39                         }\r
  40                         .test_pettanr-comic-speech {\r
  41                                 margin       : 0 !important;\r
  42                                 padding      : 0 !important;\r
  43                                 display      : table;\r
  44                                 table-layout : fixed;\r
  45                                 position     : absolute;\r
  46                                 top          : 0;\r
  47                                 left         : 16.6%;\r
  48                                 width        : 66.6%;\r
  49                                 height       : 100%;\r
  50                                 *height      : auto;\r
  51                                 *top         : 50% !important;\r
  52                         }\r
  53                                 .test_pettanr-comic-speech-inner {\r
  54                                         vertical-align : middle;\r
  55                                         display        : table-cell;\r
  56                                         *display       : block;\r
  57                                         zoom           : 1;\r
  58                                         *position      : relative;\r
  59                                         *top           : -50%;\r
  60                                 }\r
  61                                         .test_pettanr-comic-speech p {\r
  62                                                 padding : 0.5em 0 !important;\r
  63                                                 margin  : 0 !important;\r
  64                                         }\r
  65                                                 .test_pettanr-comic-speech strong {\r
  66                                                         font-weight    : bold;\r
  67                                                 }\r
  68                                                 .test_pettanr-comic-speech em,\r
  69                                                 .test_pettanr-comic-speech i {\r
  70                                                         font-style     : italic;\r
  71                                                 }\r
  72                                                 .test_pettanr-comic-speech samp,\r
  73                                                 .test_pettanr-comic-speech code {\r
  74                                                         font-family    : monospace;\r
  75                                                 }\r
  76                 .test_pettanr-comic-ground {\r
  77                         position            : absolute;\r
  78                         top                 : 0;\r
  79                         left                : 0;\r
  80                         width               : 0;\r
  81                         *width              : 100%; /* for ie5.5- */\r
  82                         height              : 100%;\r
  83                         overflow            : hidden;\r
  84                         padding-left        : 100%;\r
  85                         background-repeat   : repeat;\r
  86                         background-position : 0 0;\r
  87                 }\r
  88 \r
  89         .show-border .test_pettanr-comic-speech {\r
  90                 border : 1px solid green;\r
  91         }               \r
  92         .show-border .test_pettanr-comic-speech div {\r
  93                 border : 1px solid red;\r
  94         }\r
  95         .show-border .test_pettanr-comic-speech p {\r
  96                 border : 1px solid orange;\r
  97         }\r
  98         .show-border .test_pettanr-comic-speech span,\r
  99         .show-border .test_pettanr-comic-speech strong,\r
 100         .show-border .test_pettanr-comic-speech em,\r
 101         .show-border .test_pettanr-comic-speech i,\r
 102         .show-border .test_pettanr-comic-speech samp,\r
 103         .show-border .test_pettanr-comic-speech code {\r
 104                 border : 1px solid blue;\r
 105         }\r
 106         </style>\r
 107         <!-- InstanceEndEditable -->\r
 108 </head>\r
 109 \r
 110 <body>\r
 111     <div id="general-content">\r
 112         <div id="outer-wrapper">\r
 113             \r
 114             <div id="header">\r
 115                 <div class="base-content-width" style="position:relative;">\r
 116                     <h1><a href="../index.html">pettanR</a></h1>\r
 117                 <!-- global navi -->\r
 118                     <div id="global-navi">\r
 119                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 120                     </div>\r
 121                 </div>\r
 122             </div>\r
 123             \r
 124             <div id="inner-wrapper" class="base-content-width">\r
 125                                 <!-- InstanceBeginEditable name="main_content" -->\r
 126                                 <div id="main">\r
 127                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; ぺったんR html 実証サンプル version 0.3</div>\r
 128                                         \r
 129                                         <h2>ぺったんR html 実証サンプル version 0.4　2014.01.11</h2>\r
 130                                         <h3>はじめに</h3>\r
 131                                         <p>html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．</p>\r
 132                                         <p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．</p>\r
 133                                         <p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．</p>\r
 134                                         <p>この文書で示された html 構造と css は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．</p>\r
 135                                         \r
 136                                         <h3>機能一覧</h3>\r
 137                                         <dl class="dl-table clearfix">\r
 138                                                 <dt>正常動作確認済みブラウザ</dt>\r
 139                                                 <dd>ie5+, Firefox3.6+, NN6.2+, Opera7.11 &amp; 9.64+, Konqueror4.8, Safari3.2, Iron5</dd>\r
 140                                                 <dt>フォントサイズ・フリー</dt>\r
 141                                                 <dd>コマ、コマ要素の各サイズは基準フォントサイズに対する相対サイズで指定することで、ブラウザのフォントサイズ変更を行ってもレイアウトを保つことができる</dd>\r
 142                                                 <dt>吹きだしの語調</dt>\r
 143                                                 <dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
 144                                                 <dt>脚本情報</dt>\r
 145                                                 <dd>テキストブラウザ・音声読み上げブラウザでも作品を読むことができる（はず）</dd>\r
 146                                                 <dt>リッチテキスト機能</dt>\r
 147                                                 <dd>まだ、、、</dd>\r
 148                                         </dl>\r
 149                                         <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．</p>\r
 150                                         \r
 151                                         <h3>表示サンプル</h3>\r
 152                                         <p>表示サンプルは今後充実していくこととする．</p>\r
 153                                         \r
 154                                         <div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
 155                         \r
 156                                         <div id="html2comic">\r
 157                                                 <div class="test_pettanr-comic-wrapper" style="width: 25em;">\r
 158                                                         <div class="test_pettanr-comic-panel" style="border-width: 0.13em;height: 18.75em;">\r
 159                                                                 <div class="test_pettanr-comic-balloon"\r
 160                                                                         style="width: 12.5em; height: 12.5em; left: -0.25em; top: -0.625em; z-index: 3;"\r
 161                                                                 >\r
 162                                                                         <img src="../system_pictures/_w7.gif" alt="ようやく口を開くと">\r
 163                                                                         <div class="test_pettanr-comic-speech">\r
 164                                                                                 <div class="test_pettanr-comic-speech-inner">\r
 165                                                                                         <p>それじゃほとんど意味がないじゃねえか</p>\r
 166                                                                                 </div>\r
 167                                                                         </div>\r
 168                                                                 </div>\r
 169                                                                 <img src="2.gif"\r
 170                                                                         alt="頭を抱えるキンイチであった"\r
 171                                                                         title="キャラクター名:キンイチ, 絵師:yas"\r
 172                                                                         longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
 173                                                                         width="247" height="273" style="width: 15.44em; height: 17.06em; top: 6.31em; left: 5.38em; z-index: 2;">\r
 174                                                                 <div class="test_pettanr-comic-ground" style="z-index: 1; background-color: #003;">深いため息に空気までが暗く重々しい…</div>\r
 175                                                         </div>\r
 176 \r
 177                                                         <div class="test_pettanr-comic-panel" style="border-width: 0.13em; height: 14.69em;">\r
 178                                                                 <img src="../resource_pictures/1.png"\r
 179                                                                         alt="目の血走ったペンギンが拳を握り締めている"\r
 180                                                                         title="キャラクター名:キンイチ, 絵師:yas"\r
 181                                                                         longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
 182                                                                         style="width: 10.38em; height: 17em; left: 9.25em; top: -0.13em; z-index: 0;"\r
 183                                                                 >\r
 184                                                                 <div class="test_pettanr-comic-balloon"\r
 185                                                                         style="width: 13.5em; height: 14em; left: -1.81em; top: 0.44em; z-index: 1;"\r
 186                                                                 >\r
 187                                                                         <img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
 188                                                                         <div class="test_pettanr-comic-speech">\r
 189                                                                                 <div class="test_pettanr-comic-speech-inner">\r
 190                                                                                         <p>どの環境でもそれなりにセリフを表示する</p>\r
 191                                                                                         <p>これには慎重を要する</p>\r
 192                                                                                 </div>\r
 193                                                                         </div>\r
 194                                                                 </div>\r
 195                                                                 <div class="test_pettanr-comic-balloon"\r
 196                                                                         style="width: 6.25em; height: 5em; left: 18.75em; top: 5em; z-index: 2;"\r
 197                                                                 >\r
 198                                                                         <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
 199                                                                         <div class="test_pettanr-comic-speech">\r
 200                                                                                 <div class="test_pettanr-comic-speech-inner">\r
 201                                                                                         <p>そやそや</p>\r
 202                                                                                 </div>\r
 203                                                                         </div>\r
 204                                                                 </div>\r
 205                                                         </div>\r
 206                                                 </div>\r
 207                                         </div>\r
 208                                         \r
 209                                         \r
 210                                         <h3>画像や css に対応しない Web ブラウザでの表示</h3>\r
 211                                         <p>マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．</p>\r
 212                                         <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．</p>\r
 213                                         <p>同様の着眼で代替テキストを用意する．</p>\r
 214                                         <h4>テキストブラウザでの表示イメージ</h4>\r
 215                                         <pre><samp>\r
 216 \r
 217 ようやく口を開くと\r
 218 「それじゃほとんど意味がないじゃねえか」\r
 219 頭を抱えるキンイチであった\r
 220 深いため息に空気までが暗く重々しい…\r
 221 \r
 222 目の血走ったペンギンが拳を握り締めている\r
 223 ペンギン曰く\r
 224 「どの環境でもそれなりにセリフを表示する」\r
 225 これには慎重を要する\r
 226 ペンギン一息ついて\r
 227 「そやそや」\r
 228                                         </samp></pre>\r
 229                                         \r
 230                                         <h3>ブラウザ検証</h3>\r
 231                                         <h4>対応ブラウザ</h4>\r
 232                                         <p>NN6.2+, firefox3.6, ie5+, Safari3.2, Iron5, opera7.11 & 9.64+, Konqueror4.8(windows)</p>\r
 233                                         <h4>準対応ブラウザ</h4>\r
 234                                         <p>Opera6.06( <code>overflow:hidden</code> が孫要素に対して利かず（？）要素がパネルをはみ出す z-index が overflow:hidden なパネルを超えて効いてしまう)</p>\r
 235                                         <p>Opera8.02 パネルの枠線が一部欠けてしまう．alt タグの内容が画面に表示される．opera7.11 ではこの不具合は起こらない．</p>\r
 236                                         <h4>非対応ブラウザ</h4>\r
 237                                         <p>NN6(テキスト表示位置がずれる．z-index 指定が画面にゴミを出してしまう), Opera5(　日本語に非対応で文字化けする )</p>\r
 238                                         \r
 239                                         <h3>ソースコード</h3>\r
 240                                         <h4>html 部分</h4>\r
 241                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 242                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;div&gt; と複数の &lt;p&gt; からなる．</p>\r
 243                                         <pre class="brush: xml;">\r
 244                                                 &lt;div class=&quot;test_pettanr-comic-wrapper&quot; style=&quot;width: 25em;&quot;&gt;\r
 245                                                         &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 0.13em;height: 18.75em;&quot;&gt;\r
 246                                                                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 247                                                                         style=&quot;width: 12.5em; height: 12.5em; left: -0.25em; top: -0.625em; z-index: 3;&quot;\r
 248                                                                 &gt;\r
 249                                                                         &lt;img src=&quot;../system_pictures/_w7.gif&quot; alt=&quot;ようやく口を開くと&quot;&gt;\r
 250                                                                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 251                                                                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;&gt;\r
 252                                                                                         &lt;p&gt;それじゃほとんど意味がないじゃねえか&lt;/p&gt;\r
 253                                                                                 &lt;/div&gt;\r
 254                                                                         &lt;/div&gt;\r
 255                                                                 &lt;/div&gt;\r
 256                                                                 &lt;img src=&quot;2.gif&quot;\r
 257                                                                         alt=&quot;頭を抱えるキンイチであった&quot;\r
 258                                                                         title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
 259                                                                         longdesc=&quot;http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi&quot;\r
 260                                                                         width=&quot;247&quot; height=&quot;273&quot; style=&quot;width: 15.44em; height: 17.06em; top: 6.31em; left: 5.38em; z-index: 2;&quot;&gt;\r
 261                                                                 &lt;div class=&quot;test_pettanr-comic-ground&quot; style=&quot;z-index: 1; background-color: #003;&quot;&gt;深いため息に空気までが暗く重々しい…&lt;/div&gt;\r
 262                                                         &lt;/div&gt;\r
 263 \r
 264                                                         &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 0.13em; height: 14.69em;&quot;&gt;\r
 265                                                                 &lt;img src=&quot;../resource_pictures/1.png&quot;\r
 266                                                                         alt=&quot;目の血走ったペンギンが拳を握り締めている&quot;\r
 267                                                                         title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
 268                                                                         longdesc=&quot;http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi&quot;\r
 269                                                                         style=&quot;width: 10.38em; height: 17em; left: 9.25em; top: -0.13em; z-index: 0;&quot;\r
 270                                                                 &gt;\r
 271                                                                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 272                                                                         style=&quot;width: 13.5em; height: 14em; left: -1.81em; top: 0.44em; z-index: 1;&quot;\r
 273                                                                 &gt;\r
 274                                                                         &lt;img src=&quot;../system_pictures/_w5.gif&quot; alt=&quot;ペンギン曰く&quot;&gt;\r
 275                                                                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 276                                                                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;&gt;\r
 277                                                                                         &lt;p&gt;どの環境でもそれなりにセリフを表示する&lt;/p&gt;\r
 278                                                                                         &lt;p&gt;これには慎重を要する&lt;/p&gt;\r
 279                                                                                 &lt;/div&gt;\r
 280                                                                         &lt;/div&gt;\r
 281                                                                 &lt;/div&gt;\r
 282                                                                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 283                                                                         style=&quot;width: 6.25em; height: 5em; left: 18.75em; top: 5em; z-index: 2;&quot;\r
 284                                                                 &gt;\r
 285                                                                         &lt;img src=&quot;../system_pictures/_w19.gif&quot; alt=&quot;ペンギン一息ついて&quot;&gt;\r
 286                                                                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 287                                                                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;&gt;\r
 288                                                                                         &lt;p&gt;そやそや&lt;/p&gt;\r
 289                                                                                 &lt;/div&gt;\r
 290                                                                         &lt;/div&gt;\r
 291                                                                 &lt;/div&gt;\r
 292                                                         &lt;/div&gt;\r
 293                                                 &lt;/div&gt;\r
 294                                         </pre>\r
 295                                         <h4>css 部分</h4>\r
 296                                         <h5>上下中央配置(モダンブラウザ)</h5>\r
 297                                         <p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う．</p>\r
 298                                         <h5>上下中央配置(old IE)</h5>\r
 299                                         <p><code>display: table</code> をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している．その様子を、show border ボタンを使って確認されたし．（ 参考 <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a> ）</p>\r
 300                                         <h5>レイアウト計算負荷を下げる</h5>\r
 301                                         <p>.test_pettanr-comic-ground でテキストをコマの外に飛ばしているのは、<code>padding-left : 100%; になる．</code></p><p><code>width : 0; *width : 100%; overflow : hidden </code>はどちらも無くても表示に変わりが無いが、それぞれレイアウト計算負荷が下がりそうなので指定してある．</p>\r
 302                                         <pre class="brush: css;">\r
 303 .test_pettanr-comic-wrapper {\r
 304         margin : 1em auto;\r
 305 }\r
 306         .test_pettanr-comic-panel {\r
 307                 border-style : solid;\r
 308                 border-color : #111;\r
 309                 position     : relative;\r
 310                 margin       : 1em 0;\r
 311                 overflow     : hidden;\r
 312         }\r
 313                 .test_pettanr-comic-panel img,\r
 314                 .test_pettanr-comic-balloon {\r
 315                         position : absolute;\r
 316                 }\r
 317                         .test_pettanr-comic-balloon img {\r
 318                                 width        : 100%;\r
 319                                 height       : 100%;\r
 320                         }\r
 321                         .test_pettanr-comic-speech {\r
 322                                 margin       : 0 !important;\r
 323                                 padding      : 0 !important;\r
 324                                 display      : table;\r
 325                                 table-layout : fixed;\r
 326                                 position     : absolute;\r
 327                                 top          : 0;\r
 328                                 left         : 16.6%;\r
 329                                 width        : 66.6%;\r
 330                                 height       : 100%;\r
 331                                 *height      : auto;\r
 332                                 *top         : 50% !important;\r
 333                         }\r
 334                                 .test_pettanr-comic-speech-inner {\r
 335                                         vertical-align : middle;\r
 336                                         display        : table-cell;\r
 337                                         *display       : block;\r
 338                                         zoom           : 1;\r
 339                                         *position      : relative;\r
 340                                         *top           : -50%;\r
 341                                 }\r
 342                                         .test_pettanr-comic-speech p {\r
 343                                                 padding : 0.5em 0 !important;\r
 344                                                 margin  : 0 !important;\r
 345                                         }\r
 346                                                 .test_pettanr-comic-speech strong {\r
 347                                                         font-weight    : bold;\r
 348                                                 }\r
 349                                                 .test_pettanr-comic-speech em,\r
 350                                                 .test_pettanr-comic-speech i {\r
 351                                                         font-style     : italic;\r
 352                                                 }\r
 353                                                 .test_pettanr-comic-speech samp,\r
 354                                                 .test_pettanr-comic-speech code {\r
 355                                                         font-family    : monospace;\r
 356                                                 }\r
 357                 .test_pettanr-comic-ground {\r
 358                         position            : absolute;\r
 359                         top                 : 0;\r
 360                         left                : 0;\r
 361                         width               : 0;\r
 362                         *width              : 100%; /* for ie5.5- */\r
 363                         height              : 100%;\r
 364                         overflow            : hidden;\r
 365                         padding-left        : 100%;\r
 366                         background-repeat   : repeat;\r
 367                         background-position : 0 0;\r
 368                 }\r
 369                                         </pre>\r
 370                                         <h3>履歴</h3>\r
 371                                         <dl class="dl-table-small">\r
 372                                                 <dt>version 0.4</dt>\r
 373                                                 <dd>2014.01.11 公開．<br>\r
 374                                                         html 中の全ての長さを px 指定ヵら、ベースフォントサイズ(16px)を基準にしたサイズ(em指定)とする。<br>\r
 375                                                         これにより、吹き出し内のリッチテキストのフォントサイズの変更も絶対指定(px等)から相対指定(%,em)にする必要がある。\r
 376                                                 </dd>                           \r
 377                                                 <dt>version 0.3</dt>\r
 378                                                 <dd>2013.09.23 公開．<br>\r
 379                                                         脚本情報を html タグとして書き出し、通常の閲覧に際しては非表示、テキストブラウザ等に対しては表示となるように html と css を拡張．参考 <a href="http://sourceforge.jp/forum/message.php?msg_id=70069">RE: 脚本機能について</a><br>\r
 380                                                         あるパネルで指定されたパネル要素の z-index が、他のパネルに影響しないか？調査の追加．参考 <a href="http://sourceforge.jp/forum/message.php?msg_id=70116">RE: パネルのZインデックスが適切でない</a>\r
 381                                                 </dd>\r
 382                                                 <dt>version 0.2</dt>\r
 383                                                 <dd>2013.08.10 公開．<br>\r
 384                                                         吹き出し内での &lt;p&gt; タグによる段落分け(改行)に対応．<br>\r
 385                                                         デフォルトでテキストの中央配置をやめる．<br>\r
 386                                                         外す．<del>font-size : 14px; /* opera6 で使用 13px は不可 */</del><br>\r
 387                                                         レンダリング負荷を下げる為の css 指定を追加 ( テキストの上下中央配置のための display:table に対して tabel-layout:fixed を追加 )．<br>\r
 388                                                         &lt;img&gt; タグに longdesc を追加．title 属性で説明しきれなかった画像に関する情報が書いてある url を指示する手段としてとして適切ではないか、と考える．\r
 389                                                 </dd>\r
 390                                                 <dt>version 0.1</dt>\r
 391                                                 <dd>2012.05.04 公開．</dd>\r
 392                                         </dl>\r
 393                                         <h3>懸案</h3>\r
 394                                         <p>スピーチの上下中央配置に使っている display:table を使ったテクニックに Firefox 3.5 で起きる不具合が報告されている．<a href="http://ie-style.blogspot.jp/2009/08/firefox-35-display-tabletable-row-table.html">Project IE: Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について:</a></p>\r
 395                                 </div>\r
 396                                 <!-- InstanceEndEditable -->\r
 397             </div>\r
 398         </div>\r
 399     </div>\r
 400     \r
 401     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 402 \r
 403         <div id="footer">\r
 404             <div id="footer-item-container" class="base-content-width clearfix">\r
 405                 <div class="footer-item-wrapper">\r
 406                     <div class="footer-item">\r
 407                         <h2>ぺったんR にようこそ</h2>\r
 408                         <ul>\r
 409                             <li>サンプル</li>\r
 410                             <li>ぺったんRの特徴</li>\r
 411                             <li>沿革</li>\r
 412                         </ul>\r
 413                         <h2>Test</h2>\r
 414                         <ul>\r
 415                             <li><a href="index.html">Test Index</a></li>\r
 416                         </ul>\r
 417                     </div>\r
 418                 </div>\r
 419                 <div class="footer-item-wrapper">\r
 420                     <div class="footer-item">\r
 421                         <h2>ドキュメント</h2>\r
 422                         <ul>\r
 423                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 424                             <li>絵師向けドキュメント</li>                                                     \r
 425                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 426                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 427                         </ul>\r
 428                     </div>\r
 429                 </div>\r
 430                 <div class="footer-item-wrapper">\r
 431                     <div class="footer-item">\r
 432                         <h2>プロトタイプ</h2>\r
 433                         <ul>\r
 434                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 435                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 436                         </ul>\r
 437                         <h2>Ajax contents</h2>\r
 438                         <ul>\r
 439                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 440                         </ul>\r
 441                     </div>\r
 442                 </div>\r
 443                 <div class="footer-item-wrapper" style="width:170px;">\r
 444                     <div class="footer-item" style="padding-right:0;">\r
 445                         <h2>ぺったんRチーム</h2>\r
 446                         <ul>\r
 447                             <li>わたしたちについて</li>\r
 448                             <li>ミッション</li>\r
 449                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 450                             <li>個人情報保護方針</li>\r
 451                             <li>作品の取り扱い</li>\r
 452                             <li>お問い合わせ</li>\r
 453                         </ul>\r
 454                     </div>\r
 455                 </div>\r
 456             </div>\r
 457             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 458         </div><!-- #EndLibraryItem -->\r
 459         </div>\r
 460         <script type="text/javascript">\r
 461                 var has_server_support = false;\r
 462         </script>\r
 463         <script type="text/javascript" src="../javascripts/common.js"></script>\r
 464 <!-- InstanceBeginEditable name="script" -->\r
 465         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
 466         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>\r
 467         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>\r
 468         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>\r
 469         <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
 470         <script type="text/javascript">\r
 471                 SyntaxHighlighter.all();\r
 472                 \r
 473                 var btn = document.getElementById( 'swbutton' );\r
 474                 var elm = document.getElementById( 'html2comic' );\r
 475                 var cls = 'show-border';\r
 476                 var val = btn.firstChild.data\r
 477                 \r
 478                 function switchBorder(){\r
 479                         var current = elm.className;\r
 480                         elm.className = cls === current ? '' : cls;\r
 481                         btn.firstChild.data = cls === current ? val: 'hide border';\r
 482                 }\r
 483         </script>\r
 484 <!-- InstanceEndEditable -->\r
 485 </body>\r
 486 <!-- InstanceEnd --></html>