pettanR

マンガ状コンテンツを表示するための html + css の調査

html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです．

ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどれか？このページを表示させつつ判断します．

このページでは js を使用していないため ベクター画像の置き換えは行われず、反転画像はサーバのものが読み込まれます．

<table> を使ったテキストの上下中央配置

<table> タグを使ったレイアウトは多くのブラウザで意図した表示が期待できるが、html 文書としてはよろしくない．

対応ブラウザ

NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7

準対応ブラウザ

opera6( overflow:hiddenが利かず要素がパネルをはみ出す ), Konqueror4.8(windows, さて？がずれる)

非対応ブラウザ

NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )

source

html 部分

パネルピクチャはひとつの <img> タグで表示されます．

バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <table> からなる．

<div class="test1-pettanr-comic-wrapper" style="width: 400px;">
	<div class="test1-pettanr-comic-panel" style="border-width: 2px; height: 235px;">
		<img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">
		<div class="test1-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">
			<img src="../system_pictures/_w5.gif">
			<table class="test1-pettanr-comic-speach"><tr><td>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</td></tr></table>
		</div>
		<div class="test1-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">
			<img src="../system_pictures/_w19.gif">
			<table class="test1-pettanr-comic-speach"><tr><td>さて？</td></tr></table>
		</div>
	</div>
</div>
					

css 部分

.test1-pettanr-comic-wrapper {
	margin:					1em auto;
}
	.test1-pettanr-comic-panel {
		border-style:			solid;
		border-color:			#111;
		position:				relative;
		margin:					1em 0;
		overflow:				hidden;
	}
		.test1-pettanr-comic-panel img,
		.test1-pettanr-comic-balloon {
			position:				absolute;
		}		
		.test1-pettanr-comic-balloon .test1-pettanr-comic-speach {
			position:				absolute;
			table-layout:			fixed;
			top:					16.6%;
			left:					16.6%;
			width:					66.6%;
			height:					66.6%;
			border:					0;
			padding:				0;
			margin:					0 !important;
		}
			.test1-pettanr-comic-speach tbody,
			.test1-pettanr-comic-speach tr,
			.test1-pettanr-comic-speach td {
				width:				100%;
				height:				100%;
				border:				0;
				padding:			0;
				margin:				0 !important;
				vertical-align:		middle;
			}
					

css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応 タグの少ないバージョン

html タグ構造は 先の <table> レイアウトに比べて自然．しかし display:table-cell などを使うため、より広範なブラウザに対応する、という点で不安が残る．

参考にしたページ tableを使わずdivで縦位置を指定

対応ブラウザ

NN7, NN8, NN9, firefox 3.6, ie5.5, ie6, ie7, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)

準対応ブラウザ

opera6( overflow:hiddenが利かず要素がパネルをはみ出す )

非対応ブラウザ

NN6(テキスト表示位置がずれる), opera5(　日本語に非対応で文字化けする )

source

html 部分

パネルピクチャはひとつの <img> タグで表示されます．

バルーンは、位置とサイズを決めるための <div> の中に吹きだし画像のための <img> と テキストを上下中央配置するための <p> と <span> からなる．

<div class="test3-pettanr-comic-wrapper" style="width: 400px;">
	<div class="test3-pettanr-comic-panel" style="border-width: 2px; height: 235px;">
		<img src="../resource_pictures/1.png" width="166" height="252" style="left: 178px; top: -2px; z-index: 0;">
		<div class="test3-pettanr-comic-balloon" style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;">
			<img src="../system_pictures/_w5.gif">
			<p><span>ぺったんR 仕様の html によるコミック状表示が可能なブラウザはどの範囲か？</span></p>
		</div>
		<div class="test3-pettanr-comic-balloon" style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;">
			<img src="../system_pictures/_w19.gif">
			<p><span>さて？</span></p>
		</div>
	</div>
</div>
					

css 部分

.test3-pettanr-comic-wrapper {
	margin:					1em auto;
}
	.test3-pettanr-comic-panel {
		border-style:			solid;
		border-color:			#111;
		position:				relative;
		margin:					1em 0;
		overflow:				hidden;
	}
		.test3-pettanr-comic-panel img {
			position:				absolute;

		}
		.test3-pettanr-comic-balloon {
			position:				absolute;
		}
			.test3-pettanr-comic-balloon img {
				position:				absolute;
				width:					100%;
				height:					100%;				
			}
			.test3-pettanr-comic-balloon p {
				margin:					0 !important;
				padding:				0 !important;				
				display:				table;
				position:				absolute;
				top:					0;
				left:					16.6%;
				width:					66.6%;
				height:					100%;
				*height:				auto;
				*top:					50% !important;				
			}	
				.test3-pettanr-comic-balloon p span {
					display:				table-cell;
					vertical-align:			middle;
					text-align:				center;
					*display:				block;
					zoom:					1;
					*position:				relative;
					*top:					-50%;					
				}	
					

css:table-cell を使ったテキストの上下中央配置 及びクロスブラウザ対応

table-cell 及び クロスブラウザ対応

対応ブラウザ

NN9, firefox 3.6, ie6