<html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
<head>\r
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
<meta http-equiv="Content-Language" content="ja">\r
<meta http-equiv="Content-Script-Type" content="text/javascript">\r
<meta http-equiv="Content-Style-Type" content="text/css">\r
<!-- InstanceBeginEditable name="doctitle" -->\r
<title>ぺったんR html 実証サンプル version 0.1 | pettanR</title>\r
<!-- InstanceEndEditable -->\r
- <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
<!-- InstanceBeginEditable name="head" -->\r
<style type="text/css"> \r
\r
/* PettanR Comic\r
--------------------------------------------------------------------------------------*/\r
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
margin: 1em auto;\r
}\r
- .pettanr-comic-panel {\r
+ .test_pettanr-comic-panel {\r
border-style: solid;\r
border-color: #111;\r
position: relative;\r
margin: 1em 0;\r
overflow: hidden;\r
}\r
- .pettanr-comic-panel img {\r
+ .test_pettanr-comic-panel img {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon {\r
+ .test_pettanr-comic-balloon {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon img {\r
+ .test_pettanr-comic-balloon img {\r
width: 100%;\r
height: 100%; \r
}\r
- .pettanr-comic-balloon p {\r
+ .test_pettanr-comic-balloon p {\r
margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
*top: 50% !important;\r
\r
}\r
- .pettanr-comic-balloon p span,\r
- .pettanr-comic-balloon p strong,\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i,\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p span,\r
+ .test_pettanr-comic-balloon p strong,\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i,\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
vertical-align: middle;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
*position: relative;\r
*top: -50%;\r
}\r
- .pettanr-comic-balloon p strong {\r
+ .test_pettanr-comic-balloon p strong {\r
font-weight: bold;\r
}\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i {\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i {\r
font-style: italic;\r
}\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
font-family: monospace;\r
} \r
\r
- .show-border .pettanr-comic-balloon {\r
+ .show-border .test_pettanr-comic-balloon {\r
border: 1px solid green;\r
} \r
- .show-border .pettanr-comic-balloon p {\r
+ .show-border .test_pettanr-comic-balloon p {\r
border: 1px solid red;\r
}\r
- .show-border .pettanr-comic-balloon p span {\r
+ .show-border .test_pettanr-comic-balloon p span,\r
+ .show-border .test_pettanr-comic-balloon p strong,\r
+ .show-border .test_pettanr-comic-balloon p em,\r
+ .show-border .test_pettanr-comic-balloon p i,\r
+ .show-border .test_pettanr-comic-balloon p samp,\r
+ .show-border .test_pettanr-comic-balloon p code {\r
border: 1px solid blue;\r
}\r
</style>\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
<div id="breadcrumb"><a href="index.html">テスト インデックス</a> > ぺったんR html 実証サンプル version 0.1</div>\r
- <h2>ぺったんR html 実証サンプル version 0.1</h2>\r
+ <h2>ぺったんR html 実証サンプル version 0.1 2012.05.04</h2>\r
<h3>はじめに</h3>\r
- <p>html + css ã\81®è¡¨ç\8f¾å\8a\9bã\82\92æ´»ç\94¨ã\81\97ã\81¦ã\83\9eã\83³ã\82¬ç\8a¶ã\81®è¡¨ç¤ºã\82\92è¡\8cã\81\86ã\81®ã\81\93ã\81¨ã\81\8c ã\81ºã\81£ã\81\9fã\82\93ã\80\81å\8f\8aã\81³ ã\81ºã\81£ã\81\9fã\82\93R ã\81®è\82\9dã\81§ã\81\82ã\82\8b．</p>\r
+ <p>html + css ã\81®è¡¨ç\8f¾å\8a\9bã\82\92æ´»ç\94¨ã\81\97ã\81¦ã\83\9eã\83³ã\82¬ç\8a¶ã\81®è¡¨ç¤ºã\82\92è¡\8cã\81\86ã\81®ã\81\93ã\81¨ã\81\8c ã\81ºã\81£ã\81\9fã\82\93ã\80\81å\8f\8aã\81³ ã\81ºã\81£ã\81\9fã\82\93R ã\81®è\82\9dã\81§ã\81\99．</p>\r
<p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．</p>\r
<p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．</p>\r
- <p>ã\81\93ã\81®æ\96\87æ\9b¸ã\81§ç¤ºã\81\95ã\82\8cã\81\9f html æ§\8bé\80 ã\81¯ ã\81ºã\81£ã\81\9fã\82\93R ã\83\97ã\83ã\82¸ã\82§ã\82¯ã\83\88ã\81«è¨å®\9aã\81\95ã\82\8cã\81\9fライセンスの元でユーザーが自由に利用できる．</p>\r
+ <p>ã\81\93ã\81®æ\96\87æ\9b¸ã\81§ç¤ºã\81\95ã\82\8cã\81\9f html æ§\8bé\80 ã\81¯ ã\81ºã\81£ã\81\9fã\82\93R ã\83\97ã\83ã\82¸ã\82§ã\82¯ã\83\88ã\81®ライセンスの元でユーザーが自由に利用できる．</p>\r
\r
- <h2>機能一覧</h2>\r
+ <h3>機能一覧</h3>\r
<dl class="dl-table clearfix">\r
<dt>正常動作確認済みブラウザ</dt>\r
<dd>ie5.5+, NN7.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5</dd>\r
<dt>吹きだしの語調</dt>\r
<dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
<dt>吹きだし内テキストのレイアウト</dt>\r
- <dd>センタリング、右より、左より</dd>\r
+ <dd>センタリング<del>、右より、左より</del></dd>\r
</dl>\r
+ <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．</p>\r
\r
<h3>表示サンプル</h3>\r
<p>表示サンプルは今後充実していくこととする．</p>\r
<div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
\r
<div id="html2comic">\r
- <div class="pettanr-comic-wrapper" style="width: 400px;">\r
- <div class="pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+ <div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
<img src="../resource_pictures/1.png"\r
alt="目の血走ったペンギンが拳を握り締めている"\r
title="キャラクター名:キンイチ, 絵師:yas"\r
width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
>\r
<img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
<p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
</div>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
>\r
<img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
\r
<h3>画像や css に対応しない Web ブラウザでの表示</h3>\r
<p>マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．</p>\r
- <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し、html 構造を設定する．</p>\r
+ <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．</p>\r
+ <p>同様の着眼で代替テキストを用意する．</p>\r
<h4>テキストブラウザでの表示イメージ</h4>\r
<pre><samp>\r
目の血走ったペンギンが拳を握り締めている\r
<h4>対応ブラウザ</h4>\r
<p>NN7, NN8, NN9, firefox3.6, ie5.5, ie6, ie7, Safari3.2, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
<h4>準対応ブラウザ</h4>\r
- <p>opera6( overflow:hiddenが利かず要素がパネルをはみ出す )</p>\r
+ <p>opera6( <code>overflow:hidden</code> が孫要素に対して利かず（？）要素がパネルをはみ出す )</p>\r
<h4>非対応ブラウザ</h4>\r
<p>NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )</p>\r
\r
<p>パネルピクチャはひとつの <img> タグで表示されます．</p>\r
<p>バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．</p>\r
<pre class="brush: xml;">\r
-<div class="pettanr-comic-wrapper" style="width: 400px;">\r
- <div class="pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
+<div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
+ <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
<img src="../resource_pictures/1.png"\r
alt="目の血走ったペンギンが拳を握り締めている"\r
title="キャラクター名:キンイチ, 絵師:yas"\r
width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
>\r
<img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
<p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>\r
</div>\r
- <div class="pettanr-comic-balloon"\r
+ <div class="test_pettanr-comic-balloon"\r
style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
>\r
<img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
</div>\r
</pre>\r
<h4>css 部分</h4>\r
+ <p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う．</p>\r
+ <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
<pre class="brush: css;">\r
-.pettanr-comic-wrapper {\r
+.test_pettanr-comic-wrapper {\r
margin: 1em auto;\r
}\r
- .pettanr-comic-panel {\r
+ .test_pettanr-comic-panel {\r
border-style: solid;\r
border-color: #111;\r
position: relative;\r
margin: 1em 0;\r
overflow: hidden;\r
}\r
- .pettanr-comic-panel img {\r
+ .test_pettanr-comic-panel img {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon {\r
+ .test_pettanr-comic-balloon {\r
position: absolute;\r
}\r
- .pettanr-comic-balloon img {\r
+ .test_pettanr-comic-balloon img {\r
width: 100%;\r
height: 100%; \r
}\r
- .pettanr-comic-balloon p {\r
+ .test_pettanr-comic-balloon p {\r
margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
*top: 50% !important;\r
\r
}\r
- .pettanr-comic-balloon p span,\r
- .pettanr-comic-balloon p strong,\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i,\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p span,\r
+ .test_pettanr-comic-balloon p strong,\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i,\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
vertical-align: middle;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
*position: relative;\r
*top: -50%;\r
}\r
- .pettanr-comic-balloon p strong {\r
+ .test_pettanr-comic-balloon p strong {\r
font-weight: bold;\r
}\r
- .pettanr-comic-balloon p em,\r
- .pettanr-comic-balloon p i {\r
+ .test_pettanr-comic-balloon p em,\r
+ .test_pettanr-comic-balloon p i {\r
font-style: italic;\r
}\r
- .pettanr-comic-balloon p samp,\r
- .pettanr-comic-balloon p code {\r
+ .test_pettanr-comic-balloon p samp,\r
+ .test_pettanr-comic-balloon p code {\r
font-family: monospace;\r
} \r
</pre>\r
<div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
</div><!-- #EndLibraryItem -->\r
</div>\r
+ <script type="text/javascript">\r
+ var has_server_support = false;\r
+ </script>\r
<script type="text/javascript" src="../javascripts/common.js"></script>\r
<!-- InstanceBeginEditable name="script" -->\r
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
function switchBorder(){\r
var current = elm.className;\r
elm.className = cls === current ? '' : cls;\r
- btn.firstChild.data = cls === current ? 'hide border' : val;\r
+ btn.firstChild.data = cls === current ? val: 'hide border';\r
}\r
</script>\r
<!-- InstanceEndEditable -->\r
OSDN Git Service
